TreeView 概觀

發行項
08/12/2011

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

這個主題包含下列章節。

什麼是 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，具有 Header 和 Items 集合。

如果您使用Extensible Application Markup Language (XAML) 定義 TreeView，則可以明確定義 TreeViewItem 控制項的 Header 內容以及組成其集合的項目。前一個範例會示範這個方法。

您也可以將 ItemsSource 指定為資料來源，然後再指定 HeaderTemplate 和 ItemTemplate 以定義 TreeViewItem 內容。

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

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

展開和摺疊 TreeViewItem

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

在 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 屬性。

使用 SelectedValuePath 屬性指定 SelectedItem 的 SelectedValue。如需詳細資訊，請參閱 HOW TO：使用 SelectedValue、SelectedValuePath 和 SelectedItem。

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

TreeView 樣式

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

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

下列範例將示範如何使用 Style，設定 TreeViewItem 的 Foreground 和 FontSize 屬性。

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

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

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

下列範例將示範如何將 TreeViewItem 的 Header 定義為 CheckBox 和 TextBlock，這兩個項目同時置於 DockPanel 控制項中。

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

下列範例將示範如何定義包含 Image 和 TextBlock 的 DataTemplate，這兩個項目同時置於 DockPanel 控制項中。您可以使用 DataTemplate，為 TreeViewItem 設定 HeaderTemplate 或 ItemTemplate。

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

請參閱

共用方式為