Aracılığıyla paylaş

TreeView

TreeView denetimi, daraltılabilir düğümleri kullanarak bilgileri hiyerarşik bir yapıda görüntüler. Bu makale, TreeView ve TreeViewItem denetimlerini tanıtmakta ve bunların kullanımına ilişkin örnekler sunmaktadır.

Aşağıdaki çizim, içinde iç içe geçmiş TreeView denetimleri barındıran bir TreeViewItem denetiminin örneğidir:

WPF'de ağaç görünümü denetiminin ekran görüntüsü.

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

TreeView kontrolü, bir TreeViewItem denetim hiyerarşisi içerir. TreeViewItem denetimi, bir HeaderedItemsControl için bir Header ve bir Items koleksiyonu içerir.

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

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

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

TreeViewItem'i genişletme ve daraltma

Kullanıcı bir TreeViewItem öğesini genişletirse, IsExpanded özelliği true olarak ayarlanır. Ayrıca, özelliğini TreeViewItem (genişlet) veya (daralt) olarak ayarlayarak IsExpanded doğrudan kullanıcı eylemi olmadan öğesini true genişletebilir veya false 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 kontrolü ve onun üst TreeViewItem denetimleri genişler. bir TreeViewItem görünür değilse veya kısmen görünüyorsa, TreeView onu görünür hale getirmek için kaydırılır.

Bir TreeViewItem seçin

Kullanıcı bir TreeViewItem denetimini seçmek için tıkladığında, Selected olayı gerçekleşir ve IsSelected özelliği true olarak ayarlanır. TreeViewItem aynı zamanda TreeView kontrolünün SelectedItem'si olur. Buna karşılık, seçim bir TreeViewItem denetimden değiştiğinde, Unselected olayı gerçekleşir ve IsSelected özelliği false olarak ayarlanır.

SelectedItem Denetimin TreeView özelliği salt okunur bir özellik olduğundan bunu açıkça ayarlayamazsınız. Özellik, kullanıcı TreeViewItem denetimine tıkladığında veya IsSelected özelliği TreeViewItem denetiminde true olarak ayarlandığında SelectedItem olarak ayarlanır.

SelectedValuePath özelliğini SelectedValueSelectedItem için kullanın. Daha fazla bilgi için bkz. SelectedValue, SelectedValuePath ve SelectedItem kullanma.

Seçilen TreeViewItem değiştiğinde bunu belirlemek için SelectedItemChanged olayına bir olay işleyicisi kaydedebilirsiniz. Etkinlik işleyicisine sağlanan RoutedPropertyChangedEventArgs<T>, önceki seçim OldValue ve geçerli seçim NewValue ile belirtilir. Uygulama veya kullanıcı önceki veya geçerli bir seçim yapmamışsa iki değerden biri de olabilir null .

TreeView'i Stille

Varsayılan stil, bir ScrollViewer denetimi içeren StackPanel nesnenin içine TreeView denetimini yerleştirir. Width ve Height özelliklerini bir TreeView için ayarladığınızda, bu değerler, TreeView öğesini gö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 içerikte gezinmesine imkân tanıyan bir ScrollViewer otomatik olarak görüntülenir ve kullanıcı TreeView içeriği kaydırabilir.

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

Aşağıdaki örnekte, Style kullanarak bir 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 resim ve diğer içerik ekleme

Bir TreeViewItem içeriğinde Header birden fazla nesne ekleyebilirsiniz. Birden çok nesneyi Header içeriğine eklemek için, nesneleri Panel gibi veya StackPanel gibi bir düzen denetiminin içine alın.

Aşağıdaki örnek, bir Header öğesi ve bir CheckBox olarak TreeViewItem'yi, her ikisi de bir DockPanel denetimi içinde olmak üzere nasıl tanımlayacağınızı gösterir.

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

Aşağıdaki örnek, bir DataTemplate, bir Image ve bir TextBlock öğesinin, bir DockPanel denetimi içine nasıl alınacağını ve tanımlanacağını göstermektedir. DataTemplate öğesini, TreeViewItem için bir HeaderTemplate veya ItemTemplate ayarlamak amacıyla kullanabilirsiniz.

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

Genel görevler

Aşağıdaki tabloda TreeView denetimiyle çalışmaya yönelik yaygın görevler listelenmiştir:

