TreeView 概觀

發行項
09/27/2024

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

什麼是 TreeView？

TreeView 是一種使用 TreeViewItem 控制項巢狀項目的 ItemsControl。下列範例會建立 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 控制項是具有 Header 和 Items 集合的 HeaderedItemsControl。

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

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

若要定義 TreeViewItem 控制項的配置，您也可以使用 HierarchicalDataTemplate 物件。如需詳細資訊和範例，請參閱使用 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。如需詳細資訊，請參閱使用 SelectedValue、SelectedValuePath 和 SelectedItem。

您可以在 SelectedItemChanged 事件上註冊事件處理常式，以判斷選取的 TreeViewItem 何時變更。提供給事件處理常式的 RoutedPropertyChangedEventArgs<T> 會指定 OldValue，也就是先前的選取範圍，以及目前選取範圍 NewValue。如果應用程式或使用者沒有做出先前或目前的選取，則這兩個值都有可能是 null。

TreeView 樣式

TreeView 控制項的預設樣式會將它放在包含 ScrollViewer 控制項的 StackPanel 物件內。當您設定 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>

共用方式為