Site Navigation-Using the Navigation Controls

Understanding Site Maps
Before you learn about the navigation controls, you first need to understand Site Maps. All three navigation controls use Site Maps to retrieve navigation information. A Site Map enables you to represent the navigational relationships between the pages in an application, independent of the actual physical relationship between pages as stored in the file system.

Site Maps use the provider model. In the next chapter, you learn how to create custom Site Map providers to store Site Maps in custom data stores such as database tables. The examples in this chapter take advantage of the default XML Site Map provider, which enables you to store a Site Map in an XML file. By default, the navigation controls assume the existence of an XML file named Web.sitemap, which is located in the root of your application.

A Site Map file contains <siteMapNode> elements. There can be only one top-level node. A <siteMapNode> supports three main attributes:
  • title—A brief title that you want to associate with a node.
  • description—A longer description that you want to associate with a node.
  • url—A URL that points to a page or other resource.
Using the SiteMapPath Control
The SiteMapPath control enables you to navigate easily to any parent page of the current page. It displays the standard bread crumb trail that you see on many popular websites

The SiteMapPath uses both the title and description attributes from the <siteMapNode> elements contained in the Web.sitemap file. The title attribute is used for the node (link) text, and the description attribute is used for the node tool tip. Typically, you do not add a SiteMapPath control to individual pages in your website. If you add a SiteMapPath control to a Master Page, then you can display the  SiteMapPath control automatically on every page.

The SiteMapPath control supports the following properties:
  • ParentLevelsDisplay—Enables you to limit the number of parent nodes displayed. By default, a SiteMapPath control displays all the parent nodes.
  • PathDirection—Enables you to reverse the order of the links displayed by the SiteMapPath control. Possible values are RootToCurrent (the default) or CurrentToRoot.
  • PathSeparator—Enables you to specify the character used to separate the nodes displayed by the SiteMapPath control. The default value is >.
  • RenderCurrentNodeAsLink—Enables you to render the SiteMapPath node that represents the current page as a link. By default, the current node is not rendered as a link.
  • ShowToolTips—Enables you to disable the display of tool tips.
  • SiteMapProvider—Enables you to specify the name of an alternate Site Map provider to use with the SiteMapPath control.
  • SkipLinkText—Enables you to specify more specific text for skipping the links displayed by the SiteMapPath control. The default value for this property is Skip Navigation Links.


All the navigation controls automatically render a skip navigation link to meet accessibility requirements. The skip navigation link is read by a screen reader, but it is not displayed in a normal browser. If you are interacting with a web page through a screen reader, you don’t want to hear the list of navigation links each and every time you open a page. (It is the equivalent of listening to a phone menu every time you open a page.) The skip navigation link enables users of screen readers to skip the repetitive reading of links.

Formatting the SiteMapPath Control
You can use either styles or templates to format the SiteMapPath control. The control supports the following Style objects:
  • CurrentNodeStyle—Formats the SiteMapPath node that represents the current page.
  • NodeStyle—Formats every node rendered by the SiteMapPath control.
  • PathSeparatorStyle—Formats the text displayed between each SiteMapPath node.
  • RootNodeStyle—Formats the root (first) node rendered by the SiteMapPath control.

Furthermore, you can use templates with the SiteMapPath control to format the appearance of the control (and change its behavior). The SiteMapPath control supports the following templates:
  • CurrentNodeTemplate—Template for the SiteMapPath node that represents the current page.
  • NodeTemplate—Template for each SiteMapPath node that is not the current or root node.
  • PathSeparatorTemplate—Template for the text displayed between each SiteMapPath node.
  • RootNodeTemplate—Template for the root (first) node rendered by the SiteMapPath control.
