共用方式為


HOW TO:建立簡單或複雜的 TreeView

這個範例說明如何建立簡單或複雜的 TreeView 控制項。

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

範例

TreeViewItemHeader 屬性含有 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 >
      <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}"/>

下列範例示範如何建立 TreeView,其中的 TreeViewItem 內容包含有內嵌內容的 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>

請參閱

參考

TreeView

TreeViewItem

概念

TreeView 概觀

其他資源

TreeView HOW TO 主題