Cenni preliminari sul controllo TreeView
Il controllo TreeView consente di visualizzare informazioni in una struttura gerarchica tramite l'utilizzo di nodi comprimibili. In questo argomento vengono illustrati i controlli TreeView e TreeViewItem con alcuni semplici esempi del loro utilizzo.
Nel presente argomento sono contenute le seguenti sezioni.
- Definizione di TreeView
- Creazione di un controllo TreeView
- Espansione e compressione di un controllo TreeViewItem
- Selezione del controllo TreeViewItem
- Stile del controllo TreeView
- Aggiunta di immagini e altro contenuto a elementi TreeView
- Argomenti correlati
Definizione di TreeView
TreeView è un oggetto ItemsControl che consente di annidare gli elementi utilizzando i controlli TreeViewItem. Nell'esempio riportato di seguito 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
Nel controllo TreeView è contenuta una gerarchia dei controlli TreeViewItem. TreeViewItem è un controllo HeaderedItemsControl contenente un insieme di Header e di Items.
Se un controllo TreeView viene definito tramite Extensible Application Markup Language (XAML), è possibile definire in modo esplicito il contenuto della proprietà Header di un controllo TreeViewItem e gli elementi che ne compongono l'insieme. Nell'illustrazione precedente viene dimostrato questo metodo.
È inoltre possibile specificare una proprietà ItemsSource come origine dati, quindi specificare le proprietà HeaderTemplate e ItemTemplate per definire il contenuto dell'oggetto TreeViewItem.
Per definire il layout di un controllo TreeViewItem, è inoltre possibile utilizzare gli oggetti HierarchicalDataTemplate. Per ulteriori informazioni e un esempio, vedere Procedura: utilizzare le proprietà 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 controllo TreeViewItem
Se l'utente espande un controllo TreeViewItem, la proprietà IsExpanded viene impostata su true. Un controllo TreeViewItem può inoltre essere espanso o compresso senza un'azione diretta dell'utente impostando la proprietà IsExpanded su true (espansione) o su 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 controllo TreeViewItem e i relativi controlli TreeViewItem padre vengono espansi. Se un oggetto TreeViewItem non è visibile o è visibile solo in parte, il controllo TreeView scorre per visualizzarlo interamente.
Selezione del controllo 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. L'oggetto TreeViewItem diventa anche la proprietà SelectedItem del controllo TreeView. Al contrario, quando la selezione cambia da un controllo TreeViewItem, si verifica l'evento Unselected e la relativa proprietà IsSelected viene impostata su false.
La proprietà SelectedItem del controllo TreeView è di sola lettura, pertanto non è possibile impostarla in modo esplicito. La proprietà SelectedItem viene impostata se l'utente fa clic su un controllo TreeViewItem o se la proprietà IsSelected viene impostata su true per il controllo TreeViewItem.
Utilizzare la proprietà SelectedValuePath per specificare un valore SelectedValue di una proprietà SelectedItem. Per ulteriori informazioni, vedere Procedura: utilizzare le proprietà SelectedValue, SelectedValuePath e SelectedItem.
È possibile registrare un gestore eventi sull'evento SelectedItemChanged per determinare quando cambia un oggetto TreeViewItem selezionato. L'oggetto RoutedPropertyChangedEventArgs<T> fornito al gestore eventi consente di specificare la proprietà OldValue, ovvero la selezione precedente, e la proprietà NewValue, ovvero la selezione corrente. Entrambi i valori possono essere null se l'applicazione o l'utente non ha effettuato alcuna selezione precedente o corrente.
Stile del controllo TreeView
In base allo stile predefinito, il controllo TreeView viene inserito in un oggetto StackPanel contenente un controllo ScrollViewer. Quando si impostano le proprietà Width e Height di un controllo TreeView, questi valori vengono utilizzati per ridimensionare l'oggetto StackPanel in cui viene visualizzato il controllo TreeView. Se il contenuto da visualizzare è più grande dell'area di visualizzazione, viene automaticamente visualizzato un oggetto ScrollViewer che consente all'utente di scorrere il contenuto dell'oggetto TreeView.
Per personalizzare l'aspetto di un controllo TreeViewItem, impostare la proprietà Style su un oggetto Style personalizzato.
Nell'esempio riportato di seguito viene illustrato come impostare i valori delle proprietà Foreground e FontSize per un controllo TreeViewItem utilizzando una proprietà 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 TreeView
È possibile includere più di un oggetto nel contenuto della proprietà Header di un oggetto TreeViewItem. Per includere più oggetti nel contenuto della proprietà Header, racchiudere gli oggetti in un controllo layout, ad esempio un oggetto Panel o StackPanel.
Nell'esempio riportato di seguito viene illustrato come definire la proprietà Header di un oggetto TreeViewItem come oggetti CheckBox e TextBlock, entrambi racchiusi in un controllo DockPanel.
<TreeViewItem>
<TreeViewItem.Header>
<DockPanel>
<CheckBox/>
<TextBlock>
TreeViewItem Text
</TextBlock>
</DockPanel>
</TreeViewItem.Header>
</TreeViewItem>
Nell'esempio riportato di seguito viene illustrato come definire un oggetto DataTemplate contenente un oggetto Image e un oggetto TextBlock racchiusi in un controllo DockPanel. È possibile utilizzare un oggetto DataTemplate per impostare la proprietà HeaderTemplate o ItemTemplate per un oggetto TreeViewItem.
<DataTemplate x:Key="NewspaperTVItem">
<DockPanel>
<Image Source="images\icon.jpg"/>
<TextBlock VerticalAlignment="center" Text ="{Binding Path=Name}"/>
</DockPanel>
</DataTemplate>