Using the Menu Control
The Menu control enables you to create two types of menus. You can use the Menu control to create the left-column menu that appears in many websites. In other words, you can use the Menu control to display a vertical list of links. You also can use the Menu control to create a menu that more closely resembles the dropdown menus that appear in traditional desktop applications. In this case, the Menu control renders a horizontal list of links. Unlike the SiteMapPath control, the Menu control can represent other types of data than Site Map data. Technically, you can bind a Menu control to any data source that implements the IHiearchicalDataSource or IHiearchicalEnumerable interface.

Using the Menu Control with the MultiView Control
When the Menu control is used with the MultiView control, you can create tabbed pages. You use the Menu control to display the tabs and the MultiView control to display the content that corresponds to the selected tab.

The Menu control pushed down one pixel and pushed right 10 pixels to hide the border between the selected tab and the contents of the tab. (The Menu control has a relative position.) Notice that the style rule for the selected tab includes a white bottom border. This trick works in Internet Explorer 6, Firefox 1, and Opera 8.

Binding to a Site Map
Like the SiteMapPath control, you can use the Menu control with a Site Map. Users can click menu items to navigate to particular pages in your website. Unlike the SiteMapPath control, however, the Menu control does not automatically bind to a Site Map. You must explicitly bind the Menu control to a SiteMapDataSource control to display nodes from a Site Map.

Binding to an XML File
As an alternative to binding a Menu control to a SiteMapDataSource control, you can bind the control to an XML document by using the XmlDataSource control.

Binding to Database Data
You can’t bind a Menu control directly to database data. Neither the SqlDataSource nor ObjectDataSource controls implement the IHierachicalDataSource interface. Therefore, if you want to represent database data with the Menu control, then you need to perform some more work. One option is to create your own SqlHiearachicalDataSource control. You can do this either by deriving from the base HiearchicalDataSourceControl class or implementing the IHiearchicalDataSource interface.

Formatting the Menu Control
The Menu control supports an abundance of properties that can be used to format the appearance of the control. Many of these properties have an effect on static menu items, and many of these properties have an effect on dynamic menu items. Static menu items are menu items that always appear. Dynamic menu items are menu items that appear only when you hover your mouse over another menu item. First, the Menu control supports the following general properties related to formatting:
  • DisappearAfter—Enables you to specify the amount of time, in milliseconds, that a dynamic menu item is displayed after a user moves the mouse away from the menu item.
  • DynamicBottomSeparatorImageUrl—Enables you to specify the URL to an image that appears under each dynamic menu item.
  • DynamicEnableDefaultPopOutImage—Enables you to disable the image (triangle) that indicates that a dynamic menu item has child menu items.
  • DynamicHorizontalOffset—Enables you to specify the number of pixels that a dynamic menu item is shifted relative to its parent menu item.
  • DynamicItemFormatString—Enables you to format the text displayed in a dynamic menu item.
  • DynamicPopOutImageTextFormatString—Enables you to format the alt text displayed for the popout image.
  • DynamicPopOutImageUrl—Enables you to specify the URL for the dynamic popout image. (By default, a triangle is displayed.)
  • DynamicTopSeparatorImageUrl—Enables you to specify the URL to an image that appears above each dynamic menu item.
  • DynamicVerticalOffset—Enables you to specify the number of pixels that a dynamic menu item is shifted relative to its parent menu item.
  • ItemWrap—Enables you to specify whether the text in menu items should wrap.
  • MaximumDynamicDisplayLevels—Enables you to specify the maximum number of levels of dynamic menu items to display.
  • Orientation—Enables you to display a menu horizontally or vertically. (The default value is Vertical.)
  • ScollDownImageUrl—Enables you to specify the URL to an image that is displayedand that enables you to scroll down through menu items.
  • ScrollDownText—Enables you to specify alt text for the ScrollDown image.
  • ScrollUpImageUrl—Enables you to specify the URL to an image that is displayed and that enables you to scroll up through menu items.
  • ScrollUpText—Enables you to specify alt text for the ScrollUp image.
  • SkipLinkText—Enables you to modify the text displayed by the skip link. (The skip link enables blind users to skip past the contents of a menu.)
  • StaticBottomSeparatorImageUrl—Enables you to specify the URL to an imagethat appears below each static menu item.
  • StaticDisplayLevels—Enables you to specify the number of static levels of menuitems to display.
  • StaticEnableDefaultPopOutImage—Enables you to disable the default popoutimage that indicates that a menu item has child menu items.
  • StaticItemFormatString—Enables you to format the text displayed in each staticmenu item.
  • StaticImagePopOutFormatString—Enables you to specify the alt text displayedby the popout image.
  • StaticPopOutImageUrl—Enables you to specify the URL for the popout image.
  • StaticSubMenuIndent—Enables you to specify the number of pixels that a staticmenu item is indented relative to its parent menu item.
  • StaticTopSeparatorImageUrl—Enables you to specify the URL to an image thatappears above each static menu item.
  • Target—Enables you to specify the window in which a new page opens when youclick a menu item.

