2013-05-26 5 views
3

У меня есть ListView с закругленной рамкой.WPF Rounded Border ListView обрезка Выпуск

Когда вы нажимаете на ListVIewItem, появляется стрелка, которая торчит из ListView (путем изменения поля).

Сначала он выглядит хорошо, но как только вы нажимаете элемент, первый и последний пункты торчат из закругленной границы ListView.

Почему это происходит и как его решить?

Unselected

Selected

Соответствующий код:

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

+0

Hove вы подумали о том, как он должен выглядеть, когда выбран первый элемент, я бы очень рекомендовал не использовать такой тип меню. –

+0

Это выглядит великолепно, и это требование, которое мы должны выполнить, поэтому у нас нет выбора. –

+0

Если у кого-то возникают проблемы с воссозданием этого в XamlPad или Kaxaml, замените стрелку прямоугольником - это будет иметь тот же эффект. –

ответ

3

Download Link

Главный вопрос был ListViewItem «s White Background применяется к ListViewBorder при рендеринге. Следовательно, установив, что Transparent адреса главный вопрос, но необходимы также несколько других исправлений из-за этого изменения, такие как сепаратор Border вырезку между ListViewItem «s

Все, что связано с этим вопросом в приложенном загрузки проекта в«MainWindow .xaml "

+0

Спасибо большое :) –

+1

Спасибо Viv! Проще чем я, хотя :) –

+0

Ваш прием :) – Viv