Başlık Description
Basit veya Karmaşık TreeViews Oluşturma Farklı yapılarla TreeView denetimleri oluşturmayı öğrenin.
SelectedValue, SelectedValuePath ve SelectedItem'ı kullanın TreeView'da seçim özellikleriyle çalışmayı öğrenin.
Belirsiz Derinliğe Sahip Verilere TreeView Bağlama TreeView'ı bilinmeyen derinlikte hiyerarşik verilere bağlamayı öğrenin.
TreeView Performansını Geliştirme TreeView performansını iyileştirmeyi öğrenin.
TreeView'da TreeViewItem bulma Bir TreeView içinde belirli bir TreeViewItem'ı bulmayı öğrenin.

Veri Bağlamaya Genel Bakış

Veri Şablon oluşturmaya genel bakış

Kaynak

TreeView TreeViewItem

Stiller ve şablonlar

Varsayılan ControlTemplate'yi, TreeView kontrolüne benzersiz bir görünüm vermek için değiştirebilirsiniz. Daha fazla bilgi için bkz. Stiller ve şablonlar nedir? ve Denetim için şablon oluşturma.

Parçalar

Denetimin TreeView adlandırılmış bir parçası yok.

için bir ControlTemplateTreeViewoluşturduğunuzda, şablonunuz içinde bir ItemsPresenterScrollVieweriçerebilir. (ItemsPresenter her öğeyi TreeView içinde görüntüler; ScrollViewer, denetimin içinde kaydırmayı etkinleştirir). Eğer ItemsPresenter doğrudan ScrollViewer'in alt öğesi değilse, ItemsPresenter adını ItemsPresenter olarak vermelisiniz.

Görsel durumlar

Aşağıdaki tabloda denetimin görsel durumları listelenmiştir TreeView .

VisualState Adı VisualStateGroup Adı Description
Geçerli DoğrulamaDurumları Denetim sınıfını Validation kullanır ve Validation.HasError ekli özelliği ise şeklindedir false.
GeçersizOdaklı DoğrulamaDurumları Ekli Validation.HasError özelliği true ve kontrol odakta.
InvalidUnfocused DoğrulamaDurumları Eklenmiş Validation.HasError özelliği true ama denetimin odağı yoktur.

TreeViewItem Bölümleri

Aşağıdaki tabloda, TreeViewItem denetiminin adlandırılmış bölümleri listelenir.

Bölüm Türü Description
PART_Header FrameworkElement Üst bilgi içeriğini TreeView denetimiyle içeren görsel bir öğe.

TreeViewItem Durumları

Aşağıdaki tabloda denetim için TreeViewItem görsel durumlar listelenmiştir.

VisualState Adı VisualStateGroup Adı Description
Sıradan OrtakDurumlar Varsayılan durum.
Mouseover OrtakDurumlar Fare imleci TreeViewItem üzerinde konumlandırılır.
Disabled OrtakDurumlar TreeViewItem devre dışı bırakıldı.
Focused FocusStates Odak noktası TreeViewItem var.
Odaklanmamış FocusStates TreeViewItem odak noktası yok.
Expanded ExpansionStates Denetim TreeViewItem genişletilir.
Çökmüş ExpansionStates Denetim TreeViewItem daraltıldı.
HasItems ÖğelerinDurumuVar TreeViewItem öğelere sahiptir.
Öğe Yok ÖğelerinDurumuVar TreeViewItem içinde öğe yok.
Seçilmiş Seçim Durumları TreeViewItem seçilidir.
SeçiliPasif Seçim Durumları TreeViewItem seçili ancak etkin değil.
Seçili değil Seçim Durumları TreeViewItem seçili değil.
Geçerli DoğrulamaDurumları Denetim sınıfını Validation kullanır ve Validation.HasError ekli özelliği ise şeklindedir false.
GeçersizOdaklı DoğrulamaDurumları Validation.HasError Ekli özelliğin true kontrolün odakta olup olmadığını belirttiği.
InvalidUnfocused DoğrulamaDurumları Validation.HasError Ekli özellik, true denetimin odağı yok.

Veri Bağlamaya Genel BakışVeri Şablon oluşturmaya genel bakış

  • Last updated on