WinUI3中为ListView选中项应用差异化样式的更优方案

无需使用DataTemplateSelector维护多份模板，推荐通过自定义ListViewItem样式实现，全程可通过XAML完成，以下是两种场景的具体实现：

一、简单样式修改（仅调整背景/前景） #

直接在ItemContainerStyle中设置选中状态相关属性，无需修改控件模板：

<ListView>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <!-- 基础选中状态样式 -->
            <Setter Property="SelectedBackground" Value="#FF1E88E5"/>
            <Setter Property="SelectedForeground" Value="White"/>
            <!-- 选中+鼠标悬停状态样式 -->
            <Setter Property="SelectedPointerOverBackground" Value="#FF2979FF"/>
            <!-- 选中+鼠标按下状态样式 -->
            <Setter Property="SelectedPressedBackground" Value="#FF0D47A1"/>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" FontSize="16"/>
        </DataTemplate>
    </ListView.ItemTemplate>
    <!-- 示例数据 -->
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
</ListView>

二、复杂样式修改（调整内部元素布局/显示） #

通过修改ListViewItem的控件模板，利用VisualState管理选中及组合状态（如选中+悬停）的样式，可精准控制DataTemplate内的元素：

<Page.Resources>
    <Style x:Key="CustomListViewItemStyle" TargetType="ListViewItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter x:Name="Root"
                                           ContentTransitions="{TemplateBinding ContentTransitions}"
                                           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                           ContentMargin="{TemplateBinding Padding}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <!-- 修改容器背景 -->
                                        <Setter Target="Root.SelectedBackground" Value="#FF1E88E5"/>
                                        <!-- 修改DataTemplate内命名元素的样式 -->
                                        <Setter Target="ItemText.Foreground" Value="White"/>
                                        <Setter Target="ItemText.FontWeight" Value="Bold"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="SelectedPointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="Root.SelectedPointerOverBackground" Value="#FF2979FF"/>
                                        <Setter Target="ItemText.Foreground" Value="White"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </ListViewItemPresenter>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<ListView ItemContainerStyle="{StaticResource CustomListViewItemStyle}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock x:Name="ItemText" Text="{Binding}" FontSize="16"/>
                <TextBlock x:Name="SelectedTag" Text=" [已选中]" Visibility="Collapsed"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
    <!-- 示例数据 -->
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
</ListView>

上述方案无需额外C#代码，仅通过XAML即可完成选中项的样式定制，避免了维护多份DataTemplate的繁琐，同时支持与其他DataTemplateSelector配合使用。

内容的提问来源于stack exchange，提问作者Josh Brunton