Delen via

Hoe te: Eenvoudige of complexe boomweergaven maken

In dit voorbeeld ziet u hoe u eenvoudige of complexe TreeView besturingselementen maakt.

Een TreeView bestaat uit een hiërarchie van TreeViewItem besturingselementen, die eenvoudige teksttekenreeksen kunnen bevatten en ook complexere inhoud, zoals Button besturingselementen of een StackPanel met ingesloten inhoud. U kunt de TreeView inhoud expliciet definiëren of een gegevensbron de inhoud kan leveren. Dit onderwerp bevat voorbeelden van deze concepten.

Voorbeeld

De eigenschap Header van de TreeViewItem bevat de inhoud die het TreeView voor dat item weergeeft. Een TreeViewItem kan ook TreeViewItem besturingselementen hebben als onderliggende elementen en u kunt deze onderliggende elementen definiëren met behulp van de eigenschap Items.

In het volgende voorbeeld ziet u hoe u expliciet TreeViewItem inhoud definieert door de eigenschap Header in te stellen op een tekenreeks.

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

In het volgende voorbeeld ziet u hoe u onderliggende elementen van een TreeViewItem definieert door Items te definiëren die Button besturingselementen zijn.

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

In het volgende voorbeeld ziet u hoe u een TreeView maakt waarin een XmlDataProviderTreeViewItem inhoud biedt en een HierarchicalDataTemplate het uiterlijk van de inhoud definieert.

<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}"/>

In het volgende voorbeeld ziet u hoe u een TreeView maakt waar de TreeViewItem inhoud DockPanel controle-elementen bevat die ingebedde inhoud bevatten.

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

Zie ook

  • Last updated on