This list includes several interesting properties. For example, notice that you can specify images for scrolling up and down through a list of menu items. These images appear when you constrain the height of either the static or dynamic menu. The Menu control also exposes several Style objects. You can use these Style objects as hooks to which you can attach Cascading Style Sheet classes:
  • DynamicHoverStyle—Style applied to a dynamic menu item when you hover yourmouse over it.
  • DynamicMenuItemStyle—Style applied to each dynamic menu item.
  • DynamicMenuStyle—Style applied to the container tag for the dynamic menu.
  • DynamicSelectedStyle—Style applied to the selected dynamic menu item.
  • StaticHoverStyle—Style applied to a static menu item when you hover yourmouse over it.
  • StaticMenuItemStyle—Style applied to each static menu item.
  • StaticMenuStyle—Style applied to the container tag for the static menu.
  • StaticSelectedStyle—Style applied to the selected static menu item.
Furthermore, you can apply styles to menu items based on their level in the menu. For example, you might want the font size to get progressively smaller depending on how deeply nested a menu item is within a menu. You can use three properties of the Menu control to format menu items, depending on their level:
  • LevelMenuItemStyles—Contains a collection of MenuItemStyle controls, whichcorrespond to different menu levels.
  • LevelSelectedStyles—Contains a collection of MenuItemStyle controls, whichcorrespond to different menu levels of selected menu items.
  • LevelSubMenuStyles—Contains a collection of MenuItemStyle controls, whichcorrespond to different menu levels of static menu items.

Finally, the MenuItem class itself includes several useful formatting properties:
  • ImageUrl—Enables you to specify the URL for an image that is displayed next to a menu item.
  • PopOutImageUrl—Enables you to specify the URL for an image that is displayed when a menu item contains child menu items.
  • SeparatorImageUrl—Enables you to specify the URL for an image that appears below a menu item.
  • Selectable—Enables you to prevent users from selecting (clicking) a menu item.
  • Selected—Enables you to specify whether a menu item is selected.
  • Target—Enables you to specify the name of the window that opens when you click a menu item.
Using Templates with the Menu Control

The Menu control supports templates. You can use templates to completely customize the appearance of the Menu control. The Menu control supports the following two templates:
  • DynamicItemTemplate—Template applied to dynamic menu items.
  • StaticItemTemplate—Template applied to static menu items.

Using the TreeView Control
The TreeView control is very similar to the Menu control. Like the Menu control, you can use the TreeView control to display hierarchical data. The TreeView control binds to any data source that implements the IHierarchicalDataSource or IHiearchicalEnumerable interface.

Declaratively Adding Tree Nodes
A TreeView control is made up of TreeNode objects. You can build a TreeView control by declaring TreeNode objects in the TreeView control’s Items collection.

