TreeView, Datenbindung und mehrere Vorlagen

Das WPF TreeView unterstützt, ebenso, wie fast alle anderen WPF Steuerelemente, die Datenanbindung. Wegen seiner hierarchischen Struktur wird beim TreeView ein normales DataTemplate oft nicht genügen. Stattdessen nutzen wir ein HierarchicalDataTemplate, das uns eine Vorlage dafür bietet, sowohl den HauptKnoten im Baum, die TreeNode, wie auch die Quelle für die Kindknoten zu kontrollieren.

Ein einfaches datengebundenes TreeView- Steuerelement

Im folgenden Beispiel zeigen wir, wie einfach es ist, mit dem HierarchicalDataTemplate zu beginnen:

<Window x:Class="WpfTutorialSamples.TreeView_control.TreeViewDataBindingSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:self="clr-namespace:WpfTutorialSamples.TreeView_control"
        Title="TreeViewDataBindingSample" Height="150" Width="200">
    <Grid Margin="10">
		<TreeView Name="trvMenu">
			<TreeView.ItemTemplate>
				<HierarchicalDataTemplate DataType="{x:Type self:MenuItem}" ItemsSource="{Binding Items}">
					<TextBlock Text="{Binding Title}" />
				</HierarchicalDataTemplate>
			</TreeView.ItemTemplate>
		</TreeView>
	</Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Windows;
using System.IO;
using System.Collections.ObjectModel;

namespace WpfTutorialSamples.TreeView_control
{
	public partial class TreeViewDataBindingSample : Window
	{
		public TreeViewDataBindingSample()
		{
			InitializeComponent();
			MenuItem root = new MenuItem() { Title = "Menu" };
			MenuItem childItem1 = new MenuItem() { Title = "Child item #1" };
			childItem1.Items.Add(new MenuItem() { Title = "Child item #1.1" });
			childItem1.Items.Add(new MenuItem() { Title = "Child item #1.2" });
			root.Items.Add(childItem1);
			root.Items.Add(new MenuItem() { Title = "Child item #2" });
			trvMenu.Items.Add(root);
		}
	}

	public class MenuItem
	{
		public MenuItem()
		{
			this.Items = new ObservableCollection<MenuItem>();
		}

		public string Title { get; set; }

		public ObservableCollection<MenuItem> Items { get; set; }
	}

}

In der XAML Beschreibung haben wir ein HierarchicalDataTemplate als Grundlage für das ItemTemplate des Treeview festgelegt. Dem HierarchicalDataTemplate wird durch Festlegung der ItemsSource Eigenschaft mitgeteilt, wo es seine Kindknoten, die Items suchen muss. Innerhalb des ItemTemplate definieren wir dessen eigentliches Erscheinungsbild, bei dem wir uns fürs Erste auf einen Textblock beschränken, der an die Title Eigenschaft gebunden ist.

Dieses erste Beispiel war sehr einfach. Genaugenommen war es so einfach, dass wir die Knoten des Treeviews auch manuell hätten hinzufügen können, anstatt eine Anzahl von Objekten zu erzeugen und sie an die Knoten zu binden. Wenn die Dinge etwas komplizierter werden, werden die Vorteile der Datenbindung jedoch schnell offensichtlich.

Mehrfache Vorlagen für verschiedene Typen

Im nächsten Beispiel betrachten wir einen etwas komplexeren Fall bei dem wir eine Baumstruktur von mehreren Familien und deren Mitgliedern zeigen möchten. Eine Familie sollte auf einheitliche Art dargestellt werden, jedes Mitglied hingegen sollte auf eine etwas andere Art dargestellt werden. Wir erreichen das, indem wir zwei verschiedene Vorlagen anlegen und sie als Ressourcen der Struktur (oder des Fensters oder der Anwendung - das liegt wirklich bei Ihnen als Entwickler) hinterlegen und dann zulassen, dass das TreeView die richtige Vorlage, basierend auf dem zugrundeliegenden Datentyp, auswählt.

Hier ist der Quellcode - die Erklärung folgt sogleich nach:

