RadioButton 模板在某些项目上显示额外的行，但不是全部

Question

我尝试创建的模板在某些项目上显示不需要的线条。我不知道为什么。这是控件模板：

<ControlTemplate TargetType="RadioButton" x:Key="SidebarItem">
    <ControlTemplate.Resources>
        <ResourceDictionary>
            <Style TargetType="Border">
                <Setter Property="Margin" Value="0"></Setter>
                <Setter Property="Padding" Value="0"></Setter>
                <Setter Property="BorderThickness" Value="0"></Setter>
                <Setter Property="BorderBrush" Value="#312B57"></Setter>
            </Style>
        </ResourceDictionary>
    </ControlTemplate.Resources>
    <Border Background="#312b57">
        <StackPanel Orientation="Vertical" Margin="25 0 0 0">
            <Border Height="20" x:Name="TopContainer" >
                <Border x:Name="Top" Background="#312B57" Padding="0"></Border>
            </Border>
            <Border x:Name="Middle" CornerRadius="10 0 0 10" Padding="15 8" Width="150" HorizontalAlignment="Right">
                <TextBlock x:Name="TextBlock" Text="{TemplateBinding Content}"></TextBlock>
            </Border>
            <Border Height="20" x:Name="BottomContainer" Padding="0">
                <Border x:Name="Bottom" Background="#312B57" Padding="0" ></Border>
            </Border>
        </StackPanel>
    </Border>

    <ControlTemplate.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter TargetName="Middle" Property="Background" Value="#fff"></Setter>
            <Setter TargetName="TopContainer" Property="Background" Value="#fff"></Setter>
            <Setter TargetName="BottomContainer" Property="Background" Value="#fff"></Setter>
            <Setter TargetName="Top" Property="CornerRadius" Value=" 0 0 25 0"></Setter>
            <Setter TargetName="TextBlock" Property="Foreground" Value="#312B57"></Setter>
            <Setter TargetName="Bottom" Property="CornerRadius" Value="0 25 0 0"></Setter>
        </Trigger>
        <Trigger Property="IsChecked" Value="False">
            <Setter TargetName="TextBlock" Property="Foreground" Value="#fff"></Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

实施：

<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.ItemTemplate>
        <DataTemplate DataType="{x:Type models:SidebarItem}">
            <RadioButton GroupName="Sidebar" Template="{StaticResource SidebarItem}" IsChecked="{Binding IsSelected}" Content="{Binding DisplayName}"></RadioButton>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

以及问题：正确的：

有人能告诉我为什么我在某些列表项上多了一行吗？

Answer 1

这些线条是渲染瑕疵，您可以使用 SnapToDevicePixels:

去除效果

You can set this property to true on your root element to enable pixel snap rendering throughout the UI. For devices operating at greater than 96 dots per inch (dpi), pixel snap rendering can minimize anti-aliasing visual artifacts in the vicinity of single-unit solid lines.

在您的控件模板中的父 Border 元素上将此属性设置为 true，它将应用于所有子元素，因为它是继承的。

[...] only the outermost element in a subtree needs to specify SnapsToDevicePixels as true, and all child elements of that subtree will then report SnapsToDevicePixels as true and will have the SnapsToDevicePixels visual effect.

<Border Background="#312b57" SnapsToDevicePixels="True">
   <StackPanel Orientation="Vertical" Margin="25 0 0 0">
      <Border Height="20" x:Name="TopContainer" >
         <Border x:Name="Top" Background="#312B57" Padding="0"></Border>
      </Border>
      <Border x:Name="Middle" CornerRadius="10 0 0 10" Padding="15 8" Width="150" HorizontalAlignment="Right">
         <TextBlock x:Name="TextBlock" Text="{TemplateBinding Content}"></TextBlock>
      </Border>
      <Border Height="20" x:Name="BottomContainer" Padding="0">
         <Border x:Name="Bottom" Background="#312B57" Padding="0" ></Border>
      </Border>
   </StackPanel>
</Border>

或者，您可以将 UseLayoutRounding 属性设置为 true（建议优于 SnapToDevicePixels），但在这种情况下它仍然会在元素之间留一条线.

RadioButton 模板在某些项目上显示额外的行，但不是全部

RadioButton Template displays extra lines on some items, but not all

wpf

xaml

controltemplate