Compartir a través de

Información general sobre TreeView

El TreeView control proporciona una manera de mostrar información en una estructura jerárquica mediante nodos contraíbles. En este tema se presentan los TreeView controles y TreeViewItem y se proporcionan ejemplos sencillos de su uso.

¿Qué es treeView?

TreeView es un ItemsControl que anida los elementos mediante TreeViewItem controles. En el ejemplo siguiente se crea un 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 una vista de árbol

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

Si vas a definir un TreeView mediante el lenguaje de marcado de aplicación extensible (XAML), puedes definir explícitamente el Header contenido de un TreeViewItem control y los elementos que componen su colección. En la ilustración anterior se muestra este método.

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

Para definir la disposición de un TreeViewItem control, también puede utilizar HierarchicalDataTemplate objetos. Para obtener más información y un ejemplo, vea Usar SelectedValue, SelectedValuePath y SelectedItem.

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

Expandir y contraer un TreeViewItem

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

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

Selección de Elemento de Vista de Árbol

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

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

Use la SelectedValuePath propiedad 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> proporcionado al controlador de eventos especifica OldValue, que es la selección anterior, y 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 vista de árbol

El estilo predeterminado de un TreeView control lo coloca dentro de un StackPanel objeto que contiene un ScrollViewer control . Al establecer las propiedades Width y Height para un TreeView, estos valores se utilizan para dimensionar el objeto StackPanel que muestra el TreeView. Si el contenido que se va a mostrar es mayor que el área de visualización, se muestra automáticamente ScrollViewer para que el usuario pueda desplazarse por el TreeView contenido.

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 las propiedades Foreground y FontSize para un control TreeViewItem mediante un 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 un HeaderTreeViewItem. Para incluir varios objetos en el contenido de Header, coloque los objetos dentro de un control de diseño, como Panel o StackPanel.

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

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

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

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

Consulte también