WinUI 3中ComboBox与ListView项间间距添加问题求助

要解决项之间的间距（包含Hover效果）问题，不能直接给项内容加Margin——因为Hover效果是作用在Item容器（如ListViewItem、ComboBoxItem）上的，而非内容本身。需要通过修改容器的样式来实现：

1. 修改ItemContainerStyle设置间距 #

通过给容器添加Margin控制项与项的间隔，同时确保Hover效果只在容器的有效区域内显示：

ListView示例 #

<ListView>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <!-- 设置项上下间距 -->
            <Setter Property="Margin" Value="0,4,0,4"/>
            <!-- 调整内容与容器边缘的距离 -->
            <Setter Property="Padding" Value="8"/>
            <!-- 重写模板确保Hover背景适配容器范围 -->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <ListViewItemPresenter
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            SelectionCheckMarkVisualEnabled="True"
                            PointerOverBackground="{ThemeResource ListViewItemPointerOverBackground}"
                            SelectedBackground="{ThemeResource ListViewItemSelectedBackground}"
                            SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackground}"
                            PressedBackground="{ThemeResource ListViewItemPressedBackground}"
                            SelectedPressedBackground="{ThemeResource ListViewItemSelectedPressedBackground}"
                            DisabledOpacity="{ThemeResource ListViewItemDisabledOpacity}"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            ContentMargin="{TemplateBinding Padding}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.ItemContainerStyle>
    <ListViewItem>项1</ListViewItem>
    <ListViewItem>项2</ListViewItem>
</ListView>

ComboBox示例 #

ComboBox的逻辑完全一致，修改ComboBoxItem的容器样式即可：

<ComboBox>
    <ComboBox.ItemContainerStyle>
        <Style TargetType="ComboBoxItem">
            <Setter Property="Margin" Value="0,4,0,4"/>
            <Setter Property="Padding" Value="8"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBoxItem">
                        <ComboBoxItemPresenter
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            PointerOverBackground="{ThemeResource ComboBoxItemPointerOverBackground}"
                            SelectedBackground="{ThemeResource ComboBoxItemSelectedBackground}"
                            SelectedPointerOverBackground="{ThemeResource ComboBoxItemSelectedPointerOverBackground}"
                            PressedBackground="{ThemeResource ComboBoxItemPressedBackground}"
                            SelectedPressedBackground="{ThemeResource ComboBoxItemSelectedPressedBackground}"
                            DisabledOpacity="{ThemeResource ComboBoxItemDisabledOpacity}"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            ContentMargin="{TemplateBinding Padding}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ComboBox.ItemContainerStyle>
    <ComboBoxItem>选项1</ComboBoxItem>
    <ComboBoxItem>选项2</ComboBoxItem>
</ComboBox>

2. 关键说明 #

• 给容器设Margin：直接控制项与项的间隔，此时Hover效果会局限在每个容器范围内，不会跨间距触发。
• 调整Padding：避免内容与容器边缘贴紧，让Hover背景的显示更自然。
• 自定义模板（可选）：如果默认视觉状态的背景不符合需求，可以修改Presenter的背景样式，确保Hover区域与容器的Margin完全匹配。

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