JavaScript Editor jscript editor     Web designer 
↑


Main Page

The visual appearance of site-navigation controls can be customized by setting the attributes of the control, or by configuring the templates that are available for the control. Templates and styles are applied to links according to two rules of precedence that are described in the Remarks section of SiteMapPath.

Alternatively, you can apply a theme or control skin to a control, or you can develop custom site-navigation controls that meet your rendering needs. For more information about applying themes to Web controls, see How to: Customize the ASP.NET CreateUserWizard Control.

The SiteMapPath control displays a navigation path, which is also known as a breadcrumb or eyebrow, that displays links as a path from the current page back to the home page of the Web site. On an ASP.NET page, the SiteMapPath control displays something like the following:

Home > Services > Training

The TreeView and Menu controls also render site-map data, and they, similar to the SiteMapPath control, can be customized like most other Web controls. This topic describes how to use the following customization features of the SiteMapPath Web server control:

The procedures in this topic assume that you have already created a site map and a page that contains a SiteMapPath control. You can use the example Web.sitemap file in ASP.NET Site Maps.

To customize link style properties

  1. In an ASP.NET Web page that contains a SiteMapPath control, add the following properties to the control:

    В CopyCode imageCopy Code
    RootNodeStyle-Font-Names="Verdana"
RootNodeStyle-ForeColor="Orange"
RootNodeStyle-BorderWidth=2

    For example, the code for the SiteMapPath control might look like the following:

    В CopyCode imageCopy Code
    <asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
  SkipLinkText="Skip Menu"
  RootNodeStyle-Font-Names="Verdana"
  RootNodeStyle-ForeColor="Orange"
  RootNodeStyle-BorderWidth=2 >
</asp:SiteMapPath>

    Most of the properties described in the Style and FontInfo classes are available, including the CssClass property.

  2. If you want the style of each link to be different, repeat the previous step with the ParentNodeStyle, CurrentNodeStyle, and PathSeperatorStyle properties of the SiteMapPath control.

    NoteNote

    To improve performance, you can use the NodeTemplate to customize the style of all the links at once. For more information, see ASP.NET Web Server Control Templates.

To customize a character that displays between links

  • In an ASP.NET Web page that contains a SiteMapPath control, add the PathSeparator property to the control.

    For example, the code for the SiteMapPath control might look like the following:

    В CopyCode imageCopy Code
    <asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
  PathSeparator=" :: ">
</asp:SiteMapPath>

    Your SiteMapPath control will display something like the following:

    Home :: Services :: Training

    You can use any string to separate the links, however to use an image, follow the next procedure.

To specify an image that displays between links

  • In an ASP.NET Web page that contains a SiteMapPath control, add the following lines of code to the control:

    В CopyCode imageCopy Code
    <PathSeparatorTemplate>
  <asp:Image ID="Image1" Runat="Server" 
    Width="20" 
    ImageUrl="Images/PathSeparatorImage.jpg" />
  </PathSeparatorTemplate>
</PathSeparatorTemplate>

    For example, the code for the SiteMapPath control might look like the following:

    В CopyCode imageCopy Code
    <asp:SiteMapPath ID="SiteMapPath1" Runat="server" >
  <PathSeparatorTemplate>
    <asp:Image ID="Image1" Runat="Server" 
      Width="20" 
      ImageUrl="Images/PathSeparatorImage.jpg" />
    </PathSeparatorTemplate>
  </PathSeparatorTemplate>
</asp:SiteMapPath>

To reverse the direction of the path displayed by the SiteMapPath control

  • In an ASP.NET Web page that contains a SiteMapPath control, add the PathDirection and PathSeparator to the control.

    For example, the code for the SiteMapPath control might look like the following:

    В CopyCode imageCopy Code
    <asp:SiteMapPath ID="SiteMapPath1" Runat="server"
  PathDirection="CurrentToRoot"
  PathSeparator=" <-- " >
</asp:SiteMapPath>

To limit the number of parent links displayed

  • In an ASP.NET Web page that contains a SiteMapPath control, add the ParentLevelsDisplayed property to the control.

    For example, the code for a SiteMapPath control that will display a maximum of two parent links might look like the following:

    В CopyCode imageCopy Code
    <asp:SiteMapPath ID="SiteMapPath1" Runat="server"
  ParentLevelsDisplayed="2" >
</asp:SiteMapPath>

Accessibility

Site-navigation controls are typically used on every page in a Web site. Screen readers and other assistive devices read aloud the text in a navigation control during every visit to a page and on every postback.

The SiteMapPath, TreeView, and Menu site-navigation controls each include a property called SkipLinkText that allows repeated information to be skipped on subsequent pages or views of the same page.

To use the accessibility skip feature

  • In an ASP.NET Web page that contains a navigation control, add the following property to the control:

    В CopyCode imageCopy Code
    SkipLinkText="Skipped Menu"

    For example, the code for a SiteMapPath control might look like the following:

    В CopyCode imageCopy Code
    <asp:SiteMapPath ID="SiteMapPath1" 
  Runat="server" 
  SkipLinkText="Skip Breadcrumb">
</asp:SiteMapPath>

See Also



JavaScript Editor jscript editor     Web designer 
→