Vista Árvore

O controle TreeView exibe informações em uma estrutura hierárquica usando nós recolhíveis. Este artigo apresenta os TreeView controlos e TreeViewItem fornece exemplos da sua utilização.

A ilustração a seguir é um exemplo de um controle TreeView com controles TreeViewItem aninhados:

O que é um TreeView?

TreeView é um ItemsControl que aninha os itens usando TreeViewItem controles. O exemplo seguinte 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>

Crie uma TreeView

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

Se estiver a definir uma TreeView usando a Extensible Application Markup Language (XAML), pode definir explicitamente o Header conteúdo de um TreeViewItem controlo e os itens que compõem a sua coleção. A ilustração anterior demonstra este método.

Também pode especificar um ItemsSource como fonte de dados e depois especificar um HeaderTemplate e ItemTemplate para definir o TreeViewItem conteúdo.

Para definir a disposição de um TreeViewItem controlo, também podes usar HierarchicalDataTemplate objetos. Veja Usar SelectedValue, SelectedValuePath e SelectedItem para mais informações e um exemplo.

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

Expandir e recolher um TreeViewItem

Se o utilizador expandir um TreeViewItem, a IsExpanded propriedade é definida para true. Também pode expandir ou colapsar TreeViewItem sem qualquer ação direta do utilizador, definindo a propriedade IsExpanded para true (expandir) ou false (colapsar). Quando esta propriedade muda, ocorre um evento Expanded ou Collapsed.

Quando o BringIntoView método é chamado a um TreeViewItem controlo, os TreeViewItem e os seus controlos pais TreeViewItem expandem-se. Se a TreeViewItem não for visível ou parcialmente visível, os TreeView rolam para a tornar visível.

Selecione um TreeViewItem

Quando um utilizador clica num TreeViewItem controlo para o selecionar, o Selected evento ocorre e a sua IsSelected propriedade é definida para true. O TreeViewItem também se torna o SelectedItem do TreeView controlo. Por outro lado, quando a seleção muda de um TreeViewItem controlo, o seu Unselected evento ocorre e a sua IsSelected propriedade é definida para false.

A propriedade SelectedItem do controlo TreeView é uma propriedade de apenas leitura, por isso não podes defini-la explicitamente. A SelectedItem propriedade é definida se o utilizador clicar num TreeViewItem controlo ou quando a IsSelected propriedade estiver definida como true no TreeViewItem controlo.

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

Pode registar um gestor de eventos no SelectedItemChanged evento para determinar quando um selecionado TreeViewItem muda. O RoutedPropertyChangedEventArgs<T> que é fornecido ao handler de eventos especifica o OldValue, que é a seleção anterior, e o NewValue, que é a seleção atual. Qualquer um dos valores pode ser null se a aplicação ou utilizador não tiver feito uma seleção anterior ou atual.

Estilizar uma TreeView

O estilo padrão de um TreeView controlo coloca-o dentro de um StackPanel objeto que contém um ScrollViewer controlo. Quando defines as propriedades Width e Height para um TreeView, estes valores são usados para dimensionar o objeto StackPanel que mostra o TreeView. Se o conteúdo a mostrar for maior do que a área de visualização, um ScrollViewer aparece automaticamente para que o utilizador possa percorrer o conteúdo do TreeView.

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

O exemplo seguinte mostra como definir os valores das propriedades Foreground e FontSize para um controlo TreeViewItem usando um Style.

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

Adicionar imagens e outros conteúdos aos itens do TreeView

Pode incluir mais de um objeto no conteúdo Header de um TreeViewItem. Para incluir múltiplos objetos no Header conteúdo, inclua os objetos dentro de um controlo de layout, como um Panel ou StackPanel.

O exemplo seguinte mostra como definir o Header de um TreeViewItem como um CheckBox e um TextBlock, ambos encerrados num controlo DockPanel.

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

O exemplo seguinte mostra como definir um DataTemplate que contém um Image e um TextBlock que estão encerrados num DockPanel controlo. 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>

Tarefas comuns

A tabela seguinte lista tarefas comuns para trabalhar com o controlo TreeView:

Secções relacionadas

Visão geral da vinculação de dados

Visão Geral da Templação de Dados

Referência

TreeView TreeViewItem

Estilos e modelos

Podes modificar o padrão ControlTemplate para dar ao TreeView controlo uma aparência única. Para mais informações, veja O que são estilos e modelos? e Como criar um modelo para um controlo.

Partes

O TreeView controlo não tem partes nomeadas.

Quando cria um ControlTemplate para um TreeView, o seu modelo pode conter um ItemsPresenter dentro de um ScrollViewer. (O ItemsPresenter exibe cada item no TreeView; o ScrollViewer permite deslocar-se dentro do controlo). Se o ItemsPresenter não for filho direto do ScrollViewer, deve dar ao ItemsPresenter o nome ItemsPresenter.

Estados visuais

A tabela seguinte lista os estados visuais do TreeView controlo.

Partes do TreeViewItem

A tabela seguinte lista as partes nomeadas para o TreeViewItem controlo.

Estados do TreeViewItem

A tabela seguinte lista os estados visuais para TreeViewItem controlo.

Seções relacionadas

Visão geral da vinculação de dadosVisão geral da modelagem de templates de dados