使 WPF 用户控件高度适合其内容

Question

我有以下 WPF 用户控件。它包含一个网格作为根。网格由单行和 4 列组成。在第二列中，有一个标签由于添加了更多文本而改变了其高度。我发现网格高度也发生了变化，这是我想要的，但用户控件高度却不是。那么如何使用户控件的高度适合其内容高度（在本例中为网格高度）？

<UserControl x:Class="MyUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:conv="clr-namespace:myConverters"
             mc:Ignorable="d" 
             d:DesignHeight="40" d:DesignWidth="500">
    <UserControl.Resources>
        <ResourceDictionary>
            <!-- Converters -->
            <BooleanToVisibilityConverter x:Key="BoolToVisibility" />
            <conv:InvertBooleanToVisibilityConverter x:Key="InvertBoolToVisibility" />
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Image Grid.Column="0" 
               Width="24"
               Height="24"
               Margin="8"
               Visibility="{Binding Path=IsVisible, Converter={StaticResource InvertBoolToVisibility}}"
               Source="{Binding Path=Icon}"/>
        
        <Label Grid.Column="1"
               VerticalAlignment="Center"
               VerticalContentAlignment="Center"
               HorizontalContentAlignment="Stretch"
               HorizontalAlignment="Left"
               MaxWidth="700"
               Width="auto"
               Height="Auto"
               Margin="5"
               Foreground="{Binding Path=ForegroundColor}">
            <TextBlock Text="{Binding Path=Text}" 
                       HorizontalAlignment="Stretch" 
                       VerticalAlignment="Center" 
                       Height="auto" 
                       Width="auto" 
                       TextWrapping="Wrap"/>
        </Label>

        <Button Grid.Column="2"
                Width="80"
                Height="28"
                VerticalAlignment="Center"
                VerticalContentAlignment="Center"
                HorizontalAlignment="Left"
                HorizontalContentAlignment="Center"
                Margin="5,5,30,5"
                Padding="5"
                Content="Clear"
                Foreground="Red"
                Visibility="{Binding Path=IsVisible, Converter={StaticResource BoolToVisibility}}"
                Click="ButtonClear_Click"/>
        
        <Image Grid.Column="3"
               HorizontalAlignment="Right"
               VerticalAlignment="Center"
               MinWidth="36"
               Width="36"
               Height="36"
               Margin="8,2"
               Visibility="{Binding Path=IsVisible, Converter={StaticResource InvertBoolToVisibility}}"
               Source="{Binding Path=Logo}"/>
    </Grid>
</UserControl>

Answer 1

罗德里. 您可以参考以下代码设置UserControl的高度随着其内容的高度而变化。

 UserControl:
  <UserControl x:Class="LabelTextBox.UserControl1"
         xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
         xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
         xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 
         xmlns:d=http://schemas.microsoft.com/expression/blend/2008 
         xmlns:local="clr-namespace:LabelTextBox"
         mc:Ignorable="d" 
         d:DesignHeight="{Binding ElementName=grid ,Path=ActualHeight}" d:DesignWidth="{Binding ElementName=grid,Path=ActualWidth}">
<Grid x:Name="grid"  Background="Green" Height="{Binding ElementName=label,Path=ActualHeight}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="150"/>
    </Grid.ColumnDefinitions>
    <Label Grid.Column="1" x:Name="label"  MaxWidth="200" Background="red"   >
        <TextBlock Text="{Binding MyText,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"   TextWrapping="Wrap"/>
    </Label>
    <Button Grid.Column="2"
            Width="80"
            Height="28"
            Content="Remove All"
            Foreground="Red"    Click="Button_Click"/>
    <TextBox Text="{Binding MyText,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Background="AliceBlue" Grid.Column="3" TextWrapping="Wrap"/>
</Grid>

public partial class UserControl1 : UserControl, INotifyPropertyChanged
{
    public UserControl1()
    {
        InitializeComponent();
        DataContext = this;
    }
    private string myText = "helo";

    public event PropertyChangedEventHandler PropertyChanged;

    public string MyText
    {
        get { return myText; }
        set
        {
            myText = value;
            OnPropertyChanged();
        }
    }

    protected void OnPropertyChanged([CallerMemberName] string name = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {

    }
}
Window:

   <Grid>
    <local:UserControl1 />

</Grid>