Vista ad albero

Il controllo TreeView visualizza informazioni in una struttura gerarchica usando nodi compressi. Questo articolo presenta i TreeView controlli e TreeViewItem e fornisce esempi dell'uso.

La figura seguente è un esempio di controllo TreeView con controlli TreeViewItem annidati:

Che cos'è un TreeView?

TreeView è un ItemsControl che annida gli elementi utilizzando i controlli TreeViewItem. Nell'esempio seguente viene creato un oggetto 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>

Creare un TreeView

Il TreeView controllo contiene una gerarchia di TreeViewItem controlli. Un TreeViewItem controllo è un HeaderedItemsControl che ha un Header e una collezione Items.

Se stai definendo un TreeView oggetto usando Extensible Application Markup Language (XAML), puoi definire in modo esplicito il Header contenuto di un TreeViewItem controllo e gli elementi che costituiscono la raccolta. La figura precedente illustra questo metodo.

È anche possibile specificare un oggetto ItemsSource come origine dati e quindi specificare un HeaderTemplate oggetto e ItemTemplate per definire il TreeViewItem contenuto.

Per definire il layout di un TreeViewItem controllo, è anche possibile utilizzare HierarchicalDataTemplate oggetti . Per altre informazioni e un esempio, vedere Usare SelectedValue, SelectedValuePath e SelectedItem.

Se un elemento non è un TreeViewItem controllo, viene automaticamente racchiuso da un TreeViewItem controllo quando il TreeView controllo viene visualizzato.

Espandere e comprimere un oggetto TreeViewItem

Se l'utente espande un TreeViewItemoggetto , la IsExpanded proprietà viene impostata su true. È anche possibile espandere o comprimere un oggetto TreeViewItem senza alcuna azione diretta dell'utente impostando la IsExpanded proprietà su true (espandere) o false (comprimere). Quando questa proprietà viene modificata, si verifica un evento Expanded o Collapsed.

Quando il metodo BringIntoView viene chiamato su un controllo TreeViewItem, i controlli TreeViewItem e i loro controlli padre TreeViewItem si espandono. Se un TreeViewItem oggetto non è visibile o parzialmente visibile, TreeView scorre per renderlo visibile.

Selezionare un TreeViewItem

Quando un utente fa clic su un TreeViewItem controllo per selezionarlo, l'evento Selected si verifica e la relativa IsSelected proprietà viene impostata su true. Diventa anche TreeViewItem l'oggetto SelectedItem del controllo TreeView. Al contrario, quando la selezione cambia da un TreeViewItem controllo, l'evento Unselected si verifica e la relativa proprietà IsSelected viene impostata su false.

La SelectedItem proprietà nel TreeView controllo è una proprietà di sola lettura, pertanto non è possibile impostarla in modo esplicito. La SelectedItem proprietà viene impostata se l'utente fa clic su un TreeViewItem controllo o quando la IsSelected proprietà è impostata su true sul TreeViewItem controllo .

Utilizzare la SelectedValuePath proprietà per specificare una SelectedValue di un SelectedItem. Per altre informazioni, vedere Usare SelectedValue, SelectedValuePath e SelectedItem.

È possibile registrare un gestore eventi nell'evento SelectedItemChanged per determinare quando un oggetto selezionato TreeViewItem cambia. L'oggetto RoutedPropertyChangedEventArgs<T> fornito al gestore eventi specifica , OldValueche è la selezione precedente e , NewValueche è la selezione corrente. Entrambi i valori possono essere null se l'applicazione o l'utente non ha eseguito una selezione precedente o corrente.

Stilizzare un TreeView

Lo stile predefinito per un TreeView controllo lo inserisce all'interno di un StackPanel oggetto che contiene un ScrollViewer controllo . Quando si impostano le Width proprietà e Height per un oggetto TreeView, questi valori vengono usati per ridimensionare l'oggetto StackPanel che visualizza .TreeView Se il contenuto da visualizzare è più grande dell'area di visualizzazione, un ScrollViewer viene visualizzato automaticamente affinché l'utente possa scorrere il contenuto TreeView.

Per personalizzare l'aspetto di un controllo TreeViewItem, impostare la proprietà Style su un Style personalizzato.

Nell'esempio seguente viene illustrato come impostare i valori delle Foreground proprietà e FontSize per un TreeViewItem controllo utilizzando un oggetto Style.

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

Aggiungere immagini e altro contenuto agli elementi TreeView

È possibile includere più oggetti nel Header contenuto di un oggetto TreeViewItem. Per includere più oggetti nei contenuti di Header, racchiudere gli oggetti all'interno di un controllo di layout, come un Panel o un StackPanel.

Nell'esempio seguente viene illustrato come definire l'oggetto Header di un TreeViewItem come CheckBox e TextBlock, che sono entrambi racchiusi in un controllo DockPanel.

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

Nell'esempio seguente viene illustrato come definire un DataTemplate che contiene un Image e un TextBlock racchiuso in un controllo DockPanel. È possibile usare un DataTemplate per impostare il HeaderTemplate o il ItemTemplate per un TreeViewItem.

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

Attività comuni

La tabella seguente elenca le attività comuni per l'uso del controllo TreeView:

Sezioni correlate

Panoramica sul data binding

Panoramica della creazione di modelli di dati

Riferimenti

TreeView TreeViewItem

Stili e modelli

È possibile modificare l'impostazione predefinita ControlTemplate per assegnare al TreeView controllo un aspetto univoco. Per altre informazioni, vedere Che cosa sono gli stili e i modelli? e Come creare un modello per un controllo.

Parti

Il TreeView controllo non possiede parti denominate.

Quando si crea un ControlTemplate per un TreeView, il modello potrebbe contenere un ItemsPresenter all'interno di un ScrollViewer. L'oggetto ItemsPresenter visualizza ogni elemento dell'oggetto TreeView. ScrollViewer abilita lo scorrimento all'interno del controllo . Se il ItemsPresenter non è l'elemento figlio diretto di ScrollViewer, è necessario dare al ItemsPresenter il nome ItemsPresenter.

Stati di visualizzazione

Nella tabella seguente sono elencati gli stati di visualizzazione per il TreeView controllo .

Parti di TreeViewItem

Nella tabella seguente sono elencate le parti denominate del controllo TreeViewItem.

Stati di TreeViewItem

Nella tabella seguente sono elencati gli stati di visualizzazione per TreeViewItem il controllo.

Sezioni correlate

Panoramica del data binding -Panoramica dei modelli di dati