Panoramica sul controllo TreeView

  • Articolo

Il TreeView controllo consente di visualizzare informazioni in una struttura gerarchica usando nodi compressi. In questo argomento vengono presentati i TreeView controlli e TreeViewItem vengono forniti semplici esempi di utilizzo.

Che cos'è un controllo TreeView?

TreeView è un oggetto ItemsControl che annida gli elementi utilizzando TreeViewItem i controlli . 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>

Creazione di un controllo TreeView

Il TreeView controllo contiene una gerarchia di TreeViewItem controlli. Un TreeViewItem controllo è un oggetto che dispone di HeaderedItemsControl un Header insieme e Items .

Se definisci 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 Uso di SelectedValue, SelectedValuePath e SelectedItem.

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

Espansione e compressione di 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 Expanded evento o Collapsed .

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

Selezione di 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 TreeViewItem anche l'oggetto SelectedItem del TreeView controllo . Al contrario, quando la selezione cambia da un TreeViewItem controllo, Unselected si verifica l'evento e la relativa IsSelected proprietà 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 un SelectedValue oggetto .SelectedItem Per altre informazioni, vedere Uso di 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 l'oggetto OldValue, ovvero la selezione precedente e , NewValueche è la selezione corrente. Il valore può essere null se l'applicazione o l'utente non ha effettuato una selezione precedente o attuale.

Stile del controllo 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, viene visualizzato automaticamente un controllo ScrollViewer in modo che l'utente possa scorrere il TreeView contenuto.

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

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>

Aggiunta di immagini e altro contenuto a elementi di TreeView

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

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

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

Nell'esempio seguente viene illustrato come definire un DataTemplate oggetto che contiene un Image oggetto e un TextBlock che sono racchiusi in un DockPanel controllo . È possibile usare un DataTemplate oggetto per impostare o ItemTemplateHeaderTemplate per un oggetto TreeViewItem.

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

Vedi anche