如何將自定義用戶控件放入WPF中的HierarchicalDataTemplate中？

Question

我有一個自定義樹視圖設置，我從另一個項目，我想用作我的樹的節點/節點的UserControl。這是我目前有：

<Window x:Class="Test.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"> 
<Window.Resources> 
    <ResourceDictionary> 
     <ResourceDictionary.MergedDictionaries> 
      <ResourceDictionary Source="GraphStyle.xaml"/> 
     </ResourceDictionary.MergedDictionaries> 

     <XmlDataProvider x:Key="nodes" Source=".\nodes.xml" XPath="Node"/> 

     <HierarchicalDataTemplate DataType="Node" ItemsSource="{Binding XPath=Children/Node}"> 
      <UserControl 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     mc:Ignorable="d" Width="200" Height="60"> 
       <Grid Background="Red" Height="35" VerticalAlignment="Top" Margin="5,0,5,0"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="38*"/> 
         <ColumnDefinition Width="125*"/> 
         <ColumnDefinition Width="37*"/> 
        </Grid.ColumnDefinitions> 
        <TextBox x:Name="textBox" Grid.Column="1" TextWrapping="Wrap" Text="TextBox" TextAlignment="Left" Height="35"/> 
        <Ellipse x:Name="buttonAddQuestionNode" Grid.Column="1" Height="12" Margin="57,45,56,-22" Stroke="Black" VerticalAlignment="Top" Width="12"> 
         <Ellipse.Fill> 
          <ImageBrush ImageSource="/BlogSample;component/Icons/addIcon.png"/> 
         </Ellipse.Fill> 
        </Ellipse> 
        <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="A" TextAlignment="Center" FontSize="25" Height="35"/> 
        <Path Grid.Column="1" Data="M100,35 L100,45" Fill="#FFF4F4F5" Height="11" Margin="62,0,62,-11" Stretch="Fill" Stroke="Black" VerticalAlignment="Bottom"/> 
       </Grid> 
      </UserControl> 

     </HierarchicalDataTemplate> 

    </ResourceDictionary> 
</Window.Resources> 

<TreeView ItemContainerStyle="{StaticResource GraphStyle}" 
      ItemsSource="{Binding Source={StaticResource nodes}}"/> 
</Window> 

HierarchicalDataTemplate下的部分是我把我的usercontrol作爲節點。我的問題是有一種方法來簡單地引用usercontrol而不是像這樣的代碼？還是有更好的方法來做到這一點我不知道？

Answer 1

起初，您應該在您的項目中創建您的UserControl.xaml。例如，您可以創建這樣的用戶控件：

<UserControl x:Class="WpfApplication1.SomeUserControl" 
      <!--The code omitted for the brevity--> 
      <!--Your code of your UserControl from the MainWindow--> 
    > 
    <Grid Background="Red" Height="35" VerticalAlignment="Top" Margin="5,0,5,0"> 
     <!--The code omitted for the brevity--> 
    </Grid> 
</UserControl> 

然後在你的窗口，在這裏HierarchicalDataTemplate位於你應該短名寫信給你的命名空間具有您的用戶控件。例如，我的項目被稱爲 「WPFApplication1」 和namespve短的名字將出現「本地」：

<Window x:Class="WpfApplication1.MainWindow"   
    xmlns:local="clr-namespace:WpfApplication1" 
    <!--The code omitted for the brevity--> 
    Title="MainWindow" Height="350" Width="525"> 
<Window.Resources> 
    <ResourceDictionary> 
     <ResourceDictionary.MergedDictionaries> 
     <ResourceDictionary Source="GraphStyle.xaml"/> 
    </ResourceDictionary.MergedDictionaries> 

    <XmlDataProvider x:Key="nodes" Source=".\nodes.xml" XPath="Node"/> 
     <HierarchicalDataTemplate x:Key="aaa">     
      <localUC:SomeUserControl/> 
     </HierarchicalDataTemplate>   
    </ResourceDictionary> 
</Window.Resources> 

更新： 是不是好適合你？

<TreeView> 
     <TreeView.Resources> 
      <Style TargetType="TreeViewItem"> 
       <Setter Property="HeaderTemplate"> 
        <Setter.Value> 
         <DataTemplate> 
          <local:SomeUserControl/> 
         </DataTemplate> 
        </Setter.Value> 
       </Setter> 
       <Setter Property="ItemsSource" Value="{Binding ItemsSource}"/> 
       <Setter Property="IsExpanded" Value="True"/> 
      </Style> 
     </TreeView.Resources> 
     <TreeViewItem Header="1"> 
      <TreeViewItem Header="21"> 
       <TreeViewItem Header="31"> 
        <TreeViewItem Header="41"> 
         <TreeViewItem Header="51"> 
          <TreeViewItem Header="61"> 
           <TreeViewItem Header="71"> 

           </TreeViewItem> 
          </TreeViewItem> 
         </TreeViewItem> 
        </TreeViewItem> 
       </TreeViewItem> 
      </TreeViewItem> 
     </TreeViewItem> 

    </TreeView>