TreeView'a Genel Bakış

Makale
12/19/2024

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, TreeViewItem denetimlerini kullanarak öğeleri iç içe yerleştiren bir ItemsControl'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, Header ve bir Items koleksiyonu olan bir HeaderedItemsControl'dir.

Genişletilebilir Uygulama biçimlendirme dili (XAML) kullanarak bir TreeView tanımlıyorsanız, bir TreeViewItem denetiminin Header 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 TreeViewItem içeriğini tanımlamak için bir HeaderTemplate ve ItemTemplate 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, TreeView denetimi görüntülendiğinde otomatik olarak TreeViewItem denetimiyle sarılır.

TreeViewItem'i Genişletme ve Daraltma

Kullanıcı bir TreeViewItemgenişletirse, IsExpanded özelliği trueolarak ayarlanır. Ayrıca, IsExpanded özelliğini true (genişletme) veya false (daraltma) olarak ayarlayarak doğrudan kullanıcı eylemi olmadan TreeViewItem 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 TreeView denetiminin SelectedItem 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.

TreeView denetimindeki SelectedItem ö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 TreeViewItem denetiminde true olarak ayarlandığında ayarlanır.

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

Seçilen bir TreeViewItem ne zaman değiştiğini belirlemek için SelectedItemChanged 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, ScrollViewer denetimini içeren bir StackPanel nesnesinin içine yerleştirilmesini sağlar. bir TreeViewiçin Width ve Height özelliklerini ayarladığınızda, bu değerler TreeViewgörüntüleyen StackPanel 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 TreeView içeriği kaydırabilmesi için otomatik olarak bir ScrollViewer 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, Stylekullanarak bir TreeViewItem denetimi için Foreground ve FontSize ö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

TreeViewItem'in Header 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 TreeViewItem Header bir CheckBox ve her ikisi de bir DockPanel denetimi içine alınmış TextBlock olarak nasıl tanımlanacağı gösterilmektedir.

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

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

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

Aracılığıyla paylaş