Cómo: Crear controles TreeView simples o complejos

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

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

Ejemplo

La propiedad Header de TreeViewItem incluye el contenido que TreeView muestra para ese elemento. TreeViewItem también puede tener controles TreeViewItem como 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 de 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 los elementos secundarios de TreeViewItem definiendo propiedades 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 un control TreeView en el que XmlDataProvider proporciona el contenido de TreeViewItem y HierarchicalDataTemplate define la apariencia del contenido.

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

En el ejemplo siguiente se muestra cómo crear un control TreeView en el que el contenido de TreeViewItem incluye controles DockPanel con 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

Referencia

TreeView

TreeViewItem

Conceptos

Introducción a TreeView

Otros recursos

Temas "Cómo..." sobre el control TreeView