如何：自定义 SiteMapPath Web 服务器控件的外观

更新：2007 年 11 月

您可以通过设置站点导航控件的属性或为该控件配置适用的模板，自定义该控件的可视外观。模板和样式根据 SiteMapPath 的“备注”部分中介绍的两个优先级规则应用于链接。

此外，您也可以将主题或控件外观应用于控件，还可以开发符合您的呈现需要的自定义站点导航控件。有关将主题应用于 Web 控件的更多信息，请参见 如何：自定义 ASP.NET CreateUserWizard 控件。

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 一次性完成所有链接的样式自定义。有关更多信息，请参见 ASP.NET Web 服务器控件模板。

自定义显示在链接之间的字符

• 在包含 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>
  

辅助功能

网站的每个网页上通常都使用站点导航控件。在每次访问网页和每次回发时，屏幕读取器和其他辅助设备都会朗读导航控件中的文字。

SiteMapPath、TreeView 和 Menu 站点导航控件分别包含一个名为 SkipLinkText 的属性，使用该属性可以跳过后续页或同一页面的不同视图上的重复信息。

使用辅助功能跳过功能

• 在包含导航控件的 ASP.NET 网页上，向该控件添加以下属性：

  SkipLinkText="Skipped Menu"
  

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

  <asp:SiteMapPath ID="SiteMapPath1" 
    Runat="server" 
    SkipLinkText="Skip Breadcrumb">
  </asp:SiteMapPath>
  

请参见

任务

如何：自定义 ASP.NET CreateUserWizard 控件

概念

ASP.NET 站点导航概述

ASP.NET Web 服务器控件模板

SiteMapPath Web 服务器控件概述

自定义 TreeView Web 服务器控件的外观

保证 ASP.NET 站点导航的安全

保证数据访问的安全

其他资源

寄宿环境中的 ASP.NET 应用程序安全性