ASP.NET -自定義 TreeView Web 服務器控件的外觀

2019-11-17 03:58:42

字體：大中小

來源：轉載

供稿：網友

TreeView 控件的呈現是可完全自定義的，這使得可以使用多種多樣的顯示樣式。

若要自定義 TreeView 控件的外觀，可以執行以下操作：

·指定影響控件顯示和呈現的 TreeView 控件屬性。

·指定一個 ImageSet 屬性，該屬性選擇一組在運行時同控件一起呈現的內置圖像。

·指定用于控制 TreeView 控件內特定 TreeNode 對象組的顯示及呈現特性的各圖像和樣式屬性。

·使用 Visual Studio 的自動套用格式功能可迅速完成一組圖像和樣式屬性的自定義。

·為應用程序中的 TreeView 控件指定一個預定義主題或一個定義運行時顯示及呈現特性的外觀。

一、頂級布局屬性

除了服務器控件的標準屬性（如 BackColor 屬性）外，TreeView 控件還公開一組提供對 TreeView 控件的外觀進行精確控制的屬性。

1.1、NodeIndent 屬性

NodeIndent 屬性指定了所有節點的縮進量級。節點會從呈現 TreeView 控件的一側縮進。對于從左向右呈現的區域設置而言，這是指左側，而對于從右向左呈現的區域設置而言，這是指右側。

1.2、NodeWrap 屬性

NodeWrap 屬性指定每個節點中顯示的文本在空間不足時是換到下一行的開頭還是在同一行中繼續顯示。

1.3、ShowLines 屬性

ShowLines 屬性指定是否顯示將子節點連接到父節點的連線。當此屬性設置為 true 時，TreeView 控件將在 LineImagesFolder 屬性指定、可從 Web 訪問的文件夾中搜索連線圖像。

二、TreeNodeStyle 屬性

除了自身的屬性外，TreeView 控件還支持每種節點類型的 TreeNodeStyle 控件的屬性。這些樣式屬性將重寫應用于所有節點類型的 NodeStyle 屬性。

TreeView 控件還具有一個為所有節點指定縮進量級的 NodeIndent 屬性。節點會從呈現 TreeView 控件的一側縮進。對于從左向右呈現的區域設置而言，這是指左側，而對于從右向左呈現的區域設置而言，這是指右側。

當一個節點被選中或鼠標懸停于該節點上時，可對該節點應用不同的樣式。當某個節點的 Selected 屬性設置為 true 時，將應用 SelectedNodeStyle 屬性，對于選中的節點，該屬性將重寫任何未選擇的樣式屬性。當鼠標懸停于某個節點上時，將應用 HoverNodeStyle 屬性。下面的圖像和表描述了 TreeNodeStyle 屬性。

2.1、TreeNodeStyle 屬性

節點屬性
說明

NodeSpacing
指定整個當前節點與上下相鄰的節點之間的垂直間距。

VerticalPadding
指定在 TreeNode 文本頂部和底部呈現的間距。

HorizontalPadding
指定在 TreeNode 文本左側和右側呈現的間距。

ChildNodesPadding
指定 TreeNode 的子節點上方和下方的間距。

ImageUrl
指定在 TreeNode 旁顯示的圖像的路徑。

2.2、級別樣式集合

LevelStyles 集合是單獨設置各樣式屬性（如 NodeStyle 屬性）的替代方法。LevelStyles 集合可控制處于樹視圖中特定級別的節點的樣式。集合中的第一個樣式對應于樹視圖第一級中的節點的樣式。集合中的第二個樣式對應于樹視圖第二級中的節點的樣式，依此類推。此屬性最常用于生成目錄樣式導航菜單，其中處于某個特定級別的節點應具有相同的外觀，而無論這些節點是否擁有子節點。

說明：如果使用 LevelStyles 集合為某個特定級別定義了一個樣式，則該樣式會覆蓋處于該級別的節點的所有根節點、父節點或葉節點樣式設置。

2.3樣式優先級

樣式屬性按以下優先級順序應用：

·NodeStyle

