Tampilan Pohon

TreeView Kontrol menampilkan informasi dalam struktur hierarkis dengan menggunakan simpul yang dapat diciutkan. Artikel ini memperkenalkan TreeView kontrol dan TreeViewItem , dan memberikan contoh penggunaannya.

Ilustrasi berikut adalah contoh TreeView kontrol yang memiliki kontrol berlapis TreeViewItem :

Apa itu TreeView?

TreeView ItemsControl adalah TreeViewItem yang mengelompokkan item dengan menggunakan pengendali. Contoh berikut membuat TreeView.

<TreeView Name="myTreeViewEvent" >
  <TreeViewItem Header="Employee1" IsSelected="True">
    <TreeViewItem Header="Jesper Aaberg"/>
    <TreeViewItem Header="Employee Number">
      <TreeViewItem Header="12345"/>
    </TreeViewItem>
    <TreeViewItem Header="Work Days">
      <TreeViewItem Header="Monday"/>
      <TreeViewItem Header="Tuesday"/>
      <TreeViewItem Header="Thursday"/>
    </TreeViewItem>
  </TreeViewItem>
  <TreeViewItem Header="Employee2">
    <TreeViewItem Header="Dominik Paiha"/>
    <TreeViewItem Header="Employee Number">
      <TreeViewItem Header="98765"/>
    </TreeViewItem>
    <TreeViewItem Header="Work Days">
      <TreeViewItem Header="Tuesday"/>
      <TreeViewItem Header="Wednesday"/>
      <TreeViewItem Header="Friday"/>
    </TreeViewItem>
  </TreeViewItem>
</TreeView>

Membuat TreeView

Kontrol TreeView mengandung hierarki kontrol TreeViewItem. Kontrol TreeViewItem adalah HeaderedItemsControl yang memiliki Header dan koleksi Items.

Jika Anda mendefinisikan TreeView dengan menggunakan Extensible Application Markup Language (XAML), Anda dapat secara eksplisit menentukan Header konten TreeViewItem kontrol dan item yang membentuk koleksinya. Ilustrasi sebelumnya menunjukkan metode ini.

Anda juga dapat menentukan ItemsSource sebagai sumber data lalu menentukan HeaderTemplate dan ItemTemplate untuk menentukan TreeViewItem konten.

Untuk menentukan tata letak TreeViewItem kontrol, Anda juga dapat menggunakan HierarchicalDataTemplate objek. Untuk informasi selengkapnya dan contohnya, lihat Menggunakan SelectedValue, SelectedValuePath, dan SelectedItem.

Apabila sebuah item bukan merupakan TreeViewItem kontrol, item tersebut akan otomatis diapit oleh TreeViewItem kontrol saat TreeView kontrol ditampilkan.

Memperluas dan menyusutkan TreeViewItem

Jika pengguna memperluas TreeViewItem, properti IsExpanded diatur ke true. Anda juga dapat memperluas atau menciutkan TreeViewItem tanpa tindakan pengguna langsung dengan mengatur IsExpanded properti ke true (perluas) atau false (ciutkan). Ketika properti ini berubah, peristiwa Expanded atau Collapsed terjadi.

Ketika metode BringIntoView dipanggil pada kontrol TreeViewItem, TreeViewItem dan kontrol induknya TreeViewItem mengembang. Jika TreeViewItem tidak terlihat atau hanya terlihat sebagian, maka TreeView akan bergulir untuk membuatnya terlihat.

Pilih TreeViewItem

Saat pengguna mengklik kontrol TreeViewItem untuk memilihnya, event Selected terjadi, dan propertinya IsSelected diatur ke true. TreeViewItem juga menjadi SelectedItem dari kontrol TreeView. Sebaliknya, ketika pilihan berubah dari TreeViewItem kontrol, peristiwa Unselected nya terjadi dan propertinya IsSelected disetel ke false.

Properti SelectedItem pada TreeView kontrol adalah properti baca-saja, sehingga Anda tidak dapat mengaturnya secara eksplisit. Properti SelectedItem ditetapkan jika pengguna mengklik kontrol TreeViewItem atau ketika properti IsSelected ditetapkan ke true pada kontrol TreeViewItem.

Gunakan properti SelectedValuePath untuk menentukan SelectedValue dari SelectedItem. Untuk informasi selengkapnya, lihat Menggunakan SelectedValue, SelectedValuePath, dan SelectedItem.

Anda dapat mendaftarkan penangan peristiwa pada peristiwa SelectedItemChanged untuk menentukan kapan TreeViewItem yang dipilih berubah. RoutedPropertyChangedEventArgs<T> Yang disediakan untuk penanganan aktivitas menentukan OldValue, yang merupakan pilihan sebelumnya, dan NewValue, yang merupakan pilihan saat ini. Salah satu dari nilai tersebut dapat berupa null apabila aplikasi atau pengguna belum membuat pilihan baik sebelumnya maupun saat ini.

Penyesuaian gaya TreeView

Gaya default untuk kontrol TreeView menempatkannya di dalam objek StackPanel yang berisi kontrol ScrollViewer. Saat Anda mengatur properti Width dan Height untuk TreeView, nilai-nilai ini digunakan untuk mengatur ukuran objek StackPanel yang menampilkan TreeView. Jika konten yang ditampilkan lebih besar dari area tampilan, ScrollViewer ditampilkan secara otomatis sehingga pengguna dapat menggulir konten TreeView.

Untuk menyesuaikan tampilan TreeViewItem kontrol, atur Style properti ke kustom Style.

Contoh berikut menunjukkan cara mengatur properti Foreground dan FontSize nilai untuk kontrol TreeViewItem dengan menggunakan Style.

