Visão geral do TreeView

Artigo
12/18/2024

O controle TreeView 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 uso.

O que é um TreeView?

TreeView é um ItemsControl que aninha 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 controle TreeView contém uma hierarquia de controles TreeViewItem. Um controle TreeViewItem é 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 conteúdo Header de um controle TreeViewItem 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 uma fonte de dados e, em seguida, especificar um HeaderTemplate e ItemTemplate para definir o conteúdo do TreeViewItem.

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

Se um item não for um controle TreeViewItem, ele é automaticamente cercado por um controle TreeViewItem quando o controle TreeView é exibido.

Expandindo e recolhendo um TreeViewItem

Se o usuário expandir um TreeViewItem, a propriedade IsExpanded será definida como true. Você também pode expandir ou recolher um TreeViewItem sem nenhuma ação direta do usuário definindo a propriedade IsExpanded 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 os controles TreeViewItem parentes se expandem. Se um TreeViewItem não estiver visível ou parcialmente visível, o TreeView rolará para torná-lo visível.

Seleção de TreeViewItem

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

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

Utilize a propriedade SelectedValuePath para especificar um SelectedValue de um SelectedItem. Para obter informações adicionais, ver Usar SelectedValue, SelectedValuePath e SelectedItem.

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

Estilo de TreeView

O estilo padrão de um controle TreeView o coloca dentro de um objeto StackPanel que contém um controle ScrollViewer. Quando você define as propriedades Width e Height 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, ajuste a propriedade Style para um Stylepersonalizado.

O exemplo a seguir mostra como definir os valores de propriedade Foreground e FontSize para um controle de 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 TreeView

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

O exemplo a seguir mostra como definir a Header de um TreeViewItem como um CheckBox e um TextBlock, 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 estão dentro de um controle DockPanel. 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