·RootNodeStyle、ParentNodeStyle 或 LeafNodeStyle（根據節點類型應用）。如果定義了 LevelStyles 集合，則其應用優先級同前，并覆蓋其他節點樣式屬性。

·SelectedNodeStyle

·HoverNodeStyle

2.4、自動套用格式

如果在使用可視化設計工具（如 Visual Web Developer），則 TreeView 控件將提供一個自動套用格式功能。自動套用格式功能在設計時將一組顯示屬性應用于控件。這些屬性設置覆蓋此前所設置的所有屬性值并可以在代碼設計器中修改。

除了標準樣式屬性外，自動套用格式還將 ImageSet 屬性設置為包含于 TreeView 控件中可用圖像集之一。通過使用自動套用格式，可以快速更改 TreeView 控件的外觀，使其看上去類似于其他常見的自定義樹視圖，例如：

·Outlook 收件箱文件夾

·Microsoft Windows 文件系統

·MSN Messenger 聯系人列表

·Outlook ExPRess 新聞組列表

·MSDN 目錄

·Windows 幫助目錄

·常見問題 (FAQ)

·“Windows 事件列表”視圖

除了常見樹視圖樣式外，自動套用格式功能還包含一些帶有樣式的項目符號列表。

盡管自動套用格式對于將一組屬性應用于單個控件十分有效，您也可以使用主題和外觀將同一外觀應用于網站中的多個 TreeView 控件。

三、Image 屬性

與大多數控件不同，能夠將一組圖形資源應用于控件對于 TreeView 控件而言會非常方便。圖像用于表示節點、展開和折疊按鈕及連接線。

通過設置 ImageSet 屬性或創建自定義圖像并設置各圖像屬性，可以在 TreeView 級別上設置圖像。還可以在 TreeNode 級別上設置圖像以便更進一步地自定義 TreeView 控件的外觀。

3.1、圖像設置

TreeView 控件包括內置的圖像資源集，這些圖像與許多常見樹視圖中使用的圖像相同。下表顯示一些可能使用的常見圖像設置。

ImageSet 名稱
說明

TreeViewImageSet.Contacts
MSN Messenger 圖像

TreeViewImageSet.Faq
常見問題樣式圖像

TreeViewImageSet.Inbox
Outlook 收信箱圖像

TreeViewImageSet.News
Outlook Express 新聞組圖像

TreeViewImageSet.Help
Microsoft Windows 幫助系統圖像

TreeViewImageSet.XPFileExplorer
Microsoft Windows xp 文件資源管理器圖像

3.2、自定義圖像和連線

除了使用內置圖像資源外，還可以為 TreeView 控件定義您自己的自定義圖像資源集。若要使用一組自定義的圖像，必須創建兩種類型的圖像。第一種為節點圖像，這些圖像顯示可擴展節點、可折疊節點以及不展開或折疊的節點。這些圖像可以在 Microsoft“畫圖”之類的程序中創建。如果要使用連線連接節點，則必須創建一組連線圖像并將 ShowLines 屬性設置為 true。如果在使用可視化設計器（如 Visual Web Developer），則可以使用“連線圖像創建器”工具創建連線圖像。如果沒有，則必須使用諸如 Microsoft“畫圖”之類的程序手動創建這些圖像。

一旦已創建了節點圖像，請將這些圖像放置在網站中的一個目錄中，然后在 TreeView 控件上設置以下屬性來引用這些圖像：

·CollapseImageUrl

·ExpandImageUrl

·NoExpandImageUrl

此外，連線圖像必需放置在一個文件夾中，然后必須將 LineImagesFolder 屬性設置為指向連線圖像所在的文件夾。

四、主題和外觀

使用主題和外觀可以方便地將一組屬性應用于一個網站中的多個控件。例如，如果創建一個名為 MyTheme 的主題并在該主題中定義一個名為 MyTreeView skin 的外觀，則可以一次性定義該外觀并將其應用于許多 TreeView 控件。

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/dodream/archive/2009/12/18/5030017.aspx

上一篇：ASP.NET - 填充 TreeView Web 服務器控件中的樹節點

下一篇： ASP.NET - TreeView Web 服務器控件事件