Share via


TreeView 概觀

更新:2007 年 11 月

TreeView 控制項使用可摺疊節點,提供在階層式結構中顯示資訊的方式。本主題將介紹 TreeViewTreeViewItem 控制項,並提供控制項用途的簡單範例。

這個主題包含下列章節。

  • 什麼是 TreeView
  • 建立 TreeView
  • 展開和摺疊 TreeViewItem
  • TreeViewItem 選取範圍
  • TreeView 樣式
  • 將影像和其他內容加入至 TreeView 項目
  • 相關主題

什麼是 TreeView

TreeView 是一種 ItemsControl,會使用 TreeViewItem 控制項對項目進行巢狀化處理。下列範例將建立 TreeView

<TreeView Name="myTreeViewEvent" >
  <TreeViewItem Header="Employee1" IsSelected="True">
    <TreeViewItem Header="Jesper Aaberg"/>
    <TreeViewItem Header="Employee Number">
      <TreeViewItem Header="12345"/>
    </TreeViewItem>
    <TreeViewItem Header="Work Days">
      <TreeViewItem Header="Monday"/>
      <TreeViewItem Header="Tuesday"/>
      <TreeViewItem Header="Thursday"/>
    </TreeViewItem>
  </TreeViewItem>
  <TreeViewItem Header="Employee2">
    <TreeViewItem Header="Dominik Paiha"/>
    <TreeViewItem Header="Employee Number">
      <TreeViewItem Header="98765"/>
    </TreeViewItem>
    <TreeViewItem Header="Work Days">
      <TreeViewItem Header="Tuesday"/>
      <TreeViewItem Header="Wednesday"/>
      <TreeViewItem Header="Friday"/>
    </TreeViewItem>
  </TreeViewItem>
</TreeView>

建立 TreeView

TreeView 控制項包含 TreeViewItem 控制項的階層。TreeViewItem 控制項是 HeaderedItemsControl,具有 HeaderItems 集合。

如果您使用可延伸標記語言 (XAML) 定義 TreeView,則可以明確定義 TreeViewItem 控制項的 Header 內容以及組成其集合的項目。前一個範例會示範這個方法。

您也可以將 ItemsSource 指定為資料來源,然後再指定 HeaderTemplateItemTemplate 以定義 TreeViewItem 內容。

您也可以使用 HierarchicalDataTemplate 物件,來定義 TreeViewItem 控制項的版面配置。如需詳細資訊和其他範例,請參閱 HOW TO:使用 SelectedValue、SelectedValuePath 和 SelectedItem

如果項目不是 TreeViewItem 控制項,則在顯示 TreeView 控制項時,會自動由 TreeViewItem 控制項包含。

展開和摺疊 TreeViewItem

如果使用者展開 TreeViewItemIsExpanded 屬性便會設定為 true。透過將 IsExpanded 屬性設定為 true (展開) 或 false (摺疊),您也可以在沒有任何直接使用者動作的情況下,展開或折疊 TreeViewItem。當這個屬性值變更時,會引發 ExpandedCollapsed 事件。

TreeViewItem 控制項上呼叫 BringIntoView 方法時,便會展開 TreeViewItem 及其父 TreeViewItem 控制項。如果 TreeViewItem 不可見或只有部分可見,TreeView 便會捲動以顯示其內容。

TreeViewItem 選取範圍

當使用者按一下 TreeViewItem 控制項進行選取時,會引發 Selected 事件,且其 IsSelected 屬性會設定為 true。TreeViewItem 也會成為 TreeView 控制項的 SelectedItem。相反地,如果從 TreeViewItem 控制項變更選取範圍,便會引發 Unselected 事件,且其 IsSelected 屬性會設定為 false。

TreeView 控制項上的 SelectedItem 屬性是唯讀屬性,因此,您無法明確地進行設定。如果使用者按一下 TreeViewItem 控制項或是將 IsSelected 設定為 TreeViewItem 控制項上的 true 時,便會設定 SelectedItem 屬性。

使用 SelectedValueSelectedValuePath 屬性,將值指定給 SelectedItem。如需詳細資訊,請參閱 HOW TO:使用 SelectedValue、SelectedValuePath 和 SelectedItem

您可以在 SelectedItemChanged 事件上註冊事件處理常式,才能判斷所選TreeViewItem 改變的時間。提供給事件處理常式的 RoutedPropertyChangedEventArgs<T> 會指定 OldValue (亦即上一個選取範圍) 和 NewValue (目前的選取範圍)。如果應用程式或使用者沒有指定上一個或目前的選取範圍,則任一個值都可以是 null。

TreeView 樣式

TreeView 控制項的預設樣式會將之置放在 StackPanel 物件內部,此物件包含 ScrollViewer 控制項。當您設定 TreeViewWidthHeight 屬性時,這些值可用來調整顯示 TreeViewStackPanel 物件的大小。如果要顯示的內容大於顯示區域,ScrollViewer 便會自動顯示,如此,使用者就可以捲動 TreeView 內容。

若要自訂 TreeViewItem 控制項的外觀,請將 Style 屬性設定為自訂 Style

下列範例將示範如何使用 Style,設定 TreeViewItemForegroundFontSize 屬性。

<Style TargetType="{x:Type TreeViewItem}">
  <Setter Property="Foreground" Value="Blue"/>
  <Setter Property="FontSize" Value="12"/>
</Style>

將影像和其他內容加入至 TreeView 項目

您可以在 TreeViewItemHeader 內容中加入一個以上的物件。若要在 Header 加入多個物件,請將物件置於版面配置控制項內部,例如 PanelStackPanel

下列範例將示範如何將 TreeViewItemHeader 定義為 CheckBoxTextBlock,這兩個項目同時置於 DockPanel 控制項中。

<TreeViewItem>
  <TreeViewItem.Header>
    <DockPanel>
      <CheckBox/>
      <TextBlock>
        TreeViewItem Text
      </TextBlock>
    </DockPanel>
  </TreeViewItem.Header>
</TreeViewItem>

下列範例將示範如何定義包含 ImageTextBlockDataTemplate,這兩個項目同時置於 DockPanel 控制項中。您可以使用 DataTemplate,為 TreeViewItem 設定 HeaderTemplateItemTemplate

<DataTemplate x:Key="NewspaperTVItem">
  <DockPanel>
    <Image Source="images\icon.jpg"/>
    <TextBlock VerticalAlignment="center" Text ="{Binding Path=Name}"/>
  </DockPanel>
</DataTemplate>

請參閱

概念

Controls 內容模型概觀

參考

TreeView

TreeViewItem

其他資源

TreeView HOW TO 主題

TreeView 範例