TreeView Overview
O controle TreeView fornece uma maneira para 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.
Este tópico contém as seguintes seções.
- O que é um TreeView?
- Criando um TreeView
- Expandir e recolher um TreeViewItem
- Seleção TreeViewItem
- Estilo da TreeView
- Adicionando imagens e outro conteúdo a itens de TreeView
- Tópicos relacionados
O que é um TreeView?
TreeView é um ItemsControl que aninha os itens usando controles TreeViewItem. O seguinte exemplo 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 uma TreeView usando Extensible Application Markup Language (XAML), você pode definir explicitamente o conteúdo de um controle Header e os itens que compõem sua coleção TreeViewItem. A ilustração anterior demonstra esse método.
Você pode também especificar um ItemsSource como uma fonte de dados e, em seguida, especificar um HeaderTemplate e ItemTemplate para definir o conteúdo dos TreeViewItem.
Para definir o layout de um controle TreeViewItem, você também pode usar objetos HierarchicalDataTemplate. Para mais informações e um exemplo, consulte Como: Usar SelectedValue, SelectedValuePath e SelectedItem.
Se um item não for um controle TreeViewItem, ele será automaticamente encapsulado por um controle TreeViewItem quando o controle TreeView for exibido.
Expandir e recolher um TreeViewItem
Se o usuário expandir um TreeViewItem, a propriedade IsExpanded será definida como true. Você também pode expandir ou recolher uma TreeViewItem sem nenhuma ação direta do usuário definindo a propriedade IsExpanded como true (expandir) ou false (recolher). Quando essa propriedade for alterada, um evento Expanded ou Collapsed ocorrerá.
Quando o método BringIntoView for chamado em um controle TreeViewItem, o TreeViewItem e seus controles TreeViewItem pais expandem-se. Se um TreeViewItem for parcialmente visível ou não estiver visível, o TreeView rola 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 controle TreeView. Inversamente, quando a seleção é alterada a partir de um controle TreeViewItem, ocorre o seu evento Unselected e sua propriedade IsSelected é definida como false.
A propriedade SelectedItem no controle TreeView é 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 controle ou quando a propriedade IsSelected for definida como true no controle TreeViewItem.
Use as propriedades SelectedValue e SelectedValuePath para atribuir um valor a um SelectedItem. Para obter mais informações, consulte Como: Usar SelectedValue, SelectedValuePath e SelectedItem.
Você pode registrar um tratador de eventos no evento SelectedItemChanged para determinar quando o TreeViewItem selecionado for alterado. O RoutedPropertyChangedEventArgs<T> fornecido para o tratador de eventos especifica o OldValue, que é a seleção anterior, e o NewValue, que é a seleção atual. Qualquer um desses valores pode ser null se o aplicativo ou usuário não tiver feito uma seleção anterior ou atual.
Estilo da TreeView
O estilo padrão para um controle TreeView coloca-lo dentro de um objeto StackPanel que contém um controle ScrollViewer. Quando você definir as propriedades Width e Height de um TreeView, esses valores serão usados para dimensionar o objeto StackPanel que exibe a TreeView. Se o conteúdo a exibir for maior que a área de exibição, um ScrollViewer aparece automaticamente para que o usuário possa percorrer o conteúdo da 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 utilizando 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 de TreeView
Você pode incluir mais de um objeto no conteúdo do Header de um TreeViewItem. Para incluir vários objetos no conteúdo do Header, 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 encapsulados 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 são colocados 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>
Consulte também
Conceitos
Visão geral de Controles de Modelos de Conteúdo