Freigeben über

Anleitung: Erstellen einfacher oder komplexer TreeViews

In diesem Beispiel wird gezeigt, wie einfache oder komplexe TreeView Steuerelemente erstellt werden.

Ein TreeView besteht aus einer Hierarchie von TreeViewItem Steuerelementen, die einfache Textzeichenfolgen und auch komplexere Inhalte enthalten können, z. B. Button Steuerelemente oder ein StackPanel mit eingebettetem Inhalt. Sie können den TreeView Inhalt explizit definieren oder eine Datenquelle den Inhalt bereitstellen. Dieses Thema enthält Beispiele für diese Konzepte.

Beispiel

Die Header-Eigenschaft von TreeViewItem enthält den Inhalt, den TreeView für dieses Element anzeigt. Ein TreeViewItem kann auch untergeordnete Elemente wie TreeViewItem haben, und Sie können diese untergeordneten Elemente mithilfe der Eigenschaft Items definieren.

Das folgende Beispiel zeigt, wie Inhalte von TreeViewItem explizit definiert werden, indem die Eigenschaft Header auf eine Textzeichenfolge festgelegt wird.

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

Das folgende Beispiel zeigt, wie untergeordnete Elemente eines TreeViewItem durch die Definition von Items als Button-Steuerelemente erstellt werden.

<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 gezeigt, wie ein TreeView erstellt wird, bei dem ein XmlDataProviderTreeViewItem Inhalte bereitstellt und ein HierarchicalDataTemplate die Darstellung des Inhalts definiert.

<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}"/>

Das folgende Beispiel zeigt, wie Sie eine TreeView Stelle erstellen, an der der Inhalt Steuerelemente enthältTreeViewItem, die DockPanel eingebetteten Inhalt aufweisen.

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

Siehe auch