Aracılığıyla paylaş

TreeView'a Genel Bakış

TreeView denetimi, daraltılabilir düğümleri kullanarak bilgileri hiyerarşik bir yapıda görüntülemenin bir yolunu sağlar. Bu konu başlığında TreeView ve TreeViewItem denetimleri tanıtılmaktadır ve bunların kullanımına ilişkin basit örnekler sağlanmaktadır.

TreeView nedir?

TreeView, ItemsControl denetimlerini kullanarak öğeleri iç içe yerleştiren bir TreeViewItem'dir. Aşağıdaki örnek bir TreeViewoluşturur.

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

TreeView Oluşturma

TreeView denetimi, TreeViewItem denetimlerin hiyerarşisini içerir. TreeViewItem denetimi, HeaderedItemsControl ve bir Header koleksiyonu olan bir Items'dir.

Genişletilebilir Uygulama biçimlendirme dili (XAML) kullanarak bir TreeView tanımlıyorsanız, bir Header denetiminin TreeViewItem içeriğini ve koleksiyonunu oluşturan öğeleri açıkça tanımlayabilirsiniz. Önceki çizimde bu yöntem gösterilmektedir.

Ayrıca veri kaynağı olarak bir ItemsSource belirtebilir ve ardından HeaderTemplate içeriğini tanımlamak için bir ItemTemplate ve TreeViewItem belirtebilirsiniz.

TreeViewItem denetiminin düzenini tanımlamak için HierarchicalDataTemplate nesneleri de kullanabilirsiniz. Daha fazla bilgi ve örnek için bkz. SelectedValue, SelectedValuePath ve SelectedItemkullanma .

Bir öğe TreeViewItem denetimi değilse, TreeViewItem denetimi görüntülendiğinde otomatik olarak TreeView denetimiyle sarılır.

TreeViewItem'i Genişletme ve Daraltma

Kullanıcı bir TreeViewItemgenişletirse, IsExpanded özelliği trueolarak ayarlanır. Ayrıca, TreeViewItem özelliğini IsExpanded (genişletme) veya true (daraltma) olarak ayarlayarak doğrudan kullanıcı eylemi olmadan false genişletebilir veya daraltabilirsiniz. Bu özellik değiştiğinde, bir Expanded veya Collapsed olayı gerçekleşir.

BringIntoView yöntemi bir TreeViewItem denetiminde çağrıldığında, TreeViewItem ve ana TreeViewItem denetimleri genişletilir. Bir TreeViewItem görünmüyorsa veya kısmen görünüyorsa, TreeView'i kaydırarak görünür hale getirir.

TreeViewItem Seçimi

Kullanıcı seçmek için bir TreeViewItem denetimine tıkladığında, Selected olayı gerçekleşir ve IsSelected özelliği trueolarak ayarlanır. TreeViewItem ayrıca SelectedItem denetiminin TreeView olur. Buna karşılık, seçim bir TreeViewItem denetiminden değiştiğinde, Unselected olayı gerçekleşir ve IsSelected özelliği falseolarak ayarlanır.

SelectedItem denetimindeki TreeView özelliği salt okunur bir özelliktir; bu nedenle, açıkça ayarlayamazsınız. SelectedItem özelliği, kullanıcı bir TreeViewItem denetimine tıklarsa veya IsSelected özelliği true denetiminde TreeViewItem olarak ayarlandığında ayarlanır.

SelectedValuePath'nin bir SelectedValue'ini tanımlamak için SelectedItem özelliğini kullanın. Daha fazla bilgi için 'ı ve'i kullanarak SelectedValue, SelectedValuePath ve SelectedItem'e bakın.

Seçilen bir SelectedItemChanged ne zaman değiştiğini belirlemek için TreeViewItem olayına bir olay işleyicisi kaydedebilirsiniz. Olay işleyicisine sağlanan RoutedPropertyChangedEventArgs<T>, önceki seçim olan OldValueve geçerli seçim olan NewValuebelirtir. Uygulama veya kullanıcı önceki veya geçerli bir seçim yapmış değilse, iki değerden biri de null olabilir.

TreeView Stili

TreeView denetiminin varsayılan stili, StackPanel denetimini içeren bir ScrollViewer nesnesinin içine yerleştirilmesini sağlar. bir Widthiçin Height ve TreeView özelliklerini ayarladığınızda, bu değerler StackPanelgörüntüleyen TreeView nesnesini boyutlandırmak için kullanılır. Görüntülenecek içerik görüntüleme alanından büyükse, kullanıcının ScrollViewer içeriği kaydırabilmesi için otomatik olarak bir TreeView görüntülenir.

TreeViewItem denetiminin görünümünü özelleştirmek için Style özelliğini özel bir Styleolarak ayarlayın.

Aşağıdaki örnekte, Foregroundkullanarak bir FontSize denetimi için TreeViewItem ve Style özellik değerlerinin nasıl ayarlanacağı gösterilmektedir.

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

TreeView Öğelerine Görüntü ve Diğer İçerik Ekleme

Header'in TreeViewItem içeriğine birden fazla nesne ekleyebilirsiniz. Header içeriğe birden çok nesne eklemek için, nesneleri Panel veya StackPanelgibi bir düzen denetiminin içine alın.

Aşağıdaki örnekte, bir HeaderTreeViewItem bir CheckBox ve her ikisi de bir TextBlock denetimi içine alınmış DockPanel olarak nasıl tanımlanacağı gösterilmektedir.

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

Aşağıdaki örnekte, DataTemplate içeren bir Image ve TextBlock denetimi içine alınmış bir DockPanel nasıl tanımlanacağı gösterilmektedir. Bir DataTemplateiçin HeaderTemplate veya ItemTemplate'yi ayarlamak amacıyla bir TreeViewItem kullanabilirsiniz.

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

Ayrıca bakınız