Introducción a TreeView

  • Artículo

El control TreeView proporciona una manera de mostrar información en una estructura jerárquica utilizando nodos que se pueden contraer. En este tema se presentan los controles TreeView y TreeViewItem, y se ofrecen ejemplos sencillos de su uso.

¿Qué es TreeView?

TreeView es un ItemsControl que anida los elementos mediante controles TreeViewItem. En el ejemplo siguiente se crea un objeto TreeView.

<TreeView Name="myTreeViewEvent" >
  <TreeViewItem Header="Employee1" IsSelected="True">
    <TreeViewItem Header="Jesper Aaberg"/>
    <TreeViewItem Header="Employee Number">
      <TreeViewItem Header="12345"/>
    </TreeViewItem>
    <TreeViewItem Header="Work Days">
      <TreeViewItem Header="Monday"/>
      <TreeViewItem Header="Tuesday"/>
      <TreeViewItem Header="Thursday"/>
    </TreeViewItem>
  </TreeViewItem>
  <TreeViewItem Header="Employee2">
    <TreeViewItem Header="Dominik Paiha"/>
    <TreeViewItem Header="Employee Number">
      <TreeViewItem Header="98765"/>
    </TreeViewItem>
    <TreeViewItem Header="Work Days">
      <TreeViewItem Header="Tuesday"/>
      <TreeViewItem Header="Wednesday"/>
      <TreeViewItem Header="Friday"/>
    </TreeViewItem>
  </TreeViewItem>
</TreeView>

Creación de un control TreeView

El control TreeView contiene una jerarquía de controles TreeViewItem. Un control TreeViewItem es un HeaderedItemsControl que tiene un Header y una colección Items.

Si va a definir un TreeView mediante el lenguaje XAML, puede definir explícitamente el contenido Header de un control TreeViewItem y los elementos que componen su colección. La ilustración anterior muestra este método.

También puede especificar un ItemsSource como un origen de datos y, a continuación, especificar HeaderTemplate y ItemTemplate para definir el contenido TreeViewItem.

Para definir el diseño de un control TreeViewItem, también puede usar objetos HierarchicalDataTemplate. Para obtener más información y un ejemplo, vea Usar SelectedValue, SelectedValuePath y SelectedItem.

Si un elemento no es un control TreeViewItem, se incluye automáticamente en un control TreeViewItem cuando se muestra el control TreeView.

Expandir y contraer un control TreeViewItem

Si el usuario expande TreeViewItem, la propiedad IsExpanded se establece en true. También puede expandir o contraer un TreeViewItem sin ninguna acción directa por parte del usuario; para ello, establezca la propiedad IsExpanded en true (expandir) o en false (contraer). Cuando esta propiedad cambia, se produce un evento Expanded o Collapsed.

Cuando se llama al método BringIntoView en un control TreeViewItem, TreeViewItem y sus controles TreeViewItem primarios se expanden. Si TreeViewItem no es visible o es parcialmente visible, TreeView se desplaza para hacerlo visible.

Selección de TreeViewItem

Cuando un usuario hace clic en un control TreeViewItem para seleccionarlo, se produce el evento Selected y su propiedad IsSelected se establece en true. Además, el TreeViewItem se convierte en el SelectedItem del control TreeView. Por el contrario, cuando la selección cambia desde un control TreeViewItem, se produce su evento Unselected y su propiedad IsSelected se establece en false.

La propiedad SelectedItem del control TreeView es una propiedad de solo lectura; por ello, no puede establecerla explícitamente. La propiedad SelectedItem se establece si el usuario hace clic en un control TreeViewItem o si la propiedad IsSelected se establece en true en el control TreeViewItem.

Use la propiedad SelectedValuePath para especificar un SelectedValue de un SelectedItem. Para obtener más información, vea Usar SelectedValue, SelectedValuePath y SelectedItem.

Puede registrar un controlador de eventos en el evento SelectedItemChanged para determinar cuándo cambia un TreeViewItem seleccionado. El RoutedPropertyChangedEventArgs<T> que se proporciona al controlador de eventos especifica el OldValue, que es la selección anterior, y el NewValue, que es la selección actual. Cualquiera de los valores puede ser null si la aplicación o el usuario no han realizado una selección anterior o actual.

Estilo de TreeView

El estilo predeterminado de un control TreeView lo coloca dentro de un objeto StackPanel que contiene un control ScrollViewer. Al establecer las propiedades Width y Height de TreeView, estos valores se usan para ajustar el tamaño del objeto StackPanel que muestra TreeView. Si el contenido que se va a mostrar es más grande que el área de visualización, se muestra un ScrollViewer automáticamente para que el usuario pueda desplazarse por el contenido de TreeView.

Para personalizar la apariencia de un control TreeViewItem, establezca la propiedad Style en un Style personalizado.

En el ejemplo siguiente se muestra cómo establecer los valores de propiedad Foreground y FontSize para un control TreeViewItem mediante Style.

<Style TargetType="{x:Type TreeViewItem}">
  <Setter Property="Foreground" Value="Blue"/>
  <Setter Property="FontSize" Value="12"/>
</Style>

Agregar imágenes y otro contenido a elementos TreeView

Puede incluir más de un objeto en el contenido de Header de un TreeViewItem. Para incluir varios objetos en el contenido de Header, incluya los objetos en un control de diseño, como Panel o StackPanel.

En el ejemplo siguiente se muestra cómo definir el Header de TreeViewItem como CheckBox y TextBlock, ambos incluidos en un control DockPanel.

<TreeViewItem>
  <TreeViewItem.Header>
    <DockPanel>
      <CheckBox/>
      <TextBlock>
        TreeViewItem Text
      </TextBlock>
    </DockPanel>
  </TreeViewItem.Header>
</TreeViewItem>

En el ejemplo siguiente se muestra cómo definir un DataTemplate que contiene un Image y un TextBlock, incluidos en un control DockPanel. Puede usar DataTemplate para establecer HeaderTemplate o ItemTemplate para establecer TreeViewItem.

<DataTemplate x:Key="NewspaperTVItem">
  <DockPanel>
    <Image Source="images\icon.jpg"/>
    <TextBlock VerticalAlignment="center" Text ="{Binding Path=Name}"/>
  </DockPanel>
</DataTemplate>

Vea también