Partilhar via

Visão geral do TreeView

O controle TreeView fornece uma maneira de exibir informações em uma estrutura hierárquica usando nós recolhí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 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 controlo TreeViewItem é um HeaderedItemsControl que possui um Header e uma coleção Items.

Se você estiver definindo um TreeView usando Extensible Application Markup Language (XAML), 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 este 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 TreeViewItem.

Para definir o layout de um controlador de TreeViewItem, pode também usar objetos HierarchicalDataTemplate. Para obter mais informações e um exemplo, veja Utilize SelectedValue, SelectedValuePath e SelectedItem.

Se um item não for um controle TreeViewItem, ele será automaticamente incluído por um controle TreeViewItem quando o controle TreeView for 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 qualquer 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 num controlo TreeViewItem, o TreeViewItem e os seus controlos TreeViewItem pai expandem-se. Se um TreeViewItem não estiver visível ou parcialmente visível, o TreeView rolará para torná-lo visível.

Seleção 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 torna-se o SelectedItem do controlo 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 é definida se o usuário clicar em um controle TreeViewItem ou quando a propriedade IsSelected estiver definida para true no controle TreeViewItem.

Use a propriedade SelectedValuePath para especificar um SelectedValue de um SelectedItem. Para obter mais informações, consulte Use 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 um dos valores pode ser null se o aplicativo ou usuário não tiver feito uma seleção anterior ou atual.

Estilo "TreeView"

O estilo padrão para 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 do que a área de exibição, uma ScrollViewer será exibida automaticamente para que o utilizador possa navegar pelo conteúdo TreeView.

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

O exemplo a seguir mostra como definir os valores de propriedade 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 outro conteúdo 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 de Header, inclua 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 incluídos em 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 incluídos em um controle DockPanel. Pode utilizar um DataTemplate para definir o HeaderTemplate ou o ItemTemplate para um TreeViewItem.

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

Ver também

  • Last updated on