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>