使用 TreeView 控制項

發行項
10/11/2017

TreeView 控制項可以在具有可展開節點的樹狀目錄中顯示階層式 (或巢狀或遞迴) 資料集合。

如需有關 TreeView 控制項的詳細資訊，請參閱 MSDN 上的 TreeView。

建立範例資料以便在 TreeView 控制項中顯示

在 TreeView 控制項中，您可以使用任何類型的集合，不過階層式集合可以充分運用 TreeView 控制項的功能。如果您還沒有資料可用於本主題稍後的「填入 TreeView 控制項」程序，請依照下列程序來設定可完整呈現 TreeView 控制項功能的範例資料：

如果看不到 [資料] 面板，請按一下 [視窗] 功能表，然後按一下 [資料]。
在 [資料] 面板中，按一下 [新增範例資料來源]，然後按一下 [定義新的範例資料]。
在 [定義新的範例資料] 對話方塊中，可以變更資料集的預設名稱，然後選取要將資料提供給專案的哪個組件使用。

選取 [應用程式執行時啟用範例資料] 方塊。

秘訣：
[應用程式執行時啟用範例資料] 方塊可讓專案在執行應用程式時顯示範例資料。若未選取此方塊，則 Microsoft Expression Blend 只會在畫板上顯示範例資料。如需詳細資訊，請參閱使您的應用程式在執行時顯示範例資料。

[應用程式執行時啟用範例資料] 方塊可讓專案在執行應用程式時顯示範例資料。若未選取此方塊，則 Microsoft Expression Blend 只會在畫板上顯示範例資料。

如需詳細資訊，請參閱使您的應用程式在執行時顯示範例資料。

按一下 [確定]。

包含三種屬性類型 (字串、數字和布林值 ) 之集合的範例資料來源隨即建立。
在 [集合] 旁邊，按一下 [新增簡單屬性] 旁的下拉式箭號，然後按一下 [轉換成階層集合]。

該集合隨即轉換，可提供內含五個層級深的屬性。

現在您已準備好可以在 TreeView 控制項中顯示的範例資料集合。

如需有關修改範例資料與新增更多資料屬性的詳細資訊，請參閱修改範例資料。

填入 TreeView 控制項

有許多方法可以將資料繫結至畫板上的控制項。下列程序會顯示當您使用 TreeView 控制項時，將資料繫結至畫板上的控制項的最快方法。

如需其他選項，請參閱將物件繫結至資料。

在 [工具] 面板中，按一下 [資產] 。

秘訣：

您也可以按一下 [視窗] 功能表上的 [資產] 來顯示 [資產] 面板。
在 [資產] 面板中，展開 [控制項]，按一下 [全部]，然後按一下 [TreeView] 控制項。

[工具] 面板中的 [資產] 按鈕之下的按鈕會顯示 TreeView 控制項的圖示，而且呈選取狀態。
使用指標在主文件中的畫板上繪製稍大的 TreeView 物件。
在 [資料] 面板中，將最上層集合 ( [集合]) 拖曳至新的 TreeView 物件上。

TreeView 物件會顯示範例資料來源中的集合，並將影像屬性轉換為影像物件，以及將布林值屬性轉換為核取方塊。
按 F5 執行應用程式。

如果您使用的是前一個程序的範例資料，而且在測試應用程式時啟用了範例資料，那麼應該會看到以下畫面：

秘訣：
您也可以按一下 [視窗] 功能表上的 [資產] 來顯示 [資產] 面板。

變更 TreeView 控制項的外觀

您可以修改控制項的屬性，或修改用來設定其樣式的範本，以變更控制項的外觀。您可以修改整個範本、在每列中排列項目的範本以及其他範本。

如需詳細資訊，請參閱建立或修改範本。

變更每列項目的版面配置與外觀

在 [物件與時間軸] 面板中或在畫板上，以滑鼠右鍵按一下 [TreeView] 物件，然後依序指向 [編輯其他範本] 及 [編輯產生的項目 (ItemTemplate)]，再按一下 [編輯複本]。
在 [建立資料範本資源] 對話方塊中，按一下 [確定]。

Expression Blend 會進入範本編輯模式。畫板頂端的階層連結列會顯示您正在 TreeView 物件內編輯範本。您可以使用階層連結列，按一下 [TreeView] 按鈕來結束範本編輯模式。
在 [物件與時間軸] 面板中，您可以看到項目排列於 StackPanel 物件中。您可以變更堆疊方向和堆疊順序。此外也可以將 StackPanel 變更至不同的版面配置面板，例如 [格線] 或 [畫布] 版面配置面板。

如需詳細資訊，請參閱下列主題：
在 [物件與時間軸] 面板中，將其他物件新增至範本，或在 [屬性] 面板中修改現有物件的屬性。

