A simple TreeView example

Som vi talte om i den forrige artikel, kan WPF TreeView bruges på en meget enkel måde ved at tilføje TreeViewItem-objekter til den – enten fra Code-behind eller simpelthen ved at erklære dem direkte i din XAML. Det er virkelig nemt at komme i gang med, som du kan se i eksemplet her:

<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>

Vi erklærer ganske enkelt TreeViewItem-objekterne direkte i XAML, i den struktur vi ønsker at vise dem i, hvor det første tag er et underordnet element af TreeView-kontrollen, og dets underordnede objekter er også underordnede tags til dets overordnede objekt. For at angive den tekst, vi vil vise for hver node, bruger vi egenskaben Header. Som standard er et TreeViewItem ikke udvidet, men for at vise dig strukturen i eksemplet har jeg brugt egenskaben IsExpanded til at udvide de to overordnede elementer.

TreeViewItem'er med billeder og andre kontroller

Header er dog en interessant egenskab. Som du kan se, kan jeg blot angive en tekststreng og få den vist direkte uden at gøre noget yderligere, men det er WPF, der er venlig mod os – internt omslutter den teksten i en TextBlock-kontrol i stedet for at tvinge dig til at gøre det selv. Det viser os, at vi kan proppe stort set hvad som helst ind i Header-egenskaben i stedet for blot en streng, og TreeView vil gengive det – et godt eksempel på, hvorfor det er så nemt at tilpasse udseendet af WPF-kontroller.

En af de almindelige forespørgsler fra folk, der kommer fra WinForms eller andre UI-biblioteker, er muligheden for at vise et billede ved siden af tekstetiketten på et TreeView-element. Det er meget nemt at gøre med WinForms, fordi TreeView er bygget præcis til dette scenarie. Med WPF TreeView er det lidt mere komplekst, men du bliver belønnet med langt større fleksibilitet, end du nogensinde ville få fra WinForms TreeView. Her er et eksempel på det:

<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>

Jeg har gjort en hel del ting her, bare for at vise dig den fleksibilitet, du får: Jeg farvede de underordnede elementer, og jeg tilføjede billeder og endda knapper til de overordnede elementer. Fordi vi definerer hele strukturen med simpel markup, kan du næsten gøre hvad som helst – men som du kan se fra eksemplet, kommer det med en pris: En enorm mængde XAML-kode for et træ med kun seks noder i alt!

Sammenfatning

Selvom det er fuldt ud muligt at definere et helt TreeView kun ved hjælp af markup, som vi gjorde i de ovenstående eksempler, er det ikke den bedste tilgang i de fleste situationer. Og selvom du kunne gøre det fra Code-behind i stedet, ville det have resulteret i endnu flere kodelinjer. Løsningen er igen databinding, som vi vil se nærmere på i de næste kapitler.