Visão geral do TreeView

2025-05-07

O TreeView controle fornece uma maneira de exibir informações em uma estrutura hierárquica usando nós colapsáveis. Este tópico apresenta os controles TreeView e TreeViewItem, e fornece exemplos simples de seu uso.

O que é um TreeView?

TreeView é um ItemsControl que organiza os itens usando controles TreeViewItem. O exemplo a seguir cria um 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>

Criando um TreeView

O TreeView controle contém uma hierarquia de TreeViewItem controles. Um TreeViewItem controle é um HeaderedItemsControl que tem um Header e uma coleção Items.

Se você estiver definindo um TreeView usando XAML (Extensible Application Markup Language), poderá definir explicitamente o Header conteúdo de um TreeViewItem controle e os itens que compõem sua coleção. A ilustração anterior demonstra esse método.

Você também pode especificar um ItemsSource como fonte de dados e, em seguida, especificar um HeaderTemplate e ItemTemplate para definir o conteúdo TreeViewItem.

Para definir o layout de um TreeViewItem controle, você também pode usar HierarchicalDataTemplate objetos. Para obter mais informações e um exemplo, consulte Usar SelectedValue, SelectedValuePath e SelectedItem.

Se um item não for um TreeViewItem controle, ele será automaticamente envolto por um TreeViewItem controle quando o TreeView controle for exibido.

Expandir e contrair um TreeViewItem

Se o usuário expandir um TreeViewItem, a IsExpanded propriedade será definida como true. Você também pode expandir ou recolher um TreeViewItem sem nenhuma ação direta do usuário definindo a IsExpanded propriedade como true (expandir) ou false (recolher). Quando essa propriedade é alterada, ocorre um evento Expanded ou Collapsed.

Quando o método BringIntoView é chamado em um controle TreeViewItem, o TreeViewItem e seus controles pai TreeViewItem se expandem. Se um TreeViewItem não estiver visível ou parcialmente visível, o TreeView rola para torná-lo visível.

Seleção de TreeViewItem

Quando um usuário clica em um TreeViewItem controle para selecioná-lo, o Selected evento ocorre e sua IsSelected propriedade é definida como true. O TreeViewItem também se torna o SelectedItem do controle TreeView. Inversamente, quando a seleção muda a partir de um TreeViewItem controle, o Unselected evento ocorre e a IsSelected propriedade é definida como false.

A SelectedItem propriedade no TreeView controle é uma propriedade somente leitura; portanto, você não pode defini-la explicitamente. A propriedade SelectedItem é definida se o usuário clicar em um controle TreeViewItem ou quando a propriedade IsSelected for definida como true no controle TreeViewItem.

Use a propriedade SelectedValuePath para especificar um SelectedValue de um SelectedItem. Para obter mais informações, consulte Uso de SelectedValue, SelectedValuePath e SelectedItem.

Você pode registrar um manipulador de eventos no evento SelectedItemChanged para determinar quando um item selecionado TreeViewItem é alterado. O RoutedPropertyChangedEventArgs<T> que é fornecido ao manipulador de eventos especifica o OldValue, que é a seleção anterior e o NewValue, que é a seleção atual. O valor poderá ser null se o aplicativo ou o usuário não tiver feito uma seleção anterior ou atual.

Estilo TreeView

O estilo padrão de um TreeView controle o coloca dentro de um StackPanel objeto que contém um ScrollViewer controle. Quando você define as Width e Height propriedades para um TreeView, esses valores são usados para dimensionar o objeto StackPanel que exibe o TreeView. Se o conteúdo a ser exibido for maior que a área de exibição, um ScrollViewer será exibido automaticamente para que o usuário possa rolar pelo conteúdo TreeView.

Para personalizar a aparência de um controle TreeViewItem, defina a propriedade Style como um Style personalizado.

O exemplo a seguir mostra como definir os valores das propriedades Foreground e FontSize para um controle TreeViewItem usando um Style.

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

Adicionando imagens e outros conteúdos a itens do TreeView

Você pode incluir mais de um objeto no Header conteúdo de um TreeViewItem. Para incluir vários objetos no Header conteúdo, coloque os objetos dentro de um controle de layout, como um Panel ou StackPanel.

O exemplo a seguir mostra como definir o Header de um TreeViewItem como um CheckBox e TextBlock que estão ambos dentro de um controle DockPanel.

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

O exemplo a seguir mostra como definir um DataTemplate que contém um Image e um TextBlock que são colocados em um DockPanel controle. Você pode usar um DataTemplate para definir o HeaderTemplate ou ItemTemplate para um TreeViewItem.

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

Compartilhar via