WPF 圆角边框 ListView 裁剪问题

Question

我有一个带有圆角边框的 ListView。

当您单击 ListVIewItem 时，会出现一个伸出 ListView 的箭头(通过更改边距)。

一开始看起来不错，但是一旦您单击某个项目，第一个和最后一个项目就会突出 ListView 的圆形边框。

为什么会发生这种情况，我该如何解决？

相关代码:

<Window x:Class="WPFJonnyStyle.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" 
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <ResourceDictionary>
        <ControlTemplate x:Key="ArrowedItemsControl" TargetType="{x:Type ItemsControl}">                
            <Border BorderBrush="#FF9DD3ED" BorderThickness="2" CornerRadius="15"  >
                <Grid>
                <Border Name="mask" Background="White" BorderThickness="2" CornerRadius="15"  />
                    <ItemsPresenter>
                        <ItemsPresenter.OpacityMask>
                            <VisualBrush Visual="{Binding ElementName=mask}" />
                        </ItemsPresenter.OpacityMask>
                    </ItemsPresenter>
                </Grid>
            </Border>  
        </ControlTemplate>

        <ControlTemplate x:Key="ArrowedItem" TargetType="ListViewItem">
            <Border BorderThickness="0 0 0 1" BorderBrush="#FF9DD3ED" CornerRadius="15">

                <Grid Background="White" Height="40">

                    <ed:BlockArrow Margin="-22 0 0 0"  x:Name="fancyArrow" Fill="#FF0C8CCB" Visibility="Collapsed"
                                       FlowDirection="RightToLeft" ArrowBodySize="1" 
                                       Height="40" StrokeThickness="2" 
                                       VerticalAlignment="Center"/>

                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              Margin="{TemplateBinding Padding}" 
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              RecognizesAccessKey="True"/>

                </Grid>
            </Border>

            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Background" Value="White"/>
                    <Setter Property="Foreground" Value="Black"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                </Trigger>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="Foreground" Value="White"/>
                    <Setter Property="FontWeight" Value="ExtraBold"/>
                    <Setter Property="ed:BlockArrow.Visibility" TargetName="fancyArrow" Value="Visible"/>                        
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsFocused" Value="False"/>
                        <Condition Property="IsMouseOver" Value="False" />
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" Value="White" />
                    <Setter Property="Foreground" Value="Black"/>
                    <Setter Property="FontWeight" Value="Regular"/>                        
                </MultiTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <Style TargetType="ListViewItem">
            <Setter Property="Template" Value="{DynamicResource ArrowedItem}"/>
        </Style>

    </ResourceDictionary>
</Window.Resources>

<Grid Background="#FFEFEFF2">
    <ListView Width="100" Height="250" Template="{DynamicResource ArrowedItemsControl}" HorizontalContentAlignment="Center">
        <ListViewItem >Car</ListViewItem>
        <ListViewItem >Tractor</ListViewItem>
        <ListViewItem >Train</ListViewItem>
        <ListViewItem >Plane</ListViewItem>
        <ListViewItem >Rocket</ListViewItem>
        <ListViewItem >Helicopter</ListViewItem>
    </ListView>
</Grid>

Answer 1

Download Link

主要问题是 ListViewItem 的白色 Background 在渲染时被应用到 ListView 的 Border 上.因此，将其设置为 Transparent 解决了主要问题，但由于此更改，它还需要一些其他修复，例如 ListViewItem 之间的分隔符 Border 剪辑>的

附件下载项目中与此问题相关的所有内容都在“MainWindow.xaml”中