ASP.NET - 如何：自定義 SiteMapPath Web 伺服器控件的外觀

      您可以通過設定站點導航控件的屬性或為該控件配置适用的模闆，自定義該控件的可視外觀。模闆和樣式根據 SiteMapPath 的“備注”部分中介紹的兩個優先級規則應用于連結。

此外，您也可以将主題或控件外觀應用于控件，還可以開發符合您的呈現需要的自定義站點導航控件。

SiteMapPath 控件顯示一個導航路徑（也稱為 breadcrumb 或 eyebrow），它以路徑形式顯示目前頁面傳回到網站首頁的連結。在某一 ASP.NET 頁上，SiteMapPath 控件顯示類似于以下的内容：

首頁 > 服務 > 教育訓練

TreeView 和 Menu 控件也呈現站點地圖資料，它們與 SiteMapPath 控件類似，可以像大多數其他 Web 控件一樣進行自定義。本主題介紹如何使用 SiteMapPath Web 伺服器控件的下列自定義功能：

·指定顯示在連結之間的字元或圖像。

      ·反轉導航路徑的方向。

      ·指定顯示的父連結的數量。

本主題中介紹的過程假定您已建立了一個站點地圖和一個包含 SiteMapPath 控件的頁面。您可以在 ASP.NET 站點地圖中使用 Web.sitemap 示例檔案。

一、自定義連結樣式屬性

1、在包含 SiteMapPath 控件的 ASP.NET 網頁中，向控件添加以下屬性：

RootNodeStyle-Font-Names="Verdana"

RootNodeStyle-ForeColor="Orange"

RootNodeStyle-BorderWidth=2

      例如，SiteMapPath 控件的代碼如下所示：

<asp:SiteMapPath ID="SiteMapPath1" Runat="server"

  SkipLinkText="Skip Menu"

  RootNodeStyle-Font-Names="Verdana"

  RootNodeStyle-ForeColor="Orange"

  RootNodeStyle-BorderWidth=2 >

</asp:SiteMapPath>

      可以使用 Style 和 FontInfo 類中介紹的大多數屬性，其中包括 CssClass 屬性。

2、如果希望每個連結的樣式各不相同，請對 SiteMapPath 控件的 ParentNodeStyle、CurrentNodeStyle 和 PathSeperatorStyle 屬性分别重複上一步驟。

      說明： 若要提高性能，可以使用 NodeTemplate 一次性完成所有連結的樣式自定義。

二、自定義顯示在連結之間的字元

在包含 SiteMapPath 控件的 ASP.NET 網頁中，向該控件添加 PathSeparator 屬性。

例如，SiteMapPath 控件的代碼如下所示：

<asp:SiteMapPath ID="SiteMapPath1" Runat="server"

  PathSeparator=" :: ">

</asp:SiteMapPath>

您的 SiteMapPath 控件将顯示類似下面的内容：

首頁 :: 服務 :: 教育訓練

可以使用任意字元串分隔連結，但若要使用圖像分隔連結，請按照下面步驟操作。

三、指定顯示在連結之間的圖像

在包含 SiteMapPath 控件的 ASP.NET 網頁中，向控件添加以下代碼行：

<PathSeparatorTemplate>

  <asp:Image ID="Image1" Runat="Server"

    Width="20"

    ImageUrl="Images/PathSeparatorImage.jpg" />

  </PathSeparatorTemplate>

</PathSeparatorTemplate>

例如，SiteMapPath 控件的代碼如下所示：

<asp:SiteMapPath ID="SiteMapPath1" Runat="server" >

  <PathSeparatorTemplate>

    <asp:Image ID="Image1" Runat="Server"

      Width="20"

      ImageUrl="Images/PathSeparatorImage.jpg" />

    </PathSeparatorTemplate>

  </PathSeparatorTemplate>

</asp:SiteMapPath>

四、反轉 SiteMapPath 控件所顯示的路徑的方向

在包含 SiteMapPath 控件的 ASP.NET 網頁中，向該控件添加 PathDirection 和 PathSeparator。

例如，SiteMapPath 控件的代碼如下所示：

<asp:SiteMapPath ID="SiteMapPath1" Runat="server"

  PathDirection="CurrentToRoot"

  PathSeparator=" <-- " >

</asp:SiteMapPath>

五、限制顯示的父連結的數量

在包含 SiteMapPath 控件的 ASP.NET 網頁中，向該控件添加 ParentLevelsDisplayed 屬性。

例如，最多顯示兩個父連結的 SiteMapPath 控件的代碼如下所示：

<asp:SiteMapPath ID="SiteMapPath1" Runat="server"

  ParentLevelsDisplayed="2" >

</asp:SiteMapPath>