XAML ListView 自动宽度列

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

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

即您必须将 ListView 的 ItemContainerStyle 的 HorizontalContentAlignment 设置为 Stretch。

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

(将以下代码放入<ListView>Tag)

<ListView.Resources>
    <!-- Better to put this to another XAML file -->
    <Style x:Key="ListViewItemStyleDefault" TargetType="ListViewItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="Padding" Value="12,0,12,0"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" ContentMargin="{TemplateBinding Padding}" CheckMode="Inline" ContentTransitions="{TemplateBinding ContentTransitions}" CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}" SelectionCheckMarkVisualEnabled="True" SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}" SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ListViewItemStyleStretch" TargetType="ListViewItem" BasedOn="{StaticResource ListViewItemStyleDefault}">
        <!-- Magic here -->
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</ListView.Resources>
<ListView.ItemContainerStyle>
    <StaticResource ResourceKey="ListViewItemStyleStretch"/>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
    <!-- Your ItemTemplate... -->
</ListView.ItemTemplate>

Answer 2

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

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