TreeView 概觀

發行項
10/18/2023

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

什麼是 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 ，您可以明確定義 Header 控制項的內容 TreeViewItem ，以及組成其集合的專案。上圖示範這個方法。

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

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

如果專案不是 TreeViewItem 控制項，當控制項顯示時 TreeView ，它會自動由 TreeViewItem 控制項括住。

展開和摺疊 TreeViewItem

如果使用者展開 TreeViewItem ，則 IsExpanded 屬性會設定為 true 。您也可以將屬性設定 IsExpanded 為 true [展開] 或 false [折迭] 來展開或折迭 TreeViewItem ，而不需要任何直接使用者動作。當此屬性變更時， Expanded 會發生或 Collapsed 事件。

BringIntoView在控制項上 TreeViewItem 呼叫方法時， TreeViewItem 和其父 TreeViewItem 控制項會展開。 TreeViewItem如果看不到或部分可見，卷 TreeView 動會使其可見。

TreeViewItem 選取

當使用者按一下 TreeViewItem 控制項加以選取時 Selected ，就會發生事件，並將其 IsSelected 屬性設定為 true 。 TreeViewItem也會成為 SelectedItem 控制項的 TreeView 。相反地，當選取範圍從 TreeViewItem 控制項變更時，就會發生其 Unselected 事件，而且其 IsSelected 屬性會設定為 false 。

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

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

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

TreeView 樣式

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

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

下列範例示範如何使用來設定控制項 Style 的 Foreground 和 FontSize 屬性值 TreeViewItem 。

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

將影像和其他內容新增至 TreeView 項目

您可以在的內容 TreeViewItem 中包含 Header 多個物件。若要在內容中包含多個物件，請將物件括在 Header 版面配置控制項內，例如 Panel 或 StackPanel 。

下列範例示範如何將的定義為 Header TreeViewItem CheckBox ，且 TextBlock 兩者都包含在控制項中。 DockPanel

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

下列範例示範如何定義 DataTemplate ，其中包含 Image 包含在控制項中的 DockPanel 和 TextBlock 。您可以使用 DataTemplate 來設定 HeaderTemplate 或 ItemTemplate 的 TreeViewItem 。

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