Gambaran Umum TreeView

2025-05-07

Kontrol TreeView menyediakan cara untuk menampilkan informasi dalam struktur hierarkis dengan menggunakan simpul yang dapat diciutkan. Topik ini memperkenalkan TreeView kontrol dan TreeViewItem , dan memberikan contoh sederhana penggunaannya.

Apa itu TreeView?

TreeView adalah suatu ItemsControl yang menyusun item secara bersarang dengan menggunakan pengontrol TreeViewItem. Contoh berikut membuat sebuah 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

TreeView kontrol berisi kontrol TreeViewItem yang terstruktur dalam hierarki. TreeViewItem kontrol 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.

Jika sebuah item bukanlah TreeViewItem kontrol, maka secara otomatis item tersebut diapit oleh TreeViewItem kontrol saat TreeView kontrol ditampilkan.

Memperluas dan Menciutkan 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, kontrol TreeViewItem dan kontrol induknya TreeViewItem akan mengembang. TreeViewItem tidak terlihat atau hanya sebagian terlihat, maka TreeView akan menggulir untuk membuatnya terlihat.

Pemilihan TreeViewItem

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

Properti SelectedItem pada TreeView kontrol adalah properti baca-saja; oleh karena itu, Anda tidak dapat secara eksplisit mengaturnya. Properti SelectedItem diatur jika pengguna mengatur dengan mengklik kontrol TreeViewItem atau ketika properti IsSelected diatur 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 penanganan aktivitas pada SelectedItemChanged peristiwa untuk menentukan kapan perubahan yang dipilih TreeViewItem . RoutedPropertyChangedEventArgs<T> yang disediakan untuk penanganan aktivitas menentukan OldValue, yang merupakan pilihan sebelumnya, dan NewValue, yang merupakan pilihan saat ini. Salah satu nilai dapat berupa null jika aplikasi atau pengguna belum membuat pilihan sebelumnya atau saat ini.

Gaya Tampilan Pohon

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 menentukan ukuran objek StackPanel yang menampilkan TreeView. Jika konten yang harus ditampilkan lebih besar dari area tampilan, maka ScrollViewer akan ditampilkan secara otomatis sehingga pengguna dapat menggulir konten TreeView tersebut.

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

Contoh berikut menunjukkan cara mengatur nilai properti Foreground dan FontSize 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 Tampilan Pohon

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 TreeViewItem sebagai CheckBox dan TextBlock yang keduanya diapit 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>

Bagikan melalui