如何覆蓋ListView的ContentTemplate以添加垂直分隔符？

我正在尋找修改WPF ListView，以便項目水平呈現，並且第一個項目和所有後續項目之間有一個分隔符。像這樣：如何覆蓋ListView的ContentTemplate以添加垂直分隔符？

我已經得到了水平位，但我堅持使用分隔符。我嘗試使用DataTemplate，但這將分隔符合併到實際項目中，這意味着當我懸停時它會突出顯示（注意我使用Caliburn，但我不認爲它會影響很多問題）：

<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後納克早上模板上讀了，我決定一個控件模板是其經過鬥爭給了我這個代碼的解決方案：

<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是進行此更改的正確位置？

編輯：理想情況下，我正在尋找一個解決方案，只使用xaml。

來源

2017-08-02 Jamey

該分隔符相對於「ListViewItem」本身而言不是容器的一部分。您現在正在使用水平「StackPanel」，試着編寫自己的'HorizontalPanelWithSeparator'。 – Sinatr

我會放棄它，謝謝。 – Jamey

下面是自定義面板的快速嘗試與分離

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>

目前面板不安排/測量孩子要分配給分隔空間，你將有以確保它們之間存在差距。

來源

2017-08-02 14:12:22 Sinatr

感謝你們，我利用一點點的邊緣擺弄手段，就能夠產生我想要的行爲。理想情況下，我正在尋找一種僅適用於xaml的解決方案，因此我將打開問題並繼續試驗，但如果沒有其他問題出現，我會接受此解決方案。 – Jamey

使用ItemTemplateSelector來實現這一點。

如果您可以展示您的視圖模型，我可以更具體地幫助您。但是第一個項目的數據模板與其他項目不同，幷包含您想要的分隔符。其餘的項目可以使用正常的模板。

作爲替代方案，將可見性屬性數據綁定到視圖模型中的布爾字段，該屬性僅適用於第一項。

來源

2017-08-02 13:54:04

嗨Tanveer，謝謝你的回答，不幸的是能見度不是我的問題。當我將鼠標懸停在第一項上時（我可以在第二張圖中看到），我很難讓分隔符不包含在高亮框中。至於ViewModels，ItemViewModel只具有一個布爾IsFirst屬性，ItemsViewModel只包含一個List 屬性，我在構造函數中初始化了3個項目（傳遞給第一個和false到第二個）。 – Jamey

我設法弄清楚如何重新添加觸發器（我確認使用我最喜歡的WPF工具WPF Inspector缺失）。一旦已完成的最後一個問題是，隔膜還觸發一個鼠標事件我固定通過靶向內邊界的第一個元素：

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

對於一些未知的原因的ItemBorder元件需要的2的填充否則無法看到邊界。

來源

2017-08-02 15:52:41 Jamey

如何覆蓋ListView的ContentTemplate以添加垂直分隔符？

回答

相關問題