WinUI3：如何修改ItemsView选中项样式、移除多余线条及自定义容器？

1. 移除选中项的多余细线 #

你看到的选中项右侧和底部细线是ItemsView ItemContainer的默认选中视觉残留。要彻底移除，需重写ItemContainerStyle，覆盖默认的选中状态样式：

<ItemsView>
    <ItemsView.ItemContainerStyle>
        <Style TargetType="ItemContainer">
            <Setter Property="CornerRadius" Value="15"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ItemContainer">
                        <Grid>
                            <!-- 保留你原有的布局结构 -->
                            <Border x:Name="CategoryBorder" IsTabStop="False" 
                                    BorderThickness="8" CornerRadius="15" 
                                    BorderBrush="Transparent" 
                                    Background="{Binding BackgroundColor}">
                                <StackPanel IsTabStop="False" Orientation="Vertical" 
                                            Margin="12,10,0,0" VerticalAlignment="Top" 
                                            HorizontalAlignment="Left">
                                    <TextBlock Name="CategoryName" Text="{Binding Name}" 
                                               TextWrapping="WrapWholeWords" FontWeight="SemiBold" 
                                               Margin="0,0,10,10" FontSize="16" MaxLines="2"/>
                                </StackPanel>
                            </Border>
                            <!-- 通过视觉状态覆盖默认选中效果 -->
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <!-- 清空默认选中的高亮边框，只保留自定义样式 -->
                                        <VisualState.Setters>
                                            <Setter Target="CategoryBorder.BorderBrush" Value="Transparent"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ItemsView.ItemContainerStyle>
</ItemsView>

2. 自定义悬停与选中样式 #

完全可以根据需求修改ItemContainer的样式，通过VisualState控制不同状态的UI表现：

• 悬停状态（PointerOver）：在CommonStates的PointerOver视觉状态中，设置悬停时的背景、边框样式，比如修改背景色为浅灰：

  <VisualState x:Name="PointerOver">
      <VisualState.Setters>
          <Setter Target="CategoryBorder.Background" Value="#F5F5F5"/>
      </VisualState.Setters>
  </VisualState>
  

• 选中状态（Selected）：在SelectionStates的Selected视觉状态中，自定义选中时的专属样式，比如替换背景色和边框颜色：

  <VisualState x:Name="Selected">
      <VisualState.Setters>
          <Setter Target="CategoryBorder.Background" Value="#E3F2FD"/>
          <Setter Target="CategoryBorder.BorderBrush" Value="#2196F3"/>
      </VisualState.Setters>
  </VisualState>
  

关键提示 #

不要直接在ItemContainer标签内嵌套布局，而是通过ItemContainerStyle的ControlTemplate定义结构，这样才能完全接管所有状态的样式渲染，避免默认系统样式干扰。

内容的提问来源于stack exchange，提问作者Bevara Satyasairam