3

我有ListView一个圆形边框。

当您单击 a时，会出现一个从（通过更改边距） 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>

4

1 回答 1

3

下载链接

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

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

于 2013-06-06T12:28:15.300 回答