ListViewのContentTemplateをオーバーライドして縦型セパレータを追加するにはどうすればよいですか？

Question

アイテムが水平にレンダリングされ、最初のアイテムとすべての後続アイテムの間にセパレータがあるように、WPF ListViewを変更したいと考えています。このようなもの：

私は水平なビットを持っていますが、私は区切り線でつかまっています。私はDataTemplateを使用しようとしましたが、実際の項目にセパレータが組み込まれているので、カーソルを置いたときに強調表示されます（キャリバーを使用していますが、質問に多くの影響を与えるとは思われません）。

<UserControl.Resources> 
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" /> 
</UserControl.Resources> 
<StackPanel Margin="20"> 
    <ListView Name="Items" BorderThickness="0"> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal"> 
        <ContentControl cal:View.Model="{Binding}" /> 
        <Border Name="Separator" Width="2" Margin="5,10" HorizontalAlignment="Center" Background="Red" Visibility="{Binding IsFirst, Converter={StaticResource BooleanToVisibilityConverter}}" /> 
       </StackPanel> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
     <ListView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </ListView.ItemsPanel> 
    </ListView> 
</StackPanel> 

<Border Background="White" BorderBrush="Black" BorderThickness="2"> 

それはDataTemplateをしてどのように見えるか

：spendi後

アイテムは、この境界線を持つ非常に基本的な図であり、テンプレート上に読んで朝ngの、私はControlTemplateのは、闘争の後に私にこのコードを与えたソリューションであると判断しました：

<UserControl.Resources> 
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" /> 
    <Style TargetType="ListViewItem"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ListViewItem"> 
        <StackPanel Margin="10" Orientation="Horizontal"> 
         <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" /> 
         <Border Name="Separator" Width="2" Margin="5,10" HorizontalAlignment="Center" Background="Red" Visibility="{Binding IsFirst, Converter={StaticResource BooleanToVisibilityConverter}}" /> 
        </StackPanel> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</UserControl.Resources> 
<StackPanel> 
    <ListView Name="Items"> 
     <ListView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </ListView.ItemsPanel> 
    </ListView> 
</StackPanel> 

これはほとんど同じに見えますが、今私はいくつかの理由のためのアイテムをハイライト表示することができませんでしだ。おそらく私はトリガーもオーバーライドしていると思って、この答えに基づいてControlTemplate.Triggersエントリを追加しようとしました：Change selection-color of WPF ListViewItem強調表示の動作を元に戻しましたが、成功しませんでした。

私が探している結果を得るにはどうしたらいいですか？この変更を行うための正しい場所はControlTemplateですか？

EDIT：理想的には、xamlだけを使用したソリューションを探しています。

Answer 1

セパレーター

public class MyPanel : StackPanel 
{ 
    static MyPanel() 
    { 
     OrientationProperty.OverrideMetadata(typeof(MyPanel), new FrameworkPropertyMetadata(Orientation.Horizontal)); 
    } 

    protected override void OnRender(DrawingContext dc) 
    { 
     base.OnRender(dc); 
     if (Children.Count >= 2) 
     { 
      var child = Children[0] as FrameworkElement; 
      if (child != null) 
       dc.DrawLine(new Pen(Brushes.Red, 2), new Point(child.ActualWidth + 2, 5), new Point(child.ActualWidth + 2, ActualHeight - 5)); 
     } 
    } 
} 

とカスタムパネルの迅速な試みは、この

<ListView.ItemsPanel> 
    <ItemsPanelTemplate> 
     <local:MyPanel/> 
    </ItemsPanelTemplate> 
</ListView.ItemsPanel> 

現在のパネルは/分離のためのスペースを割り当てるために子供を測定手配しないように、あなたが持っているだろう、それを使用していますそれらの間にマージンがあることを確認します。

Answer 2

ItemTemplateSelectorを使用してください。

ビューモデルを表示することができれば、具体的な方法でもっと多くのことができます。しかし、最初の項目のデータテンプレートは残りの部分とは異なり、必要な区切り文字を含んでいます。アイテムの残りの部分は通常のテンプレートを使用できます。

代わりに、visibilityプロパティをビューモデルのブール値フィールドにデータバインドします。これは最初の項目のみに適用されます。ここで

Answer 3

トリガーを再追加する方法を把握することができました（私の新しいお気に入りのWPFツールWPF Inspectorを使用していないことを確認しました）。 ItemBorder要素が2のパディングが必要であるいくつかの未知の理由

<UserControl.Resources> 
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" /> 
    <Style TargetType="ListViewItem"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ListViewItem"> 
        <StackPanel Orientation="Horizontal"> 
         <Border x:Name="ItemBorder" Padding="2"> 
          <StackPanel> 
           <ContentPresenter /> 
          </StackPanel> 
         </Border> 
         <Border Name="Separator" Width="2" Margin="5,10" HorizontalAlignment="Center" Background="Red" Visibility="{Binding IsFirst, Converter={StaticResource BooleanToVisibilityConverter}}" /> 
        </StackPanel> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsSelected" Value="True"> 
          <Setter TargetName="ItemBorder" Property="Border.Background" Value="Blue" /> 
          <Setter TargetName="ItemBorder" Property="Border.BorderBrush" Value="Green" /> 
         </Trigger> 
         <DataTrigger Binding="{Binding ElementName=ItemBorder, Path=IsMouseOver}" Value="True"> 
          <Setter TargetName="ItemBorder" Property="Border.Background" Value="Yellow" /> 
         </DataTrigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</UserControl.Resources> 
<StackPanel> 
    <ListView Name="Items"> 
     <ListView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </ListView.ItemsPanel> 
    </ListView> 
</StackPanel> 

：それが行われた後、最終的な問題は、セパレータはまた、Iは、内側境界を標的とすることによって固定された第一の要素のイベントの上にマウスをトリガすることでしたさもなければボーダーは見えません。