UWP中如何修改ListView项间距并自定义选中样式？

问题原因 #

直接给ListViewItem设置负Margin会导致列表项互相重叠，破坏控件的视觉状态布局，使得选中样式的元素被其他项遮挡，最终导致选中效果失效。

解决方案 #

1. 正确调整项间距（规避负Margin的坑） #

不要直接修改ListViewItem的Margin，而是在ItemTemplate内部的容器中调整间距，既缩小了项之间的空隙，又不会破坏ListViewItem本身的布局结构：

<ListView>
    <ListView.ItemTemplate>
        <DataTemplate>
            <!-- 用Border包裹内容，通过负Margin缩小底部间距 -->
            <Border Margin="0,0,0,-25">
                <!-- 这里替换成你的列表项内容 -->
                <TextBlock Text="{Binding}" Padding="10,5"/>
            </Border>
        </DataTemplate>
    </ListView.ItemTemplate>
    <!-- 基于默认样式扩展，避免破坏选中状态 -->
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem" BasedOn="{StaticResource {x:Type ListViewItem}}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

2. 实现自定义底部线条选中样式 #

通过修改ListViewItem的ControlTemplate，添加底部线条元素，并利用触发器控制选中时的显示状态：

<ListView>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem" BasedOn="{StaticResource {x:Type ListViewItem}}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Border x:Name="border" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                            <Grid>
                                <!-- 保留内容展示容器 -->
                                <ContentPresenter x:Name="contentPresenter" 
                                                  Content="{TemplateBinding Content}"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  Padding="{TemplateBinding Padding}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                <!-- 自定义选中线条，默认隐藏 -->
                                <Rectangle x:Name="selectionLine" 
                                           Height="2" 
                                           Fill="#FF0078D7" <!-- 这里可以修改线条颜色 -->
                                           VerticalAlignment="Bottom"
                                           Visibility="Collapsed"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <!-- 选中时显示底部线条 -->
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="selectionLine" Property="Visibility" Value="Visible"/>
                                <Setter TargetName="border" Property="Background" Value="Transparent"/> <!-- 隐藏默认选中背景 -->
                            </Trigger>
                            <!-- 可选：添加鼠标悬停效果 -->
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="Background" Value="#F0F0F0"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Border Margin="0,0,0,-25">
                <TextBlock Text="{Binding}" Padding="10,5"/>
            </Border>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

核心要点 #

• 用ItemTemplate内部容器调整间距，保证ListViewItem的布局区域完整，避免重叠导致选中状态失效。
• 自定义ControlTemplate时保留ContentPresenter确保内容正常显示，通过IsSelected触发器控制底部线条的可见性。
• 基于默认ListViewItem样式扩展，保留控件原有的交互行为（如键盘导航）。

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