WPF Rounded Border ListView clipping Issue

问题

I have a ListView with a rounded border.

When you click on a ListVIewItem, an arrow that sticks out of the ListView (by changing the margin) appears.

It looks good at first, but once you click an item, the first and last items stick out of the ListView's rounded border.

Why is this happening and how do I resolve it?

Relevant Code:

<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>

回答1:

Download Link

Main Issue was the ListViewItem's White Background getting applied over the ListView's Border while rendering. Hence setting that to Transparent addresses the main issue but it also needed a few other fixes because of this change such as the separator Border clipping between the ListViewItem's

Everything related to this issue in the attached download project is in "MainWindow.xaml"

来源：https://stackoverflow.com/questions/16757296/wpf-rounded-border-listview-clipping-issue