TOC

This article is currently in the process of being translated into Italian (~92% done).

Il controllo TreeView:

Un semplice esempio di TreeView

Come abbiamo parlato nel precedente articolo, WPF TreeView può essere utilizzato in modo molto semplice, aggiungendo oggetti TreeViewItem, da Code-behind o semplicemente dichiarandoli direttamente nel tuo XAML. È davvero molto facile iniziare, come puoi vedere dall'esempio in seguito:

<Window x:Class="WpfTutorialSamples.TreeView_control.TreeViewSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TreeViewSample" Height="200" Width="250">
    <Grid Margin="10">
		<TreeView>
			<TreeViewItem Header="Level 1" IsExpanded="True">
				<TreeViewItem Header="Level 2.1" />
				<TreeViewItem Header="Level 2.2" IsExpanded="True">
					<TreeViewItem Header="Level 3.1" />
					<TreeViewItem Header="Level 3.2" />
				</TreeViewItem>
				<TreeViewItem Header="Level 2.3" />
			</TreeViewItem>
		</TreeView>
	</Grid>
</Window>

Dichiariamo semplicemente gli oggetti TreeViewItem direttamente in XAML, nella stessa struttura in cui vogliamo visualizzarli, in cui il primo tag è figlio di il controllo TreeView e i suoi oggetti figlio sono anche tag figlio per l'oggetto padre. Per specificare il testo che vogliamo visualizzare per ciascun nodo, utilizziamo la proprietà Header. Per impostazione predefinita, un TreeViewItem non è espanso, ma per mostrarti la struttura dell'esempio, ho usato la proprietà IsExpanded per espandere i due elementi principali.

TreeViewItem con immagini e altri controlli

La Header è comunque una proprietà interessante. Si può semplicemente specificare una stringa di testo e quindi renderizzarla direttamente, ma WPF ci semplifica la vita: avvolge il testo all'interno di un controllo TextBlock senza costringerti a farlo. Questo ci permette di inserire praticamente tutto ciò che vogliamo nella proprietà Header anziché solo una stringa. Ecco un buon esempio del TreeView WPF:

Una delle richieste più comuni da parte di persone provenienti da WinForms o anche da altre librerie dell'interfaccia utente è la possibilità di mostrare un'immagine accanto all'etichetta di testo di un elemento TreeView. Questo è molto facile da fare con WinForms, perché TreeView è costruito esattamente per questo scenario. Con WPF TreeView è un po' più complesso, ma sei ricompensato con una flessibilità molto maggiore di quella che potresti mai ottenere da WinForms TreeView. Ecco un esempio:

<Window x:Class="WpfTutorialSamples.TreeView_control.TreeViewCustomItemsSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TreeViewCustomItemsSample" Height="200" Width="250">
	<Grid Margin="10">
		<TreeView>
			<TreeViewItem IsExpanded="True">
				<TreeViewItem.Header>
					<StackPanel Orientation="Horizontal">
						<Image Source="/WpfTutorialSamples;component/Images/bullet_blue.png" />
						<TextBlock Text="Level 1 (Blue)" />
					</StackPanel>
				</TreeViewItem.Header>
				<TreeViewItem>
					<TreeViewItem.Header>
						<StackPanel Orientation="Horizontal">
							<TextBlock Text="Level 2.1" Foreground="Blue" />
						</StackPanel>
					</TreeViewItem.Header>
				</TreeViewItem>
				<TreeViewItem IsExpanded="True">
					<TreeViewItem.Header>
						<StackPanel Orientation="Horizontal">
							<Image Source="/WpfTutorialSamples;component/Images/bullet_green.png" />
							<TextBlock Text="Level 2.2 (Green)" Foreground="Blue" />
						</StackPanel>
					</TreeViewItem.Header>
					<TreeViewItem>
						<TreeViewItem.Header>
							<TextBlock Text="Level 3.1" Foreground="Green" />
						</TreeViewItem.Header>
					</TreeViewItem>
					<TreeViewItem>
						<TreeViewItem.Header>
							<TextBlock Text="Level 3.2" Foreground="Green" />
						</TreeViewItem.Header>
					</TreeViewItem>
				</TreeViewItem>
				<TreeViewItem>
					<TreeViewItem.Header>
						<TextBlock Text="Level 2.3" Foreground="Blue" />
					</TreeViewItem.Header>
				</TreeViewItem>
			</TreeViewItem>
		</TreeView>
	</Grid>
</Window>

L'esempio sopra mostra la flessibilità mdel controllo: ho colorato gli elementi figlio e ho aggiunto immagini. E' possibile fare tutto questo tramite codice XAML; il prezzo: molte riche di codice per un albero con solo sei nodi.

Summary

Mentre è del tutto possibile definire un intero TreeView usando solo il markup, come abbiamo fatto negli esempi precedenti, non è l'approccio migliore nella maggior parte delle situazioni; la stessa cosa fatta da Code-behind avrebbe comportato ancora più righe di codice. Ancora una volta la soluzione sta nel data binding che vedremo nei prossimi capitoli.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!