<Style TargetType="{x:Type TreeViewItem}">
  <Setter Property="Foreground" Value="Blue"/>
  <Setter Property="FontSize" Value="12"/>
</Style>

Menambahkan gambar dan konten lain ke item TreeView

Anda dapat menyertakan lebih dari satu objek dalam Header konten TreeViewItem. Untuk menyertakan beberapa objek dalam Header konten, sertakan objek di dalam kontrol tata letak, seperti Panel atau StackPanel.

Contoh berikut menunjukkan cara menentukan Header dari TreeViewItem sebagai CheckBox dan TextBlock yang keduanya berada di dalam kontrol DockPanel.

<TreeViewItem>
  <TreeViewItem.Header>
    <DockPanel>
      <CheckBox/>
      <TextBlock>
        TreeViewItem Text
      </TextBlock>
    </DockPanel>
  </TreeViewItem.Header>
</TreeViewItem>

Contoh berikut menunjukkan cara menentukan DataTemplate yang berisi Image dan TextBlock yang diapit dalam DockPanel kontrol. Anda dapat menggunakan DataTemplate untuk mengatur HeaderTemplate atau ItemTemplate untuk TreeViewItem.

<DataTemplate x:Key="NewspaperTVItem">
  <DockPanel>
    <Image Source="images\icon.jpg"/>
    <TextBlock VerticalAlignment="center" Text ="{Binding Path=Name}"/>
  </DockPanel>
</DataTemplate>

Tugas umum

Tabel berikut ini mencantumkan tugas umum untuk bekerja dengan kontrol TreeView:

Judul	Description
Membuat Tampilan Pohon yang Sederhana atau Kompleks	Pelajari cara membuat kontrol TreeView dengan struktur yang berbeda.
Gunakan SelectedValue, SelectedValuePath, dan SelectedItem	Pelajari cara bekerja dengan properti pilihan di TreeView.
Mengikat TreeView ke Data yang Memiliki Kedalaman yang Tidak Dapat Ditentukan	Pelajari cara mengikat TreeView ke data hierarkis dengan kedalaman yang tidak diketahui.
Meningkatkan Performa TreeView	Pelajari cara mengoptimalkan performa TreeView.
Menemukan TreeViewItem di TreeView	Pelajari cara menemukan TreeViewItem tertentu dalam TreeView.

Bagian terkait

Gambaran Umum Pengikatan Data

Gambaran Umum Templat Data

Referensi

TreeView TreeViewItem

Gaya dan templat

Anda dapat memodifikasi default ControlTemplate untuk memberi TreeView kontrol tampilan yang unik. Untuk informasi selengkapnya, lihat Apa itu gaya dan templat? dan Cara membuat templat untuk kontrol.

Bagian

Kontrol TreeView tidak memiliki bagian yang diberi nama.

Saat Anda membuat ControlTemplate untuk TreeView, templat Anda mungkin berisi ItemsPresenter dalam ScrollViewer. (Menampilkan ItemsPresenter untuk setiap item di TreeView; ScrollViewer memungkinkan pengguliran dalam kontrol). ItemsPresenter Jika bukan anak langsung dari ScrollViewer, Anda harus memberikan ItemsPresenter nama, ItemsPresenter.

Keadaan visual

Tabel berikut mencantumkan status visual untuk TreeView kontrol.

Nama VisualState	Nama VisualStateGroup	Description
Sah	StatusValidasi	Kontrol menggunakan Validation kelas dan properti terlampir Validation.HasError adalah false.
FokusTidakValid	StatusValidasi	Properti Validation.HasError terlampir adalah true dan kontrol memiliki fokus.
Tidak valid dan Tidak Difokuskan	StatusValidasi	Properti Validation.HasError terlampir adalah true dan kontrol tidak memiliki fokus.

Bagian dari TreeViewItem

Tabel berikut mencantumkan bagian-bagian yang diberi nama dari kontrol TreeViewItem.

Bagian	Tipe	Description
BAGIAN_Header	FrameworkElement	Elemen visual yang berisi konten TreeView header kontrol.

Keadaan TreeViewItem

Tabel berikut mencantumkan status visual untuk TreeViewItem kontrol.

Nama VisualState	Nama VisualStateGroup	Description
Biasa	CommonStates	Keadaan default.
MouseOver	CommonStates	Penunjuk mouse diposisikan di atas TreeViewItem.
Disabled	CommonStates	TreeViewItem dinonaktifkan.
Terfokus	FocusStates	TreeViewItem memiliki fokus.
Tidak fokus	FocusStates	TreeViewItem tidak memiliki fokus.
Expanded	ExpansionStates	TreeViewItem Kontrol diperluas.
Roboh	ExpansionStates	Kontrol TreeViewItem diciutkan.
HasItems	HasItemsStates	TreeViewItem memiliki item.
Tidak Ada Item	HasItemsStates	TreeViewItem tidak memiliki item.
Dipilih	SelectionStates	TreeViewItem telah dipilih.
Dipilih Tidak Aktif	SelectionStates	TreeViewItem dipilih tetapi tidak aktif.
Tidak dipilih	SelectionStates	TreeViewItem tidak dipilih.
Sah	StatusValidasi	Kontrol menggunakan Validation kelas dan properti terlampir Validation.HasError adalah false.
FokusTidakValid	StatusValidasi	Properti Validation.HasError terlampir adalah true jika kontrol memiliki fokus.
Tidak valid dan Tidak Difokuskan	StatusValidasi	Properti Validation.HasError terlampir memiliki true kontrol tidak memiliki fokus.

Bagian Terkait

Gambaran Umum Pengikatan DataGambaran Umum Templat Data