HierarchicalDataTemplate中的DataTemplate

Question

我需要構建一個自定義treeview作爲用戶控件。我把它叫做爲例子TreeViewEx的緣故：

<UserControl x:Class="WpfApplication4.TreeViewEx" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      x:Name="root"> 
    <Grid> 
     <TreeView ItemsSource="{Binding Path=ItemsSource, ElementName=root}"> 
      <TreeView.ItemTemplate> 
       <HierarchicalDataTemplate ItemsSource="{Binding Children}"> 
        <StackPanel Orientation="Horizontal"> 
         <TextBlock Text="Node : "/> 
         <ContentControl Content="{Binding Path=AdditionalContent, ElementName=root}"/> 
        </StackPanel> 
       </HierarchicalDataTemplate> 
      </TreeView.ItemTemplate> 
     </TreeView> 
    </Grid> 
</UserControl> 

的想法是有ItemTemplate中的內容和它的可定製部分的固定部分。

當然，我創建的TreeViewEx類兩個依賴屬性：

public partial class TreeViewEx 
{ 
    public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register(
     "ItemsSource", typeof(IEnumerable), typeof(TreeViewEx)); 

    public IEnumerable ItemsSource 
    { 
     get { return (IEnumerable)GetValue(ItemsSourceProperty); } 
     set { SetValue(ItemsSourceProperty, value); } 
    } 

    public static readonly DependencyProperty AdditionalContentProperty = DependencyProperty.Register(
     "AdditionalContent", typeof(object), typeof(TreeViewEx)); 

    public object AdditionalContent 
    { 
     get { return GetValue(AdditionalContentProperty); } 
     set { SetValue(AdditionalContentProperty, value); } 
    } 

    public TreeViewEx() 
    { 
     InitializeComponent(); 
    } 
} 

有一個簡單的節點類，像這樣：

public class Node 
{ 
    public string Name { get; set; } 
    public int Size { get; set; } 
    public IEnumerable<Node> Children { get; set; } 
} 

我會喂樹視圖。我把TreeViewEx的實例在WPF測試項目的主窗口：

<Window x:Class="WpfApplication4.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525" 
     xmlns:local="clr-namespace:WpfApplication4"> 
    <Grid> 
     <local:TreeViewEx x:Name="tree"> 
      <local:TreeViewEx.AdditionalContent> 
       <TextBlock Text="{Binding Name}"/> 
      </local:TreeViewEx.AdditionalContent> 
     </local:TreeViewEx> 
    </Grid> 
</Window> 

最後給它：

public partial class MainWindow 
{ 
    public MainWindow() 
    { 
     InitializeComponent(); 

     var dummyData = new ObservableCollection<Node> 
     { 
      new Node 
      { 
       Name = "Root", 
       Size = 3, 
       Children = new ObservableCollection<Node> 
       { 
        new Node{ 
         Name="Child1", 
         Size=2, 
         Children = new ObservableCollection<Node>{ 
          new Node{ 
           Name = "Subchild", 
           Size = 1 
          } 

         } 
        } 

       } 
      } 
     }; 

     tree.ItemsSource = dummyData; 
    } 
} 

然而，它作爲第一個即預期ContentControl中有數據不起作用但是當我展開節點時，它不顯示ContentControl的內容。

我真的不明白..我應該使用DataTemplate還是其他？

Answer 1

問題是您將內容設置爲控件的實例，並且該控件只能有一個父級。當您展開樹並將其添加到第二個節點時，它會將其從第一個節點中刪除。

正如你懷疑的那樣，你想爲TreeViewEx提供一個DataTemplate而不是一個控件。您可以使用ContentPresenter在樹的每個級別來實例化模板：

public static readonly DependencyProperty AdditionalContentTemplateProperty = DependencyProperty.Register(
    "AdditionalContentTemplate", typeof(DataTemplate), typeof(TreeViewEx)); 

public DataTemplate AdditionalContentTemplate 
{ 
    get { return (DataTemplate)GetValue(AdditionalContentTemplateProperty); } 
    set { SetValue(AdditionalContentTemplateProperty, value); } 
} 

改變你UserControl的XAML的HierarchicalDataTemplate到：

與更換AdditionalContentProperty

<StackPanel Orientation="Horizontal"> 
    <TextBlock Text="Node : "/> 
    <ContentPresenter ContentTemplate="{Binding Path=AdditionalContentTemplate, ElementName=root}"/> 
</StackPanel> 

和變化主窗口到：

<local:TreeViewEx x:Name="tree"> 
    <local:TreeViewEx.AdditionalContentTemplate> 
     <DataTemplate> 
      <TextBlock Text="{Binding Name}"/> 
     </DataTemplate> 
    </local:TreeViewEx.AdditionalContentTemplate> 
</local:TreeViewEx>