如何:创建简单或复杂的 TreeView
此示例演示如何创建简单或复杂的 TreeView 控件。
TreeView 包含 TreeViewItem 控件的层次结构,这些控件可以包含简单的文本字符串和更复杂的内容,例如 Button 控件或具有嵌入内容的 StackPanel。 可以显式定义 TreeView 内容,或者数据源可以提供内容。 本主题提供这些概念的示例。
例
TreeViewItem 的 Header 属性包含 TreeView 为该项显示的内容。 TreeViewItem 还可以将 TreeViewItem 控件作为其子元素,并且可以使用 Items 属性定义这些子元素。
以下示例演示如何通过将 Header 属性设置为文本字符串来显式定义 TreeViewItem 内容。
<TreeView>
<TreeViewItem Header="Employee1">
<TreeViewItem Header="Jesper"/>
<TreeViewItem Header="Aaberg"/>
<TreeViewItem Header="12345"/>
</TreeViewItem>
<TreeViewItem Header="Employee2">
<TreeViewItem Header="Dominik"/>
<TreeViewItem Header="Paiha"/>
<TreeViewItem Header="98765"/>
</TreeViewItem>
</TreeView>
以下示例展示了如何通过定义作为 Button 控件的 Items 来定义 TreeViewItem 的子元素。
<TreeView>
<TreeViewItem Header ="Employee1">
<TreeViewItem.Items>
<Button>Jesper</Button>
<Button>Aaberg</Button>
<Button>12345</Button>
</TreeViewItem.Items>
</TreeViewItem>
<TreeViewItem Header="Employee2">
<TreeViewItem.Items>
<Button>Dominik</Button>
<Button>Paiha</Button>
<Button>98765</Button>
</TreeViewItem.Items>
</TreeViewItem>
</TreeView>
以下示例演示如何创建一个 TreeView,其中 XmlDataProvider 提供 TreeViewItem 内容,HierarchicalDataTemplate 定义内容的外观。
<XmlDataProvider x:Key="myEmployeeData" XPath="/EmployeeData">
<x:XData>
<EmployeeData xmlns="">
<EmployeeInfo>
<EmployeeInfoData>Employee1</EmployeeInfoData>
<Item Type="FirstName">Jesper</Item>
<Item Type="LastName">Aaberg</Item>
<Item Type="EmployeeNumber">12345</Item>
</EmployeeInfo>
<EmployeeInfo>
<EmployeeInfoData>Employee2</EmployeeInfoData>
<Item Type="FirstName">Dominik</Item>
<Item Type="LastName">Paiha</Item>
<Item Type="EmployeeNumber">98765</Item>
</EmployeeInfo>
</EmployeeData>
</x:XData>
</XmlDataProvider>
<HierarchicalDataTemplate DataType="EmployeeInfo"
ItemsSource ="{Binding XPath=Item}">
<TextBlock Text="{Binding XPath=EmployeeInfoData}" />
</HierarchicalDataTemplate>
<TreeView ItemsSource="{Binding Source={StaticResource myEmployeeData},
XPath=EmployeeInfo}"/>
以下示例演示如何创建一个 TreeViewItem 内容包含带有嵌入内容的 DockPanel 控件的 TreeView。
<TreeView>
<TreeViewItem Header="Animals">
<TreeViewItem.Items>
<DockPanel>
<Image Source="data\fish.png"/>
<TextBlock Margin="5" Foreground="Brown"
FontSize="12">Fish</TextBlock>
</DockPanel>
<DockPanel>
<Image Source="data\dog.png"/>
<TextBlock Margin="5" Foreground="Brown"
FontSize="12">Dog</TextBlock>
</DockPanel>
<DockPanel>
<Image Source="data\cat.png"/>
<TextBlock Margin="5" Foreground="Brown"
FontSize="12">Cat</TextBlock>
</DockPanel>
</TreeViewItem.Items>
</TreeViewItem>
</TreeView>