能否调整WinUI 3 ListViewItemPresenter选择指示器位置并实现水平滚动列表？

1. 将ListViewItemPresenter选择指示器移至顶部 #

可以通过两种方式实现：

方式一：直接设置内置属性 #

WinUI 3的ListViewItemPresenter提供了SelectionIndicatorPlacement属性，直接将其设为Top即可快速调整指示器位置：

<ListViewItem>
    <ListViewItem.Template>
        <ControlTemplate TargetType="ListViewItem">
            <ListViewItemPresenter SelectionIndicatorPlacement="Top"
                                   ContentTransitions="{TemplateBinding ContentTransitions}"
                                   Padding="{TemplateBinding Padding}"
                                   HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                   VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </ControlTemplate>
    </ListViewItem.Template>
    <!-- 自定义内容 -->
</ListViewItem>

方式二：重写ControlTemplate精细控制 #

如果需要调整指示器的尺寸、间距等细节，可完全重写ListViewItem的模板，手动布局选择指示器：

<Style x:Key="TopIndicatorListViewItemStyle" TargetType="ListViewItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <Grid x:Name="Root" Background="{TemplateBinding Background}">
                    <!-- 顶部选择指示器 -->
                    <Rectangle x:Name="SelectionIndicator"
                               Height="4"
                               Width="100"
                               HorizontalAlignment="Center"
                               Fill="{ThemeResource SystemControlHighlightAccentBrush}"
                               Opacity="0"/>
                    <!-- 内容容器（给指示器预留顶部空间） -->
                    <ContentPresenter x:Name="ContentPresenter"
                                      Margin="0,8,0,0"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    <!-- 选择状态视觉控制 -->
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected"/>
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Target="SelectionIndicator.Opacity" Value="1"/>
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="SelectedUnfocused">
                                <VisualState.Setters>
                                    <Setter Target="SelectionIndicator.Opacity" Value="1"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <!-- 按需添加PointerOver、Pressed等其他视觉状态 -->
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用时给ListView的ItemContainerStyle绑定该样式即可。

2. 水平滚动ListView+顶部/底部选择指示器 #

步骤1：配置水平滚动布局 #

修改ListView的ItemsPanel为水平方向的ItemsStackPanel，并开启水平滚动：

<ListView ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Visible">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <!-- 绑定数据或添加列表项 -->
</ListView>

步骤2：适配选择指示器位置 #

• 若需要顶部指示器，直接给上述ListView应用TopIndicatorListViewItemStyle即可。
• 若需要底部指示器，只需调整模板中SelectionIndicator的垂直对齐方式，并修改内容容器的Margin：

<Rectangle x:Name="SelectionIndicator"
           Height="4"
           Width="100"
           HorizontalAlignment="Center"
           VerticalAlignment="Bottom"
           Fill="{ThemeResource SystemControlHighlightAccentBrush}"
           Opacity="0"/>
<ContentPresenter x:Name="ContentPresenter"
                  Margin="0,0,0,8"
                  .../>

复用建议 #

• 将自定义样式存入全局ResourceDictionary（如App.xaml或单独的Styles.xaml），实现跨页面复用。
• 若需动态切换顶部/底部指示器，可通过附加属性封装逻辑，避免重复编写模板代码。

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