Formatting the TreeView Control
The TreeView control supports an abundance of properties that have an effect on how the TreeView is formatted. Here are some of the more useful properties of a TreeView control, which modify its appearance (this is not a complete list):
  • CollapseImageToolTip—Enables you to specify the title attribute for the collapse image.
  • CollapseImageUrl—Enables you to specify a URL to an image for the collapse image.
  • ExpandDepth—Enables you to specify the number of TreeNode levels to display initially.
  • ExpandImageToolTip—Enables you to specify the title attribute for the expand image.
  • ExpandImageUrl—Enables you to specify the URL to an image for the expand image.
  • ImageSet—Enables you to specify a set of images to use with the TreeView control.
  • LineImagesFolder—Enables you to specify a folder that contains line images.
  • MaxDataBindDepth—Enables you to specify the maximum levels of TreeView levels to display when binding to a data source.
  • NodeIndent—Enables you to specify the number of pixels to indent a child Tree node.
  • NodeWrap—Enables you to specify whether text is wrapped in a Tree node.
  • NoExpandImageUrl—Enables you to specify the URL to an image for the NoExpand image (typically, an invisible spacer image).
  • ShowCheckBoxes—Enables you to display check boxes next to each Tree node. Possible values are All, Leaf, None, Parent, and Root.
  • ShowExpandCollapse—Enables you to disable the expand and collapse icons that appear next to each expandable node.
  • ShowLines—Enables you to show connecting lines between Tree nodes.
  • SkipLinkText—Enables you to specify the text used for skipping the contents of the TreeView control. (The Skip Link contains hidden text that is accessible only to users of assistive devices.)
  • Target—Enables you to specify the name of the window that opens when you navigate to a URL with the TreeView control.

The TreeNode object itself also supports several properties that have an effect on the appearance of its containing TreeView. Here is a list of the most useful properties of the TreeNode object:
  • Checked—Enables you to check the check box that appears next to the Tree node.
  • Expanded—Enables you to initially expand a node.
  • ImageToolTip—Enables you to associate alt text with a Tree node image.
  • ImageUrl—Enables you to specify an image that appears next to a Tree node.
  • NavigateUrl—Enables you to specify the URL to which the current Tree node links.
  • SelectAction—Enables you to specify the action that occurs when you click a Tree node. Possible values are Expand, None, Select, or SelectExpand.
  • Selected—Enables you to specify whether the current Tree node is selected.
  • ShowCheckBox—Enables you to display a check box for the current Tree node.
  • Target—Enables you to specify the name of the window that opens when you navigate to a URL.
  • ToolTip—Enables you to specify a title attribute for the current Tree node.

You can style the TreeView control by attaching Cascading Style Sheet classes to the Style object exposed by the TreeView control. The TreeView control supports the following Style objects:
  • HoverNodeStyle—Style applied to a Tree node when you hover your mouse over a node.
  • LeafNodeStyle—Style applied to leaf Tree nodes (tree nodes without child nodes).
  • NodeStyle—Style applied to Tree nodes by default.
  • ParentNodeStyle—Style applied to parent nodes (tree nodes with child nodes).
  • RootNodeStyle—Style applied to root nodes (tree nodes with no parent nodes).
  • SelectedNodeStyle—Style applied to the selected node.

 Building a SQL Hierarchical Data Source Control
The control is composed out of five separate classes:
  • SqlHierarchicalDataSource—This class represents the actual control. It inherits from the base SqlDataSource control and implements the IHierarchicalDataSource interface.
  • SqlHierarchicalDataSourceView—This class represents the hierarchical data returned by the control. It inherits from the base HierarchicalDataSourceView class.
  • SqlHierarchicalEnumerable—This class represents a collection of SqlNodes.
  • SqlNode—This class represents a particular database row from the data source. It includes methods for retrieving child and parent rows.
  • SqlNodePropertyDescriptor—This class inherits from the base PropertyDescriptor class. It converts the database columns represented by a SqlNode into class properties so that you can bind to the columns using TreeView and Menu control DataBindings.



1 comment: