如何将列高限制为另一个？答案

【问题标题】：How to limit column height to another one's?如何将列高限制为另一个？
【发布时间】：2010-12-29 14:09:56
【问题描述】：

我在 WPF 中有一个网格，它由 4 行沿 2 列组成，其中第 1 列包含一个图像控件，第 2 列包含 4 个文本块。问题是，Image 控件将自身调整为 Image 大小，并且过多地扩展了列表框的条目 [Its in a DataTemplate] 并使一切看起来都扭曲了。我不想手动设置最大高度/宽度，因为我希望图像将自身调整为旁边的 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>

提前致谢

【问题讨论】：

标签： wpf grid datatemplate

【解决方案1】：

您可以在父 ListBox 上使用 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}"/>

【讨论】：

我不认为这是关于 ListBox 的问题；授予 OP 提到它驻留在 ListBox 中，但我相信 OP 所引用的是在添加跨越这 4 行的图像后在 Grid 中修改的行高，而图像坚持整体高度而不增加说高度;因为 ColumnDefinition 甚至没有高度属性
我现在正在尝试，谢谢:) @Aaron 我指的是列高，因为它的所有行的组合高度:)
@Aaron：我起初错过了这个问题，然后我更新了我的答案并且没有删除第一部分，因为这也可能是 OP 的问题。你是在更新之前还是之后参考了我的帖子？
@Drknezz：我起初对您的问题有错误的想法，所以第一部分可能不适用。第二部分有望解决您的问题:) 我应该删除有关 IsSharedSizeScope 的部分吗？
@Meleak 我指的是第一部分；我没看过第二部分...

【解决方案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>

【讨论】：