TreeView Genel Bakışı

  • Makale

Denetim, TreeView daraltılabilir düğümler kullanarak bilgileri hiyerarşik bir yapıda görüntülemenin bir yolunu sağlar. Bu konu, ve TreeViewItem denetimlerini tanıtır TreeView ve kullanımına ilişkin basit örnekler sağlar.

TreeView nedir?

TreeViewdenetimleri kullanarak TreeViewItem öğeleri iç içe yerleştiren bir ItemsControl öğedir. 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

Denetim TreeView bir denetim hiyerarşisi TreeViewItem içerir. DenetimTreeViewItem, ve koleksiyonu olan Header bir Items denetimdirHeaderedItemsControl.

Genişletilebilir Uygulama biçimlendirme dili (XAML) kullanarak bir TreeView tanımlıyorsanız, bir TreeViewItem denetimin 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 içeriği tanımlamak TreeViewItem için ve ItemTemplateHeaderTemplate belirtebilirsiniz.

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

Öğe bir TreeViewItem denetim değilse, denetim görüntülendiğinde TreeView otomatik olarak bir TreeViewItem denetim içine alınır.

TreeViewItem'i Genişletme ve Daraltma

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

BringIntoView Yöntem bir TreeViewItem denetimde TreeViewItem çağrıldığında ve üst TreeViewItem denetimleri genişler. bir TreeViewItem görünür değilse veya kısmen görünür değilse, TreeView görünür hale getirmek için kaydırılır.

TreeViewItem Seçimi

Kullanıcı seçmek için bir TreeViewItem denetime tıkladığında, Selected olay gerçekleşir ve IsSelected özelliği olarak trueayarlanır. aynı TreeViewItem zamanda SelectedItem denetimin de olur TreeView . Buna karşılık, seçim bir TreeViewItem denetimden değiştiğinde, Unselected olayı gerçekleşir ve IsSelected özelliği olarak falseayarlanır.

SelectedItem Denetimdeki TreeView özellik salt okunur bir özelliktir; bu nedenle bunu açıkça ayarlayamazsınız. Kullanıcı SelectedItem bir TreeViewItem denetime tıklarsa veya IsSelected özellik denetimde TreeViewItem olarak ayarlandığında özelliği ayarlanırtrue.

SelectedValuePath bir değerini belirtmek SelectedValueSelectedItemiçin özelliğini kullanın. Daha fazla bilgi için bkz . SelectedValue, SelectedValuePath ve SelectedItem kullanma.

Seçilen TreeViewItem bir değişikliğin ne zaman değiştiğini belirlemek için olaya bir olay işleyicisi SelectedItemChanged kaydedebilirsiniz. RoutedPropertyChangedEventArgs<T> Olay işleyicisine sağlanan, önceki seçim olan öğesini ve NewValuegeçerli seçim olan öğesini belirtirOldValue. Uygulama veya kullanıcı önceki veya geçerli bir seçim yapılmamışsa iki değerden biri de olabilir null .

TreeView Stili

Denetimin varsayılan stiliTreeView, denetimi içeren ScrollViewer bir StackPanel nesnenin içine yerleştirir. için TreeViewve Height özelliklerini ayarladığınızdaWidth, bu değerler öğesini görüntüleyen TreeViewnesneyi boyutlandırmak StackPanel için kullanılır. Görüntülenecek içerik görüntüleme alanından büyükse, kullanıcının içerikte TreeView gezinebilmesi için otomatik olarak görüntülenirScrollViewer.

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

Aşağıdaki örnekte, kullanarak Stylebir TreeViewItem denetimin 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

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

Aşağıdaki örnekte, öğesinin HeaderTreeViewItemCheckBox olarak nasıl tanımlanacağı ve TextBlock her ikisi de bir DockPanel denetim içinde yer alır.

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

Aşağıdaki örnekte, ve içeren Image ve DataTemplate denetimin içine alınmış bir TextBlock öğesinin nasıl tanımlanacağı DockPanel gösterilmektedir. DataTemplate veya değerini ayarlamak HeaderTemplateItemTemplate için kullanabilirsinizTreeViewItem.

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

Ayrıca bkz.