Dela via

Gör så här: Skapa enkla eller komplexa TreeViews

Det här exemplet visar hur du skapar enkla eller komplexa TreeView kontroller.

En TreeView består av en hierarki med TreeViewItem kontroller, som kan innehålla enkla textsträngar och även mer komplext innehåll, till exempel Button kontroller eller en StackPanel med inbäddat innehåll. Du kan uttryckligen definiera TreeView innehåll eller så kan en datakälla tillhandahålla innehållet. Det här avsnittet innehåller exempel på dessa begrepp.

Exempel

Egenskapen Header för TreeViewItem innehåller det innehåll som TreeView visar för objektet. En TreeViewItem kan också ha TreeViewItem kontroller som underordnade element och du kan definiera dessa underordnade element med hjälp av egenskapen Items.

I följande exempel visas hur du explicit definierar TreeViewItem innehåll genom att ange egenskapen Header till en textsträng.

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

I följande exempel visas hur du definierar underordnade element i en TreeViewItem genom att definiera Items som Button-kontroller.

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

I följande exempel visas hur du skapar en TreeView där en XmlDataProvider tillhandahåller TreeViewItem innehåll och en HierarchicalDataTemplate definierar innehållets utseende.

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

I följande exempel visas hur du skapar en TreeView där TreeViewItem-innehållet inkluderar DockPanel-kontroller som har inbäddat innehåll.

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

Se även

  • Last updated on