如何限制另一个列的高度？

Question

我在 WPF 中有一个网格，它由 4 行和 2 列组成，其中第 1 列包含一个图像控件，第 2 列包含 4 个文本块。问题是，图像控件将自身大小调整为图像大小，并将列表框的条目扩展太多[它在数据模板中]，并使所有内容看起来都扭曲了。我不想手动设置最大高度/宽度，因为我希望图像将自身大小调整为它旁边的 4 个文本块的大小。有什么想法吗？

<DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Image Source="{Binding Logo, Converter={StaticResource BSConverter}}" Grid.Row="0" Grid.RowSpan="4" 
                           Grid.Column="0" Stretch="Uniform" SnapsToDevicePixels="True"/>
                    <TextBlock Text="{Binding Name}" Grid.Row="0" Grid.Column="1"/>
                    <TextBlock Text="{Binding Author}" Grid.Row="1" Grid.Column="1"/>
                    <TextBlock Text="{Binding Version}" Grid.Row="2" Grid.Column="1"/>
                    <TextBlock Text="{Binding Description}" Grid.Row="3" Grid.Column="1"/>
                </Grid>
            </DataTemplate>

提前致谢

Answer 1

您可以在父列表框上使用 Grid.IsSharedSizeGroup 来确保所有项目的第一列具有相同的宽度，如下所示

<ListBox ...
         Grid.IsSharedSizeScope="True">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition SharedSizeGroup="GroupA"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                ...

对于图像高度问题，您可以将 Height 绑定到父网格的 ActualHeight，并将 FallbackValue 设置为 1.0 (确保图像的高度不会影响网格的高度）

<Image Source="{Binding Logo, Converter={StaticResource BSConverter}}"
       Grid.Row="0"
       Grid.RowSpan="4"
       Grid.Column="0"
       Stretch="Uniform" SnapsToDevicePixels="True"
       Height="{Binding RelativeSource={RelativeSource AncestorType=Grid},
                        Path=ActualHeight,
                        FallbackValue=1.0}"/>

Answer 2

稍微修改容器以将 StackPanel 与 Grid 结合使用，并通过 ElementName 绑定引用 StackPanel应该为您提供您正在寻找的视觉效果......

<DataTemplate>
    <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,8,0" Source="{Binding Logo, Converter={StaticResource BSConverter}}" 
                           Grid.Column="0" Stretch="Uniform" SnapsToDevicePixels="True" 
           Height="{Binding ElementName=Contents, Path=ActualHeight}"/>

        <StackPanel VerticalAlignment="Top" Name="Contents" Grid.Column="1" Orientation="Vertical">
            <TextBlock Text="{Binding Name}"/>
            <TextBlock Text="{Binding Author}"/>
            <TextBlock Text="{Binding Version}"/>
            <TextBlock Text="{Binding Description}"/>
        </StackPanel>
    </Grid>
</DataTemplate>