變更選取之項目的色彩

在 [物件與時間軸] 面板中或在畫板上，以滑鼠右鍵按一下 [TreeView] 物件，然後依序指向 [編輯其他範本] 及 [編輯產生的項目容器 (ItemContainerStyle)]，再按一下 [編輯複本]。

在 [建立樣式資源] 對話方塊中，按一下 [確定]。

Expression Blend 會進入範本編輯模式。畫板頂端的階層連結列會顯示您正在 TreeView 物件內編輯範本。您可以使用階層連結列，按一下 [TreeView] 按鈕來結束範本編輯模式。

秘訣：
當您第一次進入範本編輯模式時，範本的外觀會反映沒有使用者互動之控制項的外觀。若要修改具有使用者互動之控制項的外觀，您必須在範本編輯模式下選取觸發程序 (在 Windows Presentation Foundation [WPF] 專案中) 或狀態 (在 Microsoft Silverlight 專案中)。例如，當使用者選取 TreeView 控制項中的項目時，即是與該控制項互動，導致 [Selected] 事件發生。若要修改有項目選取之控制項的外觀，您必須在選取對應 [Selected] 事件的觸發程序或狀態的情況下修改範本。

當您第一次進入範本編輯模式時，範本的外觀會反映沒有使用者互動之控制項的外觀。若要修改具有使用者互動之控制項的外觀，您必須在範本編輯模式下選取觸發程序 (在 Windows Presentation Foundation [WPF] 專案中) 或狀態 (在 Microsoft Silverlight 專案中)。例如，當使用者選取 TreeView 控制項中的項目時，即是與該控制項互動，導致 [Selected] 事件發生。若要修改有項目選取之控制項的外觀，您必須在選取對應 [Selected] 事件的觸發程序或狀態的情況下修改範本。

執行下列其中一項動作：
- WPF 專案：在 [觸發程序] 面板中，按一下 [IsSelected = True] 觸發程序，以進入 [Selected] 事件的範本編輯模式。在 [物件與時間軸] 面板中，按一下 [Bd] 物件。在 [屬性] 面板的 [筆刷] 下，變更 [Bd] 物件的 [Background] 色彩。完成時，按一下 [觸發程序] 面板中的 [預設]，關閉觸發程序錄製功能。
- Silverlight 專案：在 [狀態] 面板中，按一下 [Selected] 狀態，以進入 [Selected] 事件的範本編輯模式。在 [物件與時間軸] 面板中，按一下 [Selection] 物件。在 [屬性] 面板的 [筆刷] 下，變更 [Selection] 物件的 [Fill] 和 [Stroke] 色彩。完成時，按一下 [狀態] 面板中的 [基本]，關閉狀態錄製功能。
如需有關開啟面板的詳細資訊，請參閱新增或移除工作區面板。

如需有關變更筆刷色彩的詳細資訊，請參閱設定色彩、筆刷與遮罩。
按下 F5 執行應用程式並選取樹狀目錄中的項目。

變更展開按鈕的外觀

在 [物件與時間軸] 面板中或在畫板上，以滑鼠右鍵按一下 [TreeView] 物件，然後依序指向 [編輯其他範本] 及 [編輯產生的項目容器 (ItemContainerStyle)]，再按一下 [編輯複本]。

秘訣：

如果您已經建立了這個範本，則會啟用 [編輯目前的項目] 命令，而且您可以選取該命令代替使用 [編輯複本]。
在 [建立樣式資源] 對話方塊中，按一下 [確定]。

Expression Blend 會進入範本編輯模式。畫板頂端的階層連結列會顯示您正在 TreeView 物件內編輯範本。您可以使用階層連結列，按一下 [TreeView] 按鈕來結束範本編輯模式。
在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [Expander] 物件 (WPF 專案) 或 [ExpandButton] 物件 (Silverlight 專案)，指向 [編輯範本]，然後按一下 [編輯目前的項目]。
在 [物件與時間軸] 面板中，展開節點，以顯示代表 TreeView 控制項之展開按鈕的路徑物件。在 WPF 專案中，路徑物件的名稱為 [ExpandPath]。在 Silverlight 專案中，有兩個路徑物件，分別名為 [UncheckedVisual] 和 [CheckedVisual]。您可以使用 [畫筆] 和 [直接選取] 工具來修改這些路徑的圖形。在 WPF 專案中，[ExpandPath] 物件的名稱與類型必須保留，因為有相依於該物件的觸發程序。

如需詳細資訊，請參閱使用觸發程序定義 WPF 控制項的行為。

在 Silverlight 專案中，您可以變更在 [Checked] 狀態中變更之路徑物件的外觀，因此可以修改該變更。

如需詳細資訊，請參閱定義控制項的不同視覺狀態。