Gewusst wie: Erstellen einfacher und komplexer TreeViews
Aktualisiert: November 2007
In diesem Beispiel wird das Erstellen von einfachen und komplexen TreeView-Steuerelementen dargestellt.
Ein TreeView setzt sich aus einer Hierarchie von TreeViewItem-Steuerelementen zusammen, die einfache Textzeichenfolgen oder komplexeren Inhalt enthalten können, z. B. Button-Steuerelemente oder ein StackPanel mit eingebettetem Inhalt. Sie können den TreeView-Inhalt explizit definieren, oder der Inhalt kann von einer Datenquelle bereitgestellt werden. In diesem Thema finden Sie Beispiele für diese Konzepte.
Beispiel
Die Header-Eigenschaft des TreeViewItem enthält den Inhalt, der im TreeView für dieses Element angezeigt wird. Ein TreeViewItem kann auch über TreeViewItem-Steuerelemente als untergeordnete Elemente verfügen. Sie können diese untergeordneten Elemente mithilfe der Items-Eigenschaft definieren.
Im folgenden Beispiel wird das explizite Definieren des TreeViewItem-Inhalts durch Festlegen der Header-Eigenschaft auf eine Zeichenfolge dargestellt.
<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>
Im folgenden Beispiel wird das Definieren von untergeordneten Elementen eines TreeViewItem durch Definieren von Items dargestellt, bei denen es sich um Button-Steuerelemente handelt.
<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>
Im folgenden Beispiel wird dargestellt, wie Sie ein TreeView erstellen, in dem ein XmlDataProvider den TreeViewItem-Inhalt bereitstellt und eine HierarchicalDataTemplate die Darstellung des Inhalts definiert.
<XmlDataProvider x:Key="myEmployeeData" XPath="/EmployeeData">
<x:XData>
<EmployeeData >
<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}"/>
Im folgenden Beispiel wird dargestellt, wie Sie ein TreeView erstellen, in dem der TreeViewItem-Inhalt DockPanel-Steuerelemente mit eingebettetem Inhalt enthält.
<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>