共用方式為

如何：建立簡單或複雜的 TreeView

  • 發行項

此範例示範如何建立簡單或複雜的 TreeView 控制項。

TreeView包含控制項階層 TreeViewItem ，其中包含簡單的文字字串，以及更複雜的內容，例如 Button 控制項或 StackPanel 內嵌內容的 。 您可以明確定義 TreeView 內容，或資料來源可以提供內容。 本主題提供這些概念的範例。

範例

Header的 TreeViewItem 屬性包含針對該專案顯示的內容 TreeView 。 TreeViewItem也可以將 TreeViewItem 控制項當做其子專案，而且您可以使用 屬性來定義這些子專案 Items 。

下列範例示範如何將 屬性設定 Header 為文字字串，以明確定義 TreeViewItem 內容。

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

下列範例示範如何藉由定義 控制項 Button 來定義 Items 的 TreeViewItem 子專案。

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

下列範例示範如何建立 TreeView ，其中 XmlDataProvider 提供 TreeViewItem 內容，以及 HierarchicalDataTemplate 定義內容的外觀。

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

下列範例示範如何建立 TreeViewTreeViewItem 內容包含 DockPanel 內嵌內容的控制項。

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

另請參閱