Gambaran Umum TreeView

Artikel
06/02/2023

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 ItemsControl adalah yang menumpuk item dengan menggunakan TreeViewItem kontrol. 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 hierarki TreeViewItem kontrol. TreeViewItem Kontrol adalah yang HeaderedItemsControl memiliki Header dan Items koleksi.

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 item bukan TreeViewItem kontrol, item secara otomatis diapit oleh TreeViewItem kontrol saat TreeView kontrol ditampilkan.

Memperluas dan Menciutkan TreeViewItem

Jika pengguna memperluas TreeViewItem, IsExpanded properti 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 dipanggil BringIntoView pada TreeViewItem kontrol, TreeViewItem dan kontrol induknya TreeViewItem diperluas. TreeViewItem Jika tidak terlihat atau sebagian terlihat, TreeView gulir untuk membuatnya terlihat.

Pemilihan TreeViewItem

Saat pengguna mengklik TreeViewItem kontrol untuk memilihnya, Selected peristiwa terjadi, dan propertinya IsSelected diatur ke true. Yang TreeViewItem juga menjadi SelectedItem kontrol TreeView . Sebaliknya, ketika pilihan berubah dari TreeViewItem kontrol, peristiwanya Unselected terjadi dan propertinya 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 mengklik TreeViewItem kontrol atau ketika IsSelected properti diatur ke true pada TreeViewItem kontrol.

SelectedValuePath Gunakan properti 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 nilainya bisa jika null aplikasi atau pengguna belum membuat pilihan sebelumnya atau saat ini.

Gaya TreeView

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

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

Contoh berikut menunjukkan cara mengatur Foreground nilai properti dan FontSize untuk TreeViewItem kontrol 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 DockPanel kontrol.

<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