WPF侧边栏导航ListBox圆角设置问题：ListBoxItem溢出背景

你设置ListBox的CornerRadius后仍出现Item内容溢出，核心原因是WPF的Border默认不会裁剪其内部子元素的视觉内容。ListBox的Border只是自身边框显示圆角，但内部ListBoxItem的背景（选中、悬停时的色块）会直接绘制到Border的圆角范围之外，看起来就像是溢出到了背景上。

无需单独处理首尾Item，只需修改ListBox的模板即可解决，以下两种方案任选：

方案1：启用ClipToBounds快速裁剪 #

给ListBox模板中的Border添加ClipToBounds="True"，让内部所有内容强制裁剪到Border的圆角边界：

<Style x:Key="NavigationListBoxStyle" TargetType="{x:Type ListBox}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="SelectedIndex" Value="0"/>
    <Setter Property="Width" Value="Auto"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBox}">
                <Border Background="{TemplateBinding Background}"
                        BorderThickness="0"
                        Padding="0"
                        CornerRadius="5"
                        SnapsToDevicePixels="true"
                        ClipToBounds="True"> <!-- 新增裁剪属性 -->
                    <ScrollViewer Padding="{TemplateBinding Padding}"
                                  Focusable="false">
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

方案2：自定义Clip裁剪区域（更灵活） #

如果担心ClipToBounds会意外裁剪其他需要超出边界的内容（比如Item的阴影），可以用Clip属性创建与圆角完全匹配的裁剪区域：

<Style x:Key="NavigationListBoxStyle" TargetType="{x:Type ListBox}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="SelectedIndex" Value="0"/>
    <Setter Property="Width" Value="Auto"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBox}">
                <Border x:Name="ListBoxBorder"
                        Background="{TemplateBinding Background}"
                        BorderThickness="0"
                        Padding="0"
                        CornerRadius="5"
                        SnapsToDevicePixels="true">
                    <!-- 自定义圆角裁剪区域 -->
                    <Border.Clip>
                        <RectangleGeometry RadiusX="5" RadiusY="5" 
                                           Rect="0,0,{Binding ActualWidth, ElementName=ListBoxBorder},{Binding ActualHeight, ElementName=ListBoxBorder}"/>
                    </Border.Clip>
                    <ScrollViewer Padding="{TemplateBinding Padding}"
                                  Focusable="false">
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这两种方案都无需修改ListBoxItem的样式，完全通过ListBox模板实现圆角裁剪，避免了判断首尾Item的繁琐逻辑。

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