Visão geral de TreeView

  • Artigo

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

O que é um TreeView?

TreeView é um ItemsControl que aninha os itens usando TreeViewItem controles. 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 que tem um HeaderHeaderedItemsControl e uma Items coleção.

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

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

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 controle, ele será automaticamente incluído por um TreeViewItemTreeViewItem controle quando o TreeView controle for exibido.

Expandindo e Recolhendo um TreeViewItem

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

Quando o método é chamado em um TreeViewItem controle, o TreeViewItemBringIntoView e seus controles pai TreeViewItem expandem. Se um TreeViewItem não estiver visível ou parcialmente visível, os rolos TreeView 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 passa a ser o TreeViewSelectedItem do controle. Por outro lado, quando a seleção muda de um TreeViewItem controle, seu Unselected evento ocorre e sua IsSelected propriedade é definida como false.

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

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

Você pode registrar um manipulador de eventos no SelectedItemChanged evento para determinar quando uma seleção é TreeViewItem alterada. O RoutedPropertyChangedEventArgs<T> que é fornecido ao manipulador de eventos especifica o , que é a seleção anterior e o OldValueNewValue, 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 para um controle o coloca dentro de um objeto que contém um TreeViewStackPanelScrollViewer controle. Quando você define as Width propriedades e Height para um TreeView, esses valores são usados para dimensionar o objeto que exibe o StackPanelTreeView. 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 TreeView conteúdo.

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

O exemplo a seguir mostra como definir os Foreground valores de propriedade e FontSize para um controle usando um StyleTreeViewItem arquivo .

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

Adicionando imagens e outros tipos de conteúdo aos itens do TreeView

Você pode incluir mais de um objeto no Header conteúdo de um TreeViewItemarquivo . 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 de a HeaderTreeViewItem como um e TextBlock que são ambos incluídos em um CheckBoxDockPanel controle.

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

O exemplo a seguir mostra como definir um que contém um e um que estão incluídos em um DataTemplateImageTextBlockDockPanel controle. Você pode usar um para definir o HeaderTemplate ou ItemTemplate para um TreeViewItemDataTemplate arquivo .

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

Confira também