This article is currently in the process of being translated into Indonesian (~98% done).
TreeView, data binding and multiple templates
TreeView WPF mampu melakukan data binding, seperti semua kontrol WPF lainnya, namun karena TreeView memiliki hierarki, seringkali DataTemplate normal tidak akan cukup, Jadi kita menggunakan HierarchicalDataTemplate, yang dapat membuat template pada node itu sendiri, selagi mengatur properti mana yang akan digunakan sebagai sumber untuk node pada anak-anak item.
Dasar TreeView dengan penghubung data
Pada contoh berikut ini, Kita bisa lihat betapa mudahnya untuk memulai dengan HierarchicalDataTemplate:
<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; }
}
}

Di dalam marka XAML, sebuah HierarchicalDataTemplate digunakan sebagai ItemTemplate untuk TreeView. Properti Items digunakan untuk mendaftarkan anak-anak item dengan cara mengatur properti ItemsSource pada template, dan didalamnya kita dapat menulis template yang aktual, dimana sekarang ini hanya terdiri dari TextBlock yang dihubungkan ke properti Title.
Contoh pertama ini sangatlah sederhana, mungkin kita bisa cukup menambahkan item TreeView secara manual daripada mengadakan set objek-objek dan menghubungkannya. Namun, semakin kompleksnya data, kelebihan dari menggunakan data binding akan terlihat semakin jelas.
Banyak template untuk tipe-tipe yang berbeda
Untuk contoh selanjutnya, dengan kasus yang sedikit lebih kompleks, dimana kita mau menampilkan bagan untuk keluarga dan anggotanya. Sebuah keluarga akan ditampilkan dengan satu cara, dan setiap anggotanya ditampilkan dengan cara lain. Hal ini bisa dilakukan dengan menulis dua template yang berbeda dan mengaturnya sebagai sumber untuk bagan (atau Window/Aplikasi - tergantung kebutuhan mu), dan mengizinkan TreeView untuk mengambil template yang benar berdasarkan tipe data yang dihubungkan.
Berikut ini adalah kodenya - penjelasan di bagian setelahnya:
<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; }
}
}

Dari sebelumnya, dua template dideklarasikan sebagai bagian sumber untuk TreeView, mengizinkan TreeView untuk memilih template yang sesuai berdasarkan tipe data yang mau ditampilkan. Template yang ditulis untuk tipe Family adalah template hierarki, properti Members digunakan untuk menampilkan anggota keluarga.
Template yang ditulis untuk tipe FamilyMember adalah DataTemplate regular, karena tipe ini tidak memiliki anak item. Namun, jika kita ingin setiap FamilyMember menampilkan anaknya dan mungkin anaknya anak tersebut, maka kita gunakan template hierarki.
Pada dua template, kita menggunakan gambar untuk menampilkan sebuah keluarga atau anggota keluarga, dan kita menampilkan data menarik lainnya, seperti jumlah anggota keluarga atau umur anggotanya.
Dari belakang kode, kita membuat dua instansi Family, mengisi semuanya dengan beberapa anggota, dan menambahkan setiap keluarga ke dalam list, yang di mana ini akan digunakan sebagai sumber item untuk TreeView.
Ringkasan
Dengan menggunakan data binding, TreeView sangat mampu untuk diubah sesuai kebutuhan dan dengan kemampuan untuk memiliki banyak template untuk menampilkan tipe data yang berbeda-beda, potensinya hampir tidak terbatas.