Aracılığıyla paylaş

Nasıl yapılır: Basit veya Karmaşık TreeViews Oluşturma

Bu örnekte basit veya karmaşık TreeView denetimlerinin nasıl oluşturulacağı gösterilmektedir.

TreeView, basit metin dizeleri ve TreeViewItem denetimleri veya eklenmiş içeriğe sahip bir Button gibi daha karmaşık içerik içerebilen StackPanel denetimleri hiyerarşisini içerir. TreeView içeriğini açıkça tanımlayabilirsiniz veya bir veri kaynağı içeriği sağlayabilir. Bu konu başlığında bu kavramlara örnekler verilmiştir.

Örnek

Header özelliği, TreeViewItem içindeki, TreeView'nin bu öğe için görüntülediği içeriği barındırır. TreeViewItem'ın alt öğeleri olarak TreeViewItem denetimleri de bulunabilir, ve bu alt öğeleri Items özelliği ile tanımlayabilirsiniz.

Aşağıdaki örnekte, TreeViewItem özelliğini bir metin dizesine ayarlayarak Header içeriğinin açıkça nasıl tanımlanacağı gösterilmektedir.

<TreeView>
  <TreeViewItem Header="Employee1">
    <TreeViewItem Header="Jesper"/>
    <TreeViewItem Header="Aaberg"/>
    <TreeViewItem Header="12345"/>
  </TreeViewItem>
 <TreeViewItem Header="Employee2">
    <TreeViewItem Header="Dominik"/>
    <TreeViewItem Header="Paiha"/>
    <TreeViewItem Header="98765"/>
  </TreeViewItem>
</TreeView>

Aşağıdaki örnek, TreeViewItem denetimleri olan Items'i tanımlayarak bir Button'ın alt öğelerinin nasıl tanımlanacağını göstermektedir.

<TreeView>
  <TreeViewItem Header ="Employee1">
    <TreeViewItem.Items>
      <Button>Jesper</Button>
      <Button>Aaberg</Button>
      <Button>12345</Button>
    </TreeViewItem.Items>
  </TreeViewItem>
  <TreeViewItem Header="Employee2">
    <TreeViewItem.Items>
      <Button>Dominik</Button>
      <Button>Paiha</Button>
      <Button>98765</Button>
    </TreeViewItem.Items>
  </TreeViewItem>
</TreeView>

Aşağıdaki örnekte, bir TreeViewXmlDataProvider içerik sağladığı ve TreeViewItem içeriğin görünümünü tanımladığı bir HierarchicalDataTemplate nasıl oluşturulacağı gösterilmektedir.

<XmlDataProvider x:Key="myEmployeeData" XPath="/EmployeeData">
  <x:XData>
    <EmployeeData xmlns="">
      <EmployeeInfo>
        <EmployeeInfoData>Employee1</EmployeeInfoData>
        <Item Type="FirstName">Jesper</Item>
        <Item Type="LastName">Aaberg</Item>
        <Item Type="EmployeeNumber">12345</Item>
      </EmployeeInfo>
      <EmployeeInfo>
        <EmployeeInfoData>Employee2</EmployeeInfoData>
        <Item Type="FirstName">Dominik</Item>
        <Item Type="LastName">Paiha</Item>
        <Item Type="EmployeeNumber">98765</Item>
      </EmployeeInfo>
    </EmployeeData>
  </x:XData>
</XmlDataProvider>

<HierarchicalDataTemplate DataType="EmployeeInfo" 
  ItemsSource ="{Binding XPath=Item}">
  <TextBlock Text="{Binding XPath=EmployeeInfoData}" />
</HierarchicalDataTemplate>

<TreeView ItemsSource="{Binding Source={StaticResource myEmployeeData}, 
  XPath=EmployeeInfo}"/>

Aşağıdaki örnekte, TreeView içeriğinin ekli içeriğe sahip TreeViewItem denetimler içerdiği bir DockPanel nasıl oluşturulacağı gösterilmektedir.

<TreeView>
  <TreeViewItem Header="Animals">
    <TreeViewItem.Items>
    <DockPanel>
      <Image Source="data\fish.png"/>
      <TextBlock Margin="5" Foreground="Brown"
                 FontSize="12">Fish</TextBlock>
    </DockPanel>
    <DockPanel>
      <Image Source="data\dog.png"/>
      <TextBlock Margin="5" Foreground="Brown"
                 FontSize="12">Dog</TextBlock>
    </DockPanel>
    <DockPanel>
      <Image Source="data\cat.png"/>
      <TextBlock Margin="5" Foreground="Brown"
                 FontSize="12">Cat</TextBlock>
    </DockPanel>
  </TreeViewItem.Items>
  </TreeViewItem>      
</TreeView>

Ayrıca bakınız

  • Last updated on