ASP.NET - 將圖像用于 TreeView 控件

2019-11-17 03:58:37

字體：大中小

供稿：網(wǎng)友

   TreeView 控件具有許多不同的外觀，從而可以提供靈活的圖像自定義以及指定自定義用戶界面 (UI) 選項(xiàng)的屬性。您可以將圖像與 TreeView 控件一起使用來表示節(jié)點(diǎn)、連接線以及展開和折疊圖標(biāo)。還可以使用 ImageSet 屬性中一組預(yù)定義的圖像，或者通過設(shè)置各個(gè)圖像屬性來使用自定義圖像。

一、TreeView 控件中使用的圖像

TreeView 控件的可視化元素包括下列圖像：

·折疊的節(jié)點(diǎn)圖像

·展開的節(jié)點(diǎn)圖像

·不可展開的圖像

·根節(jié)點(diǎn)圖像

·父節(jié)點(diǎn)圖像

·葉節(jié)點(diǎn)圖像

除了這些圖像以外，將 ShowLines 屬性設(shè)置為 true 時(shí)，TreeView 控件還使用圖像創(chuàng)建連接 TreeView 項(xiàng)的線條。可以使用 TreeView 控件上的可用“行圖標(biāo)生成器”對話框生成這些線條（選中“顯示行”屬性時(shí)），也可以自行創(chuàng)建圖像。請注意，不需要自定義每個(gè)圖像屬性。如果沒有顯式設(shè)置圖像屬性，則使用內(nèi)置的默認(rèn)圖像。

二、使用圖像集中的默認(rèn)圖像

為 TreeView 控件分配圖像的最簡單方法是使用 ImageSet 屬性。內(nèi)置于 TreeView 控件中的圖像集包括樹中用于 MSN Messenger、Microsoft Outlook、Windows Explorer 和 Microsoft Windows 幫助的常見圖像資源集。圖像集還包括幾種項(xiàng)目符號樣式。

下面的代碼示例演示使用 Windows xp 文件資源管理器圖像集的 TreeView 控件。

        <asp:TreeView ID="TreeView1"

        runat="server"

        DataSourceID="xmlDataSource1"

        ImageSet= "XPFileExplorer">

三、使用自定義折疊和展開圖像

可以使用圖像來指示可展開的節(jié)點(diǎn)、可折疊的節(jié)點(diǎn)或者不展開或折疊的節(jié)點(diǎn)。可以在大多數(shù)圖形程序中針對此目的創(chuàng)建圖像。

若要為特定的節(jié)點(diǎn)類型分配圖像，可以為相應(yīng)的屬性分配要使用的圖像文件的位置。這些屬性包括：ExpandImageUrl、CollapseImageUrl 和 NoExpandImageUrl。下面的示例設(shè)置這些屬性，以自定義網(wǎng)站的 Images 目錄中的圖像。

    <asp:TreeView ID="TreeView1"

        runat="server"

        DataSourceID="XmlDataSource1"

            ExpandImageUrl="~/Images/ExpandAll.gif"

            CollapseImageUrl="~/Images/CollapseAll.gif"

            NoExpandImageUrl="~/Images/stop.gif">

    </asp:TreeView>

請注意，您可以通過將 ShowExpandCollapse 屬性設(shè)置為 false 來關(guān)閉展開和折疊圖像的呈現(xiàn)。

四、將自定義圖像用于根節(jié)點(diǎn)、父節(jié)點(diǎn)和葉節(jié)點(diǎn)

每個(gè) TreeView 控件都可以由根節(jié)點(diǎn)、父節(jié)點(diǎn)和葉節(jié)點(diǎn)組成。根節(jié)點(diǎn)是具有子節(jié)點(diǎn)并且其 Parent 屬性設(shè)置為 null 的任何節(jié)點(diǎn)；它是樹中的頂級節(jié)點(diǎn)。父節(jié)點(diǎn)是 TreeView 控件的節(jié)點(diǎn)集合中在層次結(jié)構(gòu)中其下具有子節(jié)點(diǎn)的任何節(jié)點(diǎn)。葉節(jié)點(diǎn)是 TreeView 控件的節(jié)點(diǎn)集合中沒有子節(jié)點(diǎn)的任何節(jié)點(diǎn)；它既不是根節(jié)點(diǎn)，也不是父節(jié)點(diǎn)。

