Panoramica di TreeView
Il controllo TreeView consente di visualizzare informazioni in una struttura gerarchica usando nodi compressi. In questo argomento vengono presentati i controlli TreeView e TreeViewItem e vengono forniti semplici esempi di utilizzo.
Che cos'è un TreeView?
TreeView è un ItemsControl che annida gli elementi utilizzando i controlli TreeViewItem. Nell'esempio seguente viene creato un 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 controllo TreeView contiene una gerarchia di controlli TreeViewItem. Un controllo TreeViewItem è un HeaderedItemsControl con un Header e una raccolta Items.
Se definisci un TreeView usando XAML (Extensible Application Markup Language), puoi definire in modo esplicito il contenuto Header di un controllo TreeViewItem e gli elementi che ne costituiscono la raccolta. La figura precedente illustra questo metodo.
È anche possibile specificare un ItemsSource come origine dati e quindi specificare un HeaderTemplate e un ItemTemplate per definire il contenuto TreeViewItem.
Per definire il layout di un controllo TreeViewItem, puoi anche utilizzare oggetti HierarchicalDataTemplate. Per altre informazioni e un esempio, vedere Use SelectedValue, SelectedValuePath e SelectedItem.
Se un elemento non è un controllo TreeViewItem, viene automaticamente racchiuso da un controllo TreeViewItem quando viene visualizzato il controllo TreeView.
Espansione e compressione di un elemento TreeView
Se l'utente espande un TreeViewItem, la proprietà IsExpanded è impostata su true. È anche possibile espandere o comprimere un TreeViewItem senza alcuna azione diretta dell'utente impostando la proprietà IsExpanded su true (espansione) o false (compressione). Quando questa proprietà viene modificata, si verifica un evento Expanded o Collapsed.
Quando il metodo BringIntoView viene chiamato su un controllo TreeViewItem, il TreeViewItem e i suoi controlli padre TreeViewItem si espandono. Se un TreeViewItem non è visibile o parzialmente visibile, il TreeView scorre per renderlo visibile.
Selezione dell'elemento TreeViewItem
Quando un utente fa clic su un controllo TreeViewItem per selezionarlo, si verifica l'evento Selected e la relativa proprietà IsSelected viene impostata su true. Il TreeViewItem diventa anche il SelectedItem del controllo TreeView. Viceversa, quando la selezione viene modificata da un controllo TreeViewItem, si verifica l'evento Unselected e la relativa proprietà IsSelected viene impostata su false.
La proprietà SelectedItem nel controllo TreeView è una proprietà di sola lettura; pertanto, non è possibile impostarlo in modo esplicito. La proprietà SelectedItem viene impostata se l'utente fa clic su un controllo TreeViewItem o quando la proprietà IsSelected è impostata su true sul controllo TreeViewItem.
Utilizzare la proprietà SelectedValuePath per specificare un SelectedValue di un SelectedItem. Per altre informazioni, vedere Use SelectedValue, SelectedValuePath e SelectedItem.
È possibile registrare un gestore eventi nell'evento SelectedItemChanged per determinare quando un TreeViewItem selezionato cambia. Il RoutedPropertyChangedEventArgs<T> fornito al gestore eventi specifica il OldValue, ovvero la selezione precedente e l'NewValue, ovvero la selezione corrente. Entrambi i valori possono essere null se l'applicazione o l'utente non ha effettuato una selezione precedente o corrente.
Lo stile TreeView
Lo stile predefinito per un controllo TreeView lo inserisce all'interno di un oggetto StackPanel che contiene un controllo ScrollViewer. Quando si impostano le proprietà Width e Height per un TreeView, questi valori vengono usati per ridimensionare l'oggetto StackPanel che visualizza l'TreeView. Se il contenuto da visualizzare è maggiore dell'area di visualizzazione, viene visualizzato automaticamente un ScrollViewer in modo che l'utente possa scorrere il contenuto TreeView.
Per personalizzare l'aspetto di un controllo TreeViewItem, impostare la proprietà Style su un Stylepersonalizzato.
Nell'esempio seguente viene illustrato come impostare i valori di proprietà Foreground e FontSize per un controllo TreeViewItem utilizzando un Style.
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="FontSize" Value="12"/>
</Style>
Aggiungere immagini e altro contenuto agli elementi di TreeView
È possibile includere più oggetti nel contenuto Header di un TreeViewItem. Per includere più oggetti nel contenuto Header, racchiudere gli oggetti all'interno di un controllo di layout, ad esempio un Panel o StackPanel.
Nell'esempio seguente viene illustrato come definire il Header di un TreeViewItem come CheckBox e TextBlock 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 racchiusi in un controllo DockPanel. È possibile usare un DataTemplate per impostare la HeaderTemplate o la ItemTemplate per un TreeViewItem.
<DataTemplate x:Key="NewspaperTVItem">
<DockPanel>
<Image Source="images\icon.jpg"/>
<TextBlock VerticalAlignment="center" Text ="{Binding Path=Name}"/>
</DockPanel>
</DataTemplate>
Vedere anche
.NET Desktop feedback