Compartir a través de

Cómo: Crear controles TreeView simples o complejos

  • Artículo

En este ejemplo se muestra cómo crear controles TreeView simples o complejos.

TreeView consta de una jerarquía de controles TreeViewItem, que puede contener cadenas de texto simples y también contenido más complejo, como controles Button o StackPanel con contenido incrustado. Puede definir explícitamente el contenido TreeView o un origen de datos puede proporcionar el contenido. En este tema se proporcionan ejemplos de estos conceptos.

Ejemplo

La propiedad Header de TreeViewItem contiene el contenido que TreeView muestra para ese elemento. TreeViewItem también puede tener controles TreeViewItem como sus elementos secundarios y puede definir estos elementos secundarios mediante la propiedad Items.

En el ejemplo siguiente se muestra cómo definir explícitamente el contenido TreeViewItem estableciendo la propiedad Header en una cadena de texto.

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

En el ejemplo siguiente se muestra cómo definir elementos secundarios de TreeViewItem mediante la definición de Items que son controles Button.

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

En el ejemplo siguiente se muestra cómo crear TreeView donde XmlDataProvider proporciona contenido TreeViewItem y HierarchicalDataTemplate define la apariencia del contenido.

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

En el ejemplo siguiente se muestra cómo crear TreeView donde el contenido TreeViewItem contiene controles DockPanel que tienen contenido incrustado.

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

Vea también