<Window x:Class="WpfTutorialSamples.TreeView_control.TreeViewMultipleTemplatesSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:self="clr-namespace:WpfTutorialSamples.TreeView_control"
        Title="TreeViewMultipleTemplatesSample" Height="200" Width="250">
	<Grid Margin="10">
		<TreeView Name="trvFamilies">
			<TreeView.Resources>
				<HierarchicalDataTemplate DataType="{x:Type self:Family}" ItemsSource="{Binding Members}">
					<StackPanel Orientation="Horizontal">
						<Image Source="/WpfTutorialSamples;component/Images/group.png" Margin="0,0,5,0" />
						<TextBlock Text="{Binding Name}" />
						<TextBlock Text=" [" Foreground="Blue" />
						<TextBlock Text="{Binding Members.Count}" Foreground="Blue" />
						<TextBlock Text="]" Foreground="Blue" />
					</StackPanel>
				</HierarchicalDataTemplate>
				<DataTemplate DataType="{x:Type self:FamilyMember}">
					<StackPanel Orientation="Horizontal">
						<Image Source="/WpfTutorialSamples;component/Images/user.png" Margin="0,0,5,0" />
						<TextBlock Text="{Binding Name}" />
						<TextBlock Text=" (" Foreground="Green" />
						<TextBlock Text="{Binding Age}" Foreground="Green" />
						<TextBlock Text=" years)" Foreground="Green" />
					</StackPanel>
				</DataTemplate>
			</TreeView.Resources>
		</TreeView>
	</Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Windows;
using System.Collections.ObjectModel;

namespace WpfTutorialSamples.TreeView_control
{
	public partial class TreeViewMultipleTemplatesSample : Window
	{
		public TreeViewMultipleTemplatesSample()
		{
			InitializeComponent();

			List<Family> families = new List<Family>();

			Family family1 = new Family() { Name = "The Doe's" };
			family1.Members.Add(new FamilyMember() { Name = "John Doe", Age = 42 });
			family1.Members.Add(new FamilyMember() { Name = "Jane Doe", Age = 39 });
			family1.Members.Add(new FamilyMember() { Name = "Sammy Doe", Age = 13 });
			families.Add(family1);

			Family family2 = new Family() { Name = "The Moe's" };
			family2.Members.Add(new FamilyMember() { Name = "Mark Moe", Age = 31 });
			family2.Members.Add(new FamilyMember() { Name = "Norma Moe", Age = 28 });
			families.Add(family2);

			trvFamilies.ItemsSource = families;
		}
	}

	public class Family
	{
		public Family()
		{
			this.Members = new ObservableCollection<FamilyMember>();
		}

		public string Name { get; set; }

		public ObservableCollection<FamilyMember> Members { get; set; }
	}

	public class FamilyMember
	{
		public string Name { get; set; }

		public int Age { get; set; }
	}
}

Wie bereits erwähnt, werden die beiden Vorlagen als Teil der TreeView-Ressourcen deklariert, so dass das TreeView die passende Vorlage, basierend auf den Datentyp, der gerade angezeigt wird, auswählt. Die Vorlage, die für den Typ Familie definiert ist, ist eine hierarchische Vorlage, die die Mitglieder Eigenschaft verwendet, um seine Familienmitglieder zu zeigen.

Die für den Typ FamilyMember definierte Vorlage ist ein reguläres DataTemplate, da dieser Typ keine untergeordneten Elemente hat. Wenn wir jedoch gewollt hätten, dass jedes Familienmitglied eine Sammlung seiner Kinder und möglicherweise der Kinder seiner Kinder beinhalten würde, hätten wir stattdessen eine hierarchische Vorlage verwendet.

In beiden Vorlagen verwenden wir ein Bild, das entweder eine Familie oder ein Familienmitglied darstellt, und dann zeigen wir einige interessante Daten darüber, wie beispielsweise die Anzahl der Familienmitglieder oder das Alter der Person.

Im zugrundeligenden Code, dem "Code-Behind" erstellen wir einfach zwei Family-Instanzen, füllen sie jeweils mit einer Gruppe von Mitgliedern und fügen dann jede der Familien zu einer Liste hinzu, die dann als Elementquelle für die TreeView verwendet wird.

Zusammenfassung

Durch die Datenbindung ist das TreeView sehr anpassbar und mit der Fähigkeit, mehrere Vorlagen für das Rendern verschiedener Datentypen anzugeben, sind die Möglichkeiten nahezu unbegrenzt.