Question

我正在尝试开发一个供个人使用的通用应用，但是我遇到的问题是我的ListView中的第二列没有正确对齐，我有以下XAML：

<ListView 
        Grid.Row="1"

        ItemsSource="{Binding Items, UpdateSourceTrigger=PropertyChanged}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="1*" />
                        <RowDefinition Height="1*" />
                    </Grid.RowDefinitions>
                    <Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Stretch="None" Source="{Binding Image}" />
                    <TextBlock Grid.Column="0" Grid.Row="2" Text="{Binding Name}" HorizontalAlignment="Center" />
                    <Image Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Source="{StaticResource HighAlchImage}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

这导致以下图像：

但是，我希望第二张图像（每次都是相同的图像）与自身对齐，最好是第一列的宽度为自动。这可能吗？

Answer 1

Grid面板内置了此类功能。为了利用它，您应该在列定义上设置SharedSizeGroup，然后在为所有网格生成父项的元素上设置附加Grid.IsSharedSizeScope应该共享列大小（ListView在您的情况下是一个不错的选择。）

<ListView Grid.Row="1"
          ItemsSource="{Binding Items, UpdateSourceTrigger=PropertyChanged}"
          Grid.IsSharedSizeScope="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Column1" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Column2" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="1*" />
                </Grid.RowDefinitions>
                <Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Stretch="None" Source="{Binding Image}" />
                <TextBlock Grid.Column="0" Grid.Row="2" Text="{Binding Name}" HorizontalAlignment="Center" />
                <Image Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Source="{StaticResource HighAlchImage}" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

在为SharedSizeGroup属性选择值时，您可能需要小心谨慎 - 最好，每个可视树都应该是唯一的。

Answer 2

您需要将ListViewItem的宽度拉伸到ListView的宽度。

即。您必须将ListView的HorizontalContentAlignment的{{1}}设置为ItemContainerStyle。

通常我会创建Default ListViewItemStyle的副本，然后根据默认样式进行自定义：

（将以下代码放在Stretch标签内）

<ListView>

Answer 3

反之亦然：

<Grid.ColumnDefinitions>
   <ColumnDefinition Width="Auto" />
   <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

这样，您的第一列将使用它所需的空间，第二列将对齐。

Answer 4

寻找解决方案，我最终在这里，@ Ryan接近解决我的问题，但必须做一些调整。

1创建样式：

<Style x:Key="LstViewItemContainerStyle" TargetType="ListViewItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>

2将样式应用于列表视图，如下所示：

<ListView
    ...
    ItemContainerStyle="{StaticResource LstViewItemContainerStyle}">
</ListView>

XAML ListView自动宽度列

4 个答案: