Treeview merupakan salah satu jenis control untuk menampilkan data secara hirarki. Data yang ditampilkan dapat dilakukan secara statis tanpa terhubung ke sumber data atau dapat ditampilkan secara dinamis yang terhubung ke sebuah sumber data. Dalam posting kali ini saya akan memberikan contoh penggunaan Treeview untuk menampilkan data hirarki secara dinamis dengan sumber data berasal dari database.
Versi WPF yang digunakan dalam contoh ini yaitu versi 4.5, sedangkan toolsnya yaitu Visual Studio 2012 atau Visual Studio 2013. RDMS yang digunakan yaitu SQL Server, anda dapat menggunakan edisi SQL Server apapun untuk membuat contoh penggunaan kontrol treeview ini. Database yang digunakan yaitu database contoh yang cukup legendaris, yaitu Northwind, script database tersebut dapat dicari di internet. Sedangkan untuk data access frameworknya menggunakan Entity Framework. Ok, mari kita lakukan langkah demi langkah.
1. Buat sebuah WPF Application project template.
2. Tambahkan item ADO.NET Entity Data Model ke dalam project tersebut dan hubungkan ke database Northwind yang sudah diinstal sebelumnya. Pilih tabel Customers, Orders, dan Order Details. Data yang akan ditampilkan di treeview merupakan data yang diambil dari ketiga tabel tersebut secara hirarki dengan 3 level. Level pertama atau root nya merupakan data Customers, level kedua data Orders, dan level ketiga data Order Details.
3. Tambahkan kode xaml berikut ini kedalam MainWindow.xaml. Kode tersebut merupakan Data Template yang disimpan di Window Resources.
1: <DataTemplate x:Key="odetails">
2: <StackPanel Orientation="Horizontal" Margin="2">
3: <TextBlock Text="{Binding ProductID}"
4: FontSize="12" Margin="4"/>
5: <TextBlock Text="{Binding UnitPrice, StringFormat='c'}"
6: FontSize="12" Margin="4"/>
7: </StackPanel>
8: </DataTemplate>
Data template diatas dibuat untuk menampilkan data pada level hirarki yang paling akhir, yaitu level ketiga berupa data ProductID dan UnitPrice dari tabel Order Details.
4. Tambahkan data template berikutnya setelah data template yang sudah ditambahkan pada langkah-3.
1: <HierarchicalDataTemplate x:Key="orders"
2: ItemsSource="{Binding Order_Details}"
3: ItemTemplate="{StaticResource odetails}">
4: <StackPanel Orientation="Horizontal" Margin="2">
5: <TextBlock Text="{Binding OrderID}" FontWeight="Bold"
6: FontSize="12" Margin="4"/>
7: <TextBlock Text="{Binding OrderDate, StringFormat='dd/MMM/yyyy'}"
8: FontWeight="Bold"
9: FontSize="12" Margin="4"/>
10: </StackPanel>
11: </HierarchicalDataTemplate>
Data template pada langkah ini merupakan HierarchicalDataTemplate yang digunakan untuk menampilkan data pada level-2 yaitu data OrderID dan OrderDate. Perhatikan properti ItemsSource, sumber data yang digunakan berasal dari tabel Order Details, sedangkan data yang ditampilkan di level tersebut berasal dari tabel Order. Kenapa sumber datanya bukan berasal dari tabel Order? Perhatikan diagram EF, entity Order_Details memiliki navigation properti Order yang berarti bahwa satu atau lebih data Order_Details merujuk kepada salah satu data Order.
Properti ItemTemplate merujuk kepada key DataTemplate yang dibuat pada langkah-3, hal tersebut menandakan bahwa level-2 pada langkah ini akan memiliki sub level berupa level-3 dengan detail data yang sudah didefinisikan pada Data Template langkah-3.
5. Tambahkan HierarchicalDataTemplate berikut ini setelah HierarchicalDataTemplate yang dibuat pada langkah-4.
1: <HierarchicalDataTemplate x:Key="customers"
2: ItemsSource="{Binding Orders}"
3: ItemTemplate="{StaticResource orders}">
4: <StackPanel Orientation="Horizontal" Margin="2">
5: <TextBlock Text="{Binding CustomerID}" FontWeight="Bold"
6: FontSize="12" Margin="4"/>
7: </StackPanel>
8: </HierarchicalDataTemplate>
Pada langkah-5 ini item source yang digunakan berasal dari tabel Orders sedangkan untuk item template merujuk kepada data template yang sudah dibuat pada langkah-4. Penjelasan penggunaan item source dan item template sudah dijelaskan sebelumnya (perhatikan kembali navigation properti di diagram EF untuk masing-masing entity). Langkah-5 ini merupakan langkah terakhir untuk menampilkan root level (level-1) beserta sub level nya (level-2).
6. Tambahkan control TreeView ke dalam Grid layout.
1: <Grid>
2: <TreeView x:Name="tvCustomerOrder"
3: ItemTemplate="{StaticResource customers}"
4: SelectedItemChanged="tvCustomerOrder_SelectedItemChanged"/>
5: </Grid>
Item template treeview tersebut merujuk kepada data template level-1 (root level) yang dibuat pada langkah-5. Selain itu juga ditambahkan event handler untuk event SelectedItemChanged untuk mendapatkan data yang di klik pada item treeview di setiap level nya.
7. Tambahkan kode berikut ini ke dalam code behind MainWindow.xaml.cs
1: private List<Customer> CustomersData()
2: {
3: using (var db = new NorthwindEntities())
4: {
5: var custOrder = from c in db.Customers.Include("Orders")
6: .Include("Orders.Order_Details")
7: select c;
8: return custOrder.ToList();
9: }
10: }
Prosedur tersebut digunakan untuk mengambil data dari ketiga tabel sekaligus dengan teknik Eager Loading. Perhatikan perintah Include, parameter didalamnya merujuk kepada navigation properti yang dimiliki oleh Customer entity dan Order entity.
8. Tambahkan kode berikut ini untuk handle event Window_Loaded dari MainWindow. Tentunya assignment event handler diasumsikan sudah dilakukan di xaml nya.
1: private void Window_Loaded(object sender, RoutedEventArgs e)
2: {
3: tvCustomerOrder.ItemsSource = CustomersData();
4: }
9. Tambahkan kode berikut ini untuk handle event SelectedItemChanged dari kontrol treeview.
1: private void tvCustomerOrder_SelectedItemChanged(
2: object sender, RoutedPropertyChangedEventArgs<object> e)
3: {
4: var tree = sender as TreeView;
5: var item = tree.SelectedItem;
6:
7: var data = item as Customer;
8: if (data != null)
9: {
10: MessageBox.Show(data.CustomerID);
11: }
12:
13: var dataOrd = item as Order;
14: if (dataOrd != null)
15: {
16: MessageBox.Show(dataOrd.OrderID.ToString());
17: }
18:
19: var dataDetails = item as Order_Detail;
20: if (dataDetails != null)
21: {
22: MessageBox.Show(dataDetails.ProductID.ToString());
23: }
24: }
10. Jalankan aplikasi tersebut. Hasilnya dapat dilihat pada screen shot berikut ini.
Selamat mencoba :-)