A simple TreeView example

Dari artikel yang kita lihat sebelumnya, TreeView WPF dapat digunakan dengan cara yang mudah, yaitu dengan menambahkan objek TreeViewItem, bisa dari kode maupun langsung dari XAML-nya. Hal ini memang mudah, seperti yang bisa kamu lihat di contoh berikut ini:

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

Kita cukup mendeklarasikan objek TreeViewItem langsung di dalam XAML, dengan struktur yang sama seperti yang kita mau tampilkan, dimana tag pertama adalah anak dari kontrol TreeView dan anak objeknya juga merupakan tag anak dari objek induknya. Kita menggunakan properti Header untuk menampilkan teks yang kita inginkan untuk setiap node. Secara default, TreeViewItem tidak diperluas, jadi untuk menampilkan strukturnya, properti IsExpanded dapat digunakan untuk memperluas item pada dua induk pada contoh.

TreeViewItem dengan gambar dan kontrol lainnya

Header ini properti yang cukup menarik. Seperti yang bisa kamu lihat, Kita cukup menulis teks dan itu dapat langsung ditampilkan tanpa melakukan hal lainnya, ini karena WPF berbuat baik ke kita - secara internal, teks Header dikemas dalam kontrol TextBlock, tanpa memaksa kita untuk melakukannya sendiri. Hal ini menunjukkan bahwa kita dapat memasukkan apa saja yang kita inginkan ke dalam properti Header dan membuat TreeView menampilkannya - ini adalah contoh kenapa kontrol WPF dapat diubah sesuai kebutuhan dengan mudah.

Salah satu permintaan yang sering muncul dari orang-orang yang berlatar belakang WinForms atau pustaka UI lainnya adalah kemampuan untuk menampilkan gambar di sebelah label teks dari item TreeView. Hal ini cukup mudah dilakukan dengan WinForms, karena TreeView dirancang untuk skenario ini. Hal ini sedikit lebih kompleks di TreeView WPF, namun kita bisa mendapatkan fleksibilitas yang jauh lebih besar dibandingkan dengan TreeView dari WinForms. Berikut ini adalah contohnya:

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

Kita melakukan beberapa hal disini untuk menampilkan fleksibilitas yang bisa kamu dapatkan: mewarnai anak item, menambah gambar, dan bahkan tombol untuk item induk. Kita bisa melakukan semuanya ini dengan menulisnya dengan marka sederhana, namun seperti yang bisa kita lihat dari kode contoh, ada kekurangannya: Banyaknya baris kode XAML hanya untuk enam node secara keseluruhan!

Ringkasan

Walaupun TreeView dapat ditulis semuanya hanya dengan marka, seperti yang kita lakukan dari contoh di atas, ini bukanlah pendekatan yang terbaik untuk situasi pada umumnya, dan walaupun kita bisa lakukan ini di belakang kode, hal ini akan menghasilkan baris kode yang lebih banyak. Jadi salah satu solusinya adalah data binding, yang di mana kita akan lihat di artikel selanjutnya.