HOW TO：自訂 SiteMapPath Web 伺服器控制項的外觀

發行項
10/22/2014

更新：2007 年 11 月

網站巡覽控制項的視覺外觀，可藉由設定該控制項的屬性或設定控制項可用的樣板來自訂。根據 SiteMapPath 註解區段中所描述的兩條優先順序規則，樣板和樣式適用於連結。

或者，您可以將主題或控制面板套用至控制項，或開發自訂網站巡覽控制項以符合您的呈現需求。如需有關套用主題至 Web 控制項的詳細資訊，請參閱 HOW TO：自訂 ASP.NET CreateUserWizard 控制項。

SiteMapPath 控制項會顯示巡覽路徑 (也稱為 Breadcrumb 或 Eyebrow)，巡覽路徑顯示的連結是從目前網頁返回至網站首頁的路徑。在 ASP.NET 頁面上，SiteMapPath 控制項所顯示的內容類似以下所示：

首頁 > 服務 > 訓練

TreeView 和 Menu 控制項也會呈現網站導覽的資料，此兩者與 SiteMapPath 控制項雷同，可像大部分的其他 Web 控制項一樣進行自訂。此主題是要說明如何使用 SiteMapPath Web 伺服器控制項的下列自訂功能：

指定顯示於連結之間的字元或影像
將巡覽路徑反向
指定顯示父連結的數目

本主題中的程序假設您已建立網站導覽以及包含 SiteMapPath 控制項的網頁。您可以使用 ASP.NET 網站導覽中的 Web.sitemap 範例檔。

若要自訂連結的樣式屬性

在包含 SiteMapPath 控制項的 ASP.NET Web 網頁中，將下面的屬性加入至控制項：

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 屬性。

如果您想要每個連結的樣式都不一樣，請對 SiteMapPath 控制項的 ParentNodeStyle、CurrentNodeStyle 和 PathSeperatorStyle 屬性重複上一個步驟。

注意事項：

為了增進效率，您可以使用 NodeTemplate 來一次自訂所有連結的樣式。如需詳細資訊，請參閱 ASP.NET Web 伺服器控制項樣板。

注意事項：
為了增進效率，您可以使用 NodeTemplate 來一次自訂所有連結的樣式。如需詳細資訊，請參閱 ASP.NET Web 伺服器控制項樣板。

若要自訂顯示於連結之間的字元

在包含 SiteMapPath 控制項的 ASP.NET Web 網頁中，將 PathSeparator 屬性加入至控制項。

例如，SiteMapPath 控制項的程式碼，應如下所示：
```
<asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
  PathSeparator=" :: ">
</asp:SiteMapPath>
```
SiteMapPath 控制項所顯示的內容類似以下所示：

首頁 :: 服務 :: 訓練

您可以使用任一字串來分隔連結，但是如果要使用影像，請遵循下一個程序。

若要指定顯示於連結之間的影像

在包含 SiteMapPath 控制項的 ASP.NET Web 網頁中，將以下數行程式碼加入至控制項：

<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 Web 網頁中，將 PathDirection 和 PathSeparator 加入至控制項。

例如，SiteMapPath 控制項的程式碼，應如下所示：
```
<asp:SiteMapPath ID="SiteMapPath1" Runat="server"
  PathDirection="CurrentToRoot"
  PathSeparator=" <-- " >
</asp:SiteMapPath>
```

若要限制顯示父連結的數目

在包含 SiteMapPath 控制項的 ASP.NET Web 網頁中，將 ParentLevelsDisplayed 屬性加入至控制項。

例如，最多將顯示兩個父連結的 SiteMapPath 控制項的程式碼，應如下所示：
```
<asp:SiteMapPath ID="SiteMapPath1" Runat="server"
  ParentLevelsDisplayed="2" >
</asp:SiteMapPath>
```

協助工具

網站中的每一個網頁通常都會使用網站巡覽控制項。螢幕助讀裝置和其他輔助裝置可以在每次瀏覽網頁和回傳時，大聲朗讀巡覽控制項中的文字。

SiteMapPath、TreeView 和 Menu 等網站巡覽控制項每個都包含名為 SkipLinkText 的屬性，此屬性可允許略過後續網頁中或同一網頁檢視中的重複資訊。

若要使用協助工具省略功能

在包含巡覽控制項的 ASP.NET Web 網頁中，將下面的屬性加入至控制項：
```
SkipLinkText="Skipped Menu"
```
例如，SiteMapPath 控制項的程式碼，應如下所示：
```
<asp:SiteMapPath ID="SiteMapPath1" 
  Runat="server" 
  SkipLinkText="Skip Breadcrumb">
</asp:SiteMapPath>
```

請參閱

共用方式為