WPF RadioButton自定义模板部分列表项出现多余线条问题求助

Hey, let's dig into this issue you're having with extra lines showing up on some of your RadioButton sidebar items. Looking at your template and implementation code, there are a few likely culprits here, along with fixes you can try right away:

What's causing the extra lines? #

• Redundant nested Borders: Your template wraps Top and Bottom Borders inside TopContainer and BottomContainer. When the IsChecked state flips, the background colors of these nested elements don't perfectly align with their parent containers—this creates tiny gaps that look like extra lines, especially on higher-DPI screens.
• Pixel alignment issues: WPF doesn't always snap elements to device pixels by default. If your elements are positioned halfway between pixels, you'll get blurry, ghost-like lines that appear as "extra" artifacts.
• Uncleared default styles: RadioButtons and ItemsControl containers have built-in margins/padding that might be leaking through, even with your custom template.

Fixes to try #

1. Simplify the template structure (remove nested Borders)

The nested Borders are unnecessary and are causing alignment gaps. Let's flatten the template to use just the container Borders for the rounded corners:

<ControlTemplate TargetType="RadioButton" x:Key="SidebarItem">
    <ControlTemplate.Resources>
        <ResourceDictionary>
            <Style TargetType="Border">
                <Setter Property="Margin" Value="0"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="BorderBrush"="#312B57"/>
                <Setter Property="SnapsToDevicePixels" Value="True"/> <!-- Force pixel alignment -->
            </Style>
        </ResourceDictionary>
    </ControlTemplate.Resources>
    <Border Background="#312b57" SnapsToDevicePixels="True">
        <StackPanel Orientation="Vertical" Margin="25 0 0 0">
            <!-- Use TopContainer directly, no inner Border -->
            <Border Height="20" x:Name="TopContainer" Background="#312B57" CornerRadius="0"/>
            <Border x:Name="Middle" CornerRadius="10 0 0 10" Padding="15 8" Width="150" HorizontalAlignment="Right" Background="#312B57">
                <TextBlock x:Name="TextBlock" Text="{TemplateBinding Content}" Foreground="#fff"/>
            </Border>
            <!-- Use BottomContainer directly, no inner Border -->
            <Border Height="20" x:Name="BottomContainer" Background="#312B57" CornerRadius="0"/>
        </StackPanel>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter TargetName="Middle" Property="Background" Value="#fff"/>
            <Setter TargetName="TopContainer" Property="Background" Value="#fff"/>
            <Setter TargetName="BottomContainer" Property="Background" Value="#fff"/>
            <Setter TargetName="TopContainer" Property="CornerRadius" Value="0 0 25 0"/>
            <Setter TargetName="TextBlock" Property="Foreground" Value="#312B57"/>
            <Setter TargetName="BottomContainer" Property="CornerRadius" Value="0 25 0 0"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

2. Clear gaps between ItemsControl items

ItemsControl's default ContentPresenter containers might have hidden margins. Add an ItemContainerStyle to wipe those out:

<ItemsControl x:Name="Sidebar" Background="Transparent" BorderThickness="0" Margin="0 25" BorderBrush="Transparent" Padding="0 10 0 0" ItemsSource="{x:Static viewModels:SidebarContent.Items}">
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="{x:Type models:SidebarItem}">
            <RadioButton GroupName="Sidebar" Template="{StaticResource SidebarItem}" IsChecked="{Binding IsSelected}" Content="{Binding DisplayName}" 
                         Margin="0" Padding="0" BorderThickness="0"/> <!-- Clear RadioButton's default padding -->
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

3. Force pixel snapping

Adding SnapsToDevicePixels="True" to all relevant elements ensures they align perfectly with screen pixels, eliminating blurry lines that look like extra artifacts. You'll see this added in both the template and ItemContainerStyle above.

Quick validation steps #

1. Start with simplifying the template—removing those nested Borders is the most likely fix for the random extra lines.
2. If lines still appear, double-check that SnapsToDevicePixels is enabled everywhere.
3. Finally, confirm that no default margins/padding are leaking from the RadioButton or ItemsControl containers.

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