Question

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

您可以在Parent 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}"/>

Answer 2

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

<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>

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

2 个答案: