自訂 TreeView Web 伺服器控制項的外觀

發行項
10/22/2014

更新：2007 年 11 月

您可以完全自訂 TreeView 控制項的呈現方式，進而提供各種不同的顯示樣式。

若要自訂 TreeView 控制項的外觀，您可以執行下列步驟：

指定影響控制項顯示和呈現的 TreeView 控制項屬性。
指定 ImageSet 屬性，選取在執行階段搭配控制項呈現的內建影像組合。
在 TreeView 控制項中，對於特定群組的 TreeNode 物件，指定個別影像和樣式屬性，以控制其顯示和呈現的特性。
使用 Visual Studio 的自動格式設定功能，一次自訂所有影像組合與樣式屬性。
為應用程式中的 TreeView 控制項，指派預先定義的佈景主題或面板，以定義執行階段的顯示和呈現特性。

最上層配置屬性

除了標準伺服器控制項屬性之外 (例如 BackColor 屬性)，TreeView 控制項控制項提供了一組能夠精確控制 TreeView 控制項外觀的屬性。

NodeIndent 屬性

NodeIndent 屬性會指定所有節點的縮排層次。節點會從 TreeView 控制項呈現的那一側縮排。對於從左至右呈現的地區設定而言是左側，而從右至左呈現的地區設定則是右側。

NodeWrap 屬性

NodeWrap 屬性會指定每個節點中顯示的文字，當空間用完時是否要換行至下一行的行首，或是繼續寫入同一行。

ShowLines 屬性

ShowLines 屬性會指定是否要顯示將子節點連接至父節點的線條。當這個屬性設定為 true 時，TreeView 控制項會搜尋 LineImagesFolder 屬性針對線條影像所指定，可經由 Web 存取的資料夾。

TreeNodeStyle 屬性

除了自己的屬性以外，TreeView 控制項支援每個節點型別之 TreeNodeStyle 控制項的屬性。這些樣式屬性會覆寫套用至所有節點型別的 NodeStyle 屬性。

TreeView 控制項也擁有指定所有節點縮排層次的 NodeIndent 屬性。節點會從 TreeView 控制項呈現的那一側縮排。對於從左至右呈現的地區設定而言是左側，而從右至左呈現的地區設定則是右側。

當選取節點或是滑鼠停留在節點時，節點也能夠套用不同的樣式。當節點的 Selected 屬性設定為 true 時，就會套用 SelectedNodeStyle 屬性，以便在已選取節點上覆寫任何未選取的樣式屬性。當滑鼠停留在節點時，就會套用 HoverNodeStyle 屬性。下列影像和表格描述 TreeNodeStyle 屬性。

TreeNodeStyle 屬性

節點屬性	說明
NodeSpacing	指定目前整個節點和上下相鄰節點之間的垂直間距量。
VerticalPadding	指定呈現在 TreeNode 文字上方與下方的空間大小。
HorizontalPadding	指定呈現在 TreeNode 文字左右的空間大小。
ChildNodesPadding	指定 TreeNode 之子節點上下的空間大小。
ImageUrl	指定顯示在 TreeNode 旁邊的影像路徑。

層級樣式集合

LevelStyles 集合是設定個別樣式屬性的替代方案，例如 NodeStyle 屬性。LevelStyles 集合會控制樹狀目錄特定層級上的節點樣式。集合中的第一個樣式會對應到樹狀目錄第一層的節點樣式。集合中的第二個樣式會對應到樹狀目錄第二層的節點樣式，依此類推。這個屬性最常用來產生內容樣式巡覽功能表的資料表，其中某些層級的節點應該有相同的外觀 (不論是否有子節點)。

注意事項：
如果使用 LevelStyles 集合定義某些層級的樣式，則其會覆寫該層級節點的任何根節點、父節點或分葉節點的樣式設定。

樣式優先順序

樣式屬性會按照下列優先順序加以套用：

NodeStyle
RootNodeStyle、ParentNodeStyle 或 LeafNodeStyle，視節點型別而定。如果已定義 LevelStyles 集合，就會在此時套用，並且覆寫其他節點的樣式屬性。
SelectedNodeStyle
HoverNodeStyle

自動格式設定

如果您使用視覺化設計工具，例如 Visual Web Developer，TreeView 控制項提供了自動格式設定功能。自動格式設定功能會在設計階段，將顯示屬性組合套用到控制項。這些屬性設定會覆寫任何先前設定的屬性值，並且可以在程式碼設計工具中修改。

除了標準樣式屬性以外，自動格式設定也會將 ImageSet 屬性設定為 TreeView 控制項隨附之可用的影像組合之一。您可以使用自動格式設定，快速變更 TreeView 控制項的外觀，以模擬其他已知的自訂樹狀目錄，如下所示：

Outlook 收件匣資料夾
Microsoft Windows 檔案系統
MSN Messenger 連絡人清單
Outlook Express 新聞群組清單
MSDN 目錄
Windows 說明目錄
常見問題集 (FAQ)
Windows 事件清單檢視

除了通用的樹狀目錄樣式之外，自動格式設定功能還包含幾種樣式化的項目符號清單。

當您使用自動格式設定這個有用的功能，將屬性組合套用至單一控制項時，也可以使用佈景主題和面板，將相同的外觀套用在網站的多重 TreeView 控制項上。如需詳細資訊，請參閱 ASP.NET 佈景主題和面板概觀。

影像屬性

TreeView 控制項不像大部分的控制項，其受益於將圖形資源組合套用至控制項的能力。影像是用來代表節點、展開和摺疊按鈕、以及連接線。

您可以設定 ImageSet 屬性或建立自訂影像，並設定個別影像屬性，以設定 TreeView 層級的影像。您甚至也可以進一步設定 TreeNode 層級的影像，以自訂 TreeView 控制項的外觀。

影像組合

TreeView 控制項包含內建影像資源組合，與許多通用樹狀目錄中使用的影像相同。下表顯示可能會使用的某些通用影像組合。

ImageSet 名稱	說明
TreeViewImageSet.Contacts	MSN Messenger 影像
TreeViewImageSet.Faq	FAQ 樣式影像
TreeViewImageSet.Inbox	Outlook 收件匣影像
TreeViewImageSet.News	Outlook Express 新聞群組影像
TreeViewImageSet.Help	Microsoft Windows 說明系統影像
TreeViewImageSet.XPFileExplorer	Microsoft Windows XP 檔案總管影像

自訂影像和線條

除了使用內建影像資源以外，您可以定義專屬的 TreeView 控制項自訂影像資源組合。若要使用自訂影像組合，您必須建立兩種影像類型。第一種是節點影像，會顯示可展開的節點、可摺疊的節點、以及不會展開或摺疊的節點。您可以在像是 Microsoft Paint 的程式中建立這些影像。如果您使用連接線連接節點，就必須建立線條影像組合，並且將 ShowLines 屬性設定為 true。如果您使用像是 Visual Web Developer 的視覺化設計工具，可以使用 Line Image Creator 工具建立線條影像。如果您不是使用這種工具，就必須使用像是 Microsoft Paint 的程式手動建立它們。

一旦建立節點影像，請將其置於網站的目錄中，然後在 TreeView 控制項上設定下列屬性，以參考至影像：

此外，線條影像必須放在資料夾中，然後必須將 LineImagesFolder 屬性設定為指向線條影像的資料夾。

如需 ImageSet 屬性和可用影像組合完整清單的詳細資訊，請參閱 ImageSet。

如需線條影像和所有 TreeView 控制項影像清單的詳細資訊，請參閱 LineImagesFolder。

佈景主題和面板

佈景主題和面板可以輕鬆地將屬性組合套用至網站中的多重控制項。例如，如果您建立名為 MyTheme 的佈景主題，然後在此佈景主題中定義名為 MyTreeView 的面板，您便可以在定義該面板一次後，套用在許多 TreeView 控制項中。

如需詳細資訊，請參閱 ASP.NET 佈景主題和面板概觀。

請參閱

參考

TreeView Web 伺服器控制項概觀

共用方式為