TreeView 控件公開三種 TreeNode 類型的屬性樣式：根節(jié)點(diǎn)、父節(jié)點(diǎn)和葉節(jié)點(diǎn)。這些樣式分別為 RootNodeStyle、ParentNodeStyle 和 LeafNodeStyle 屬性。每種屬性都可用來為應(yīng)用于該節(jié)點(diǎn)類型的屬性定義一個(gè) ImageUrl 值。這些圖像呈現(xiàn)在節(jié)點(diǎn)文本的左側(cè)。通過使用 ImageUrl 屬性，每個(gè) TreeNode 類型可以有選擇地重寫其節(jié)點(diǎn)類型的默認(rèn)圖像。

下面的示例演示如何分配屬性。

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1" >

        <RootNodeStyle ImageUrl="~/Images/root.gif" />

        <ParentNodeStyle ImageUrl="~/Images/parent.gif" />

        <LeafNodeStyle ImageUrl="~/Images/leaf.gif" />

    </asp:TreeView>

下面的示例演示如何重寫單個(gè)樹節(jié)點(diǎn)的指定的節(jié)點(diǎn)樣式圖像。請注意，進(jìn)行呈現(xiàn)時(shí)，樹節(jié)點(diǎn)“Page 2”將星號 (Star.gif) 作為節(jié)點(diǎn)圖像，而不是將使用 LeafNodeStyle 屬性分配的圖像作為節(jié)點(diǎn)圖像。

      <asp:TreeView id="SampleTreeView"

        runat="server">

          <RootNodeStyle ImageUrl="~/Images/root.gif" />

          <ParentNodeStyle ImageUrl="~/Images/parent.gif" />

          <LeafNodeStyle ImageUrl="~/Images/leaf.gif" />

        <Nodes>

          <asp:TreeNode Value="Home"

            Text="Home"

            Target="Content"

            Expanded="True">

            <asp:TreeNode Value="Page 1"

              Text="Page1"

              Target="Content">

              <asp:TreeNode Value="Section 1"

                Text="Section 1"

                Target="Content"/>

            </asp:TreeNode>

            <asp:TreeNode Value="Page 2"

              Text="Page 2"

              Target="Content"

                ImageUrl="~/Images/star.gif">

            </asp:TreeNode>

          </asp:TreeNode>

        </Nodes>

      </asp:TreeView>

五、使用線條圖像

TreeView 控件可以呈現(xiàn)用一系列預(yù)呈現(xiàn)的圖像連接樹節(jié)點(diǎn)的線條。將 ShowLines 屬性設(shè)置為 true 時(shí)，該控件呈現(xiàn)這些線條。可以使用 TreeView 控件的快捷菜單上的“行圖標(biāo)生成器”來編輯這些線條圖像的外觀，也可以自行為每個(gè)線條特性分配自定義圖像。

說明：可視化設(shè)計(jì)工具（如 Visual Studio 2005）通常包括用于自動生成線條圖像的實(shí)用工具。

TreeView 控件將特定的命名約定用于 16 種不同的圖像，這些圖像組成用于連接樹節(jié)點(diǎn)的線條。下表顯示了用于組成線條連接的每個(gè)圖像的文件名和說明。

文件名
圖像
說明

Dash.gif

在樹結(jié)構(gòu)中只有一個(gè)根節(jié)點(diǎn)并且該根節(jié)點(diǎn)是葉節(jié)點(diǎn)時(shí)，顯示在根節(jié)點(diǎn)旁邊的線條圖像。

Dashminus.gif

在樹結(jié)構(gòu)中只有一個(gè)根節(jié)點(diǎn)時(shí)，顯示在根節(jié)點(diǎn)旁邊以指示該根節(jié)點(diǎn)已展開的減號 (-) 圖像。

Dashplus.gif

在樹結(jié)構(gòu)中只有一個(gè)根節(jié)點(diǎn)時(shí)，顯示在根節(jié)點(diǎn)旁邊以指示該根節(jié)點(diǎn)已折疊的加號 (+) 圖像。

I.gif

連接相鄰節(jié)點(diǎn)所顯示的線條圖像。

L.gif

當(dāng)某個(gè)分支的最后一個(gè)節(jié)點(diǎn)是葉節(jié)點(diǎn)時(shí)，在其旁邊顯示的線條圖像。

Lminus.gif

顯示在某個(gè)分支的最后一個(gè)節(jié)點(diǎn)旁邊以指示該節(jié)點(diǎn)已展開的線條圖像。

Lplus.gif

顯示在某個(gè)分支的最后一個(gè)節(jié)點(diǎn)旁邊以指示該節(jié)點(diǎn)已折疊的線條圖像。

Minus.gif

顯示在包含多個(gè)根節(jié)點(diǎn)的樹結(jié)構(gòu)的第一個(gè)根節(jié)點(diǎn)旁邊以指示該節(jié)點(diǎn)已展開的減號圖像。此圖像不包含其他線條，并且只有該根節(jié)點(diǎn)已經(jīng)折疊一次后才顯示。第一次加載頁面時(shí)，會顯示 Rminus.gif 圖像。

Noexpand.gif

在葉節(jié)點(diǎn)旁邊顯示的空白間隔圖像。此圖像允許文本垂直排列。

Plus.gif

顯示在包含多個(gè)根節(jié)點(diǎn)的樹結(jié)構(gòu)的第一個(gè)根節(jié)點(diǎn)旁邊以指示該節(jié)點(diǎn)已折疊的加號圖像。此圖像不包含其他線條，并且只有該根節(jié)點(diǎn)已經(jīng)展開一次后才顯示。第一次加載頁面時(shí)，會顯示 Rplus.gif 圖像。

R.gif

顯示在包含多個(gè)根節(jié)點(diǎn)的樹結(jié)構(gòu)的第一個(gè)根節(jié)點(diǎn)旁邊以指示該節(jié)點(diǎn)是葉節(jié)點(diǎn)的線條圖像。

Rminus.gif

顯示在包含多個(gè)根節(jié)點(diǎn)的樹結(jié)構(gòu)的第一個(gè)根節(jié)點(diǎn)旁邊以指示該節(jié)點(diǎn)已展開的減號圖像。此圖像包含其他線條并且只在第一次加載頁面時(shí)才顯示。根節(jié)點(diǎn)折疊過一次后，將顯示 Minus.gif 圖像。

Rplus.gif

顯示在包含多個(gè)根節(jié)點(diǎn)的樹結(jié)構(gòu)的第一個(gè)根節(jié)點(diǎn)旁邊以指示該節(jié)點(diǎn)已折疊的加號圖像。此圖像包含其他線條并且只在第一次加載頁面時(shí)才顯示。根節(jié)點(diǎn)展開過一次后，將顯示 Plus.gif 圖像。

T.gif

顯示在樹結(jié)構(gòu)中間（T 型交叉處）的節(jié)點(diǎn)旁邊以指示該節(jié)點(diǎn)是葉節(jié)點(diǎn)的線條圖像。

Tminus.gif

顯示在樹結(jié)構(gòu)中間（T 型交叉處）的節(jié)點(diǎn)旁邊以指示該節(jié)點(diǎn)已展開的減號圖像。

Tplus.gif

顯示在樹結(jié)構(gòu)中間（T 型交叉處）的節(jié)點(diǎn)旁邊以指示該節(jié)點(diǎn)已折疊的加號圖像。

      使用“行圖標(biāo)生成器”時(shí)，該控件創(chuàng)建圖像并將這些圖像存儲在名為 TreeLineImages 的默認(rèn)文件夾中。可以更改此文件夾的名稱，并且可以編輯由“行圖標(biāo)生成器”生成的圖像。如果創(chuàng)建自定義圖像，請使用與前面表中相同的命名約定來命名這些圖像。為了幫助您創(chuàng)建自定義圖像，可以使用“行圖標(biāo)生成器”來創(chuàng)建隨后可以編輯和自定義的圖像。

本文來自CSDN博客，轉(zhuǎn)載請標(biāo)明出處：http://blog.csdn.net/dodream/archive/2009/12/18/5030336.aspx

上一篇： c# 業(yè)務(wù)層事務(wù)

下一篇：ASP.NET - TreeView Web 服務(wù)器控件中的選擇、導(dǎo)航和復(fù)選框