Showing the Entire Site Structure

As Figure 19.7 shows, the SiteMapPath control displays only the current section based on the page where the user is visiting and those immediate ancestor sections.

Although the breadcrumb interface provided by the SiteMapPath makes it easy for a visitor to pinpoint his location in the site's navigational hierarchy and navigate further up the hierarchy quickly, it does not enable him to easily jump to any section of the site.

For example, imagine that a visitor comes to our online bookstore's home page. While there's only text right now, imagine that the page has links to the various genre pages titled Business Books, Fiction Books, and Technology Books. Our imaginary visitor might click on Technology Books, which would take her to Technology/Default.aspx, where there might be some technology books listed as well as links to drill down into the subcategories, Computer Books and Electronics Books. Say that our user clicks on the Computer Books link. On this page the SiteMapPath shows Home > Technology > Computers and would list the computer books for sale. However, at this point if the user decides that she wants to look at books on electronics instead, or if she realizes technology books aren't her thing and she'd rather browse the fiction titles, the user has to click her browser's Back button or go back via the breadcrumb to the appropriate parent level, and then drill down into whatever category she's interested in. The point is, the user can't jump directly from the computer books page to the electronics books or fiction books pages.

To allow a visitor to quickly hop to any section from any page, we need to use a navigation user interface element that lists the entire site structure. The final two ASP.NET navigation Web controlsthe TreeView control and the Menu controlprovide this functionality.

The Menu and TreeView controls are similar to the GridView and DetailsView controls examined in Hour 15 in that they require a data source control that contains the data to display. ASP.NET provides a SiteMapDataSource control that automatically retrieves the data from the site map and provides it in a manner that the TreeView and Menu controls can work with. Unlike the SqlDataSource control we used when working with the GridView and DetailsView, the SiteMapDataSource control doesn't have any wizard or require any configuration on our part.

Displaying the Site's Structure in a TreeView

The TreeView control lists the sections of the website as defined in the site map in a collapsible tree. A visitor can quickly see all of the sections of the site and his position in the site structure hierarchy. Each node in the tree is rendered as a hyperlink that whisks the user to the appropriate section when clicked.

Let's add a TreeView to the Home section (Default.aspx in the root directory). To do so, we must first add a SiteMapDataSource control to the page; this control can be found in the Data section of the Toolbox. Next, add the TreeView control to the page and, from its smart tag, specify the data source as the SiteMapDataSource we just added to the page. After we specify the TreeView's data source, the TreeView's appearance in the Design view will be updated, mirroring the hierarchy expressed in site map.

Take a moment to visit this page through a browser (see Figure 19.8). When trying out this control, notice that you can jump to any section in the site by clicking the appropriate section title in the TreeView. Furthermore, you can expand or collapse the TreeView's nodes by clicking on the + or icons on the left of those nodes that have children nodes. Also, note that the SiteMapDataSource control does not cause any visual effect in the browser. The SiteMapDataSource, just like the SqlDataSourceControl examined in previous hours, simply retrieves data from a sourcein particular, the site mapand does not render into HTML markup.

Figure 19.8. The TreeView's structure mirrors the site map.

Customizing the TreeView's Appearance

Like the SiteMapPath control, the TreeView contains a number of appearance-related properties, as well as an Auto Format option, that we can use to highly customize the look and feel of the TreeView. The TreeView is made up of a number of nodes, with each node representing a section defined in the site map. Each node has zero or one parent nodes and zero to many children nodes. For example, in the TreeView shown in Figure 19.8, the Home node has no parent and five childrenAbout, On Sale, Business, Fiction, and Technology. The About node has one parentHomeand two childrenLegal and Privacy. The Business node has one parentHomeand no children.

The four types of nodes in a TreeView are

• Root Nodes These nodes have no parent (Home).

• Parent Nodes These are nodes other than the Root Nodes that have children nodes (About and Technology).

• Leaf Nodes These nodes have a parent but no children nodes (Legal, Privacy, Business, Fiction, Computers, and Technology).

• Selected Node The selected node is the one that corresponds to the current page being visited. So when we're visiting the Home section, the Home node is the Selected Node; when we're visiting the Business books section, Business is the Selected Node.

Each of these types of nodes has style properties, which can be found in the Styles section of the Properties window. These style properties, which have subproperties like BackColor, BorderColor, BorderWidth, BorderStyle, Font, and so on, affect the appearance of these classes of nodes. For example, setting the LeafNodeStyle property's BackColor subproperty to Red will cause all Leaf Nodes to have a red background color.

In addition to the RootNodeStyle, ParentNodeStyle, LeafNodeStyle, and SelectedNodeStyle style properties, there are two additional node-related style properties: NodeStyle and HoverNodeStyle. NodeStyle specifies the default style applied to all nodes in the TreeView. HoverNodeStyle indicates the style settings to be applied when the user hovers his mouse pointer over a particular node.

Did you Know?

Using the HoverNodeStyle property helps to provide feedback to the visitor, showing him what node he's currently hovered over. Personally, I like to set the HoverNodeStyle's ForeColor and BackColor properties to complementary values, both of which stand out from the default node style.

The Styles section in the Properties window also includes a LevelStyles property. This property allows you to specify style information for particular levels of the TreeView, with the first level being the set of Root Nodes, the second level being those nodes that are children of the first-level nodes, the third level being the children of the second-level nodes, and so on. To specify a unique style for each level, go to the LevelStyles property in the Properties window and click the ellipses icon to the right of the property name. This will bring up the TreeNodeStyle Collection Editor dialog box, from which you can define the style for each level.

Click the Add button to add a new level to the list of levels on the left. For each level, you can specify its appearance-related properties from the list on the right.

Note that the topmost level in the list on the left corresponds to the first level (the set of Root Nodes), while the second level from the top corresponds to the second level (the children of the Root Nodes), and so on. Figure 19.9 shows the TreeNodeStyle Collection Editor dialog box for a TreeView control that has the style settings made for the first two levels.

Figure 19.9. The styles for the TreeView's first two levels have been specified.

In addition to the properties in the Styles section of the Properties window, the TreeView contains a number of styles in the Appearances section worth noting. Of course, there are the usual propertiesBackColor, CssClass, Font, and so onbut there are also a number of TreeView-specific properties. These appearance-related TreeView-specific properties are listed in Table 19.2.

Table 19.2. The TreeView-specific Appearance Properties

Property Name	Description
CollapseImageTooltip ExpandImageTooltip	Indicate the tooltip shown to the end user when she hovers the mouse pointer over the collapse or expand icons for a node. Any instances of {0} in the property value are replaced with the node's text. For example, an ExpandImageTooltip value of Expand {0} would display "Expand Home" when the user hovers her mouse pointer over the Home node's expand icon. (A tooltip is a small yellow box with a brief explanation or help message that appears when the user's mouse pointer hovers over a particular region on the web page.)
CollapseImageUrl ExpandImageUrl NoExpandImageUrl	Specify the image URLs to use for the collapse and expand icons for non-Leaf Nodes (those that can be expanded or collapsed), as well as the image to use for Leaf nodes (those nodes that cannot be expanded or collapsed because they have no children). You can also use the ImageSet property to indicate the collapse and expand icons.
ImageSet	Allows the TreeView's images to be custom defined or based on a packaged set of predefined images. Set this property to Custom to choose your own images or pick one of the numerous options to use predefined images. Defaults to Custom.
NodeIndent	Specifies the number of pixels to indent each level of the TreeView. Defaults to 20.
NodeWrap	Specifies a Boolean property that indicates whether a node's text should be wrapped. Defaults to False.
ShowExpandCollapse	Specifies a Boolean property that indicates whether the expand and collapse icons are shown. Defaults to TRue.
ShowLines	Specifies a Boolean property that indicates whether lines are drawn between each node and level in the TreeView. This property can also be turned on or off from the TreeView's smart tag.

The ImageSet property provides a list of packaged images to display next to each icon. This list includes choices like WindowsHelp, BulletedList, Events, and Contacts, each providing a different set of images for expand and collapse icons for non-Leaf Nodes, as well as images for the nonexpandable, noncollapsible Leaf Nodes. (Figure 19.10 shows the icons used when the ImageSet property is set to Contacts.) If you want to provide your own images, set ImageSet to Custom and then provide the URLs to your custom images in the CollapseImageUrl, ExpandImageUrl, and NoExpandImageUrl properties.

Figure 19.10. Let the Auto Format dialog box help you improve the appearance of the TreeView.

If you would rather let Visual Web Developer choose the appearance-related property settings, you can always use the Auto Format option, which is available through the TreeView's smart tag. Figure 19.10 shows the TreeView's Auto Format dialog box when choosing the Contacts Auto Format option.

Using Menus to Show the Site's Structure

Like the TreeView control, the Menu control displays the entire contents of the site map. Rather than displaying the contents of the site map as a tree, however, the Menu control displays the items using a menu interface. By default, each section defined in the site map is rendered as an item in the menu with submenus used to reflect the hierarchy. To display navigation using a Menu control, we must first add a SiteMapDataSource control to the page that will contain the menu.

Let's add a Menu control to the Default.aspx page in the Fiction folder. Open this page in Visual Web Developer and start by adding a SiteMapDataSource control; next, add the Menu control, setting its data source to the SiteMapDataSource control just added. After you specify the Menu control's data source, the Menu will be updated in the Design view to reflect the structure of the site map. By default, the menu will show all top-level elements in the site structure hierarchyHome, for our site map.

After setting the data source, take a minute to view this page in a browser. On the page the menu contains just a single displayed menu item, Home. If you move your mouse pointer over the Home item, though, a submenu appears, listing About, On Sale, Business, Fiction, and Technology. If you move your mouse pointer over About or Technology, another submenu appears, listing the appropriate items (see Figure 19.11). Clicking on a menu item will whisk you to the corresponding section in the site.

Figure 19.11. The menu's Home and Technology options have been selected.

Configuring the Menu's Static and Dynamic Portions

A Menu control is composed of both a static and dynamic portion. The static portion of the menu is always shown when viewing the page, whereas the dynamic portion is shown only when the user interacts with the menu. By default, only the top-level sections in the site map are static; all other site map sections are placed in the dynamic portion. In Figure 19.11, only the Home menu item is shown when the page loads; the other sections are displayed only when the user interacts with the menu, hovering the mouse pointer over the Home menu item.

The number of levels in the site map hierarchy that make up the static portion of the menu can be specified by the menu control's StaticDisplayLevels property. The default value for this property is 1. If we change this to 2, however, all of the sections in the first or second levels of the site map hierarchyHome, About, On Sale, Business, Fiction, and Technologywill be shown as static menu items. Figure 19.12 shows the Menu control in the Visual Web Developer Design view after the StaticDisplayLevels property has been set to 2.

Figure 19.12. The menu shows the first two levels of the site map hierarchy statically.

Now instead of just the Home menu item showing when the page loads, Home, About, On Sale, Business, Fiction, and Technology will be displayed. The third level, which includes Legal, Privacy, Computers, and Electronics, will still be displayed in the dynamic portion. That is, the user will have to hover her mouse pointer over the About menu item to be able to see the Privacy or Legal menu items.

Did you Know?

When the user's mouse pointer leaves a dynamically displayed submenu, the submenu stays for a period specified by the Menu control's DisappearAfter property. This value defaults to 500 milliseconds, which leaves a dynamic menu displayed for 0.5 seconds after the user's mouse pointer leaves the submenu. You can increase or decrease this time as needed.

Customizing the Menu's Appearance

The Menu control contains a wide array of appearance-related properties, far too many to cover them all in this hour. Rather than enumerate all of these properties, we'll instead look at the more germane ones and focus on the concepts as opposed to the specifics.

By the Way

As always, I encourage you to tinker around with all of the Menu control's properties, not just those that we cover here. Try changing them and observe the effects; review the description of the properties using the MSDN Library. (We discussed using the MSDN Library in Hour 3, "Using Visual Web Developer.")

You should not be surprised that the Menu control has the base set of appearance-related properties: BackColor, ForeColor, Font, and the like. In addition to these properties, it has appearance-related properties for the dynamic and static portions of the Menu. The names of these properties start with either Static or Dynamic, such as StaticItemFormatString and DynamicItemFormatString. The prefix indicates whether the property value applies to the dynamic or static portion of the Menu control.

Table 19.3 lists a number of the Menu control's appearance-related properties. Figure 19.13 shows a Menu control after a number of these properties have been set.

Table 19.3. The Menu Control Contains Properties That Apply to Its Dynamic and Static Portions

Property Name	Description
DynamicEnableDefault PopOutImage StaticEnableDefault PopOutImage	Specify a Boolean property that indicates whether an image is displayed to show that an item has a submenu. Defaults to true. In Figure 19.11, the arrow icon next to Home was present because StaticEnableDefaultPopOutImage was set to true, and the arrow image next to About and Technology was present because DynamicEnableDefaultPopOutImage was set to TRue.
DynamicItemFormatString StaticItemFormatString	Specify the text displayed in the menu item. Use {0} to inject the title of the menu item's corresponding site map section. That is, using Visit {0} would display "Visit Business" (instead of "Business") for the Business menu item.
DynamicPopOutImageText FormatString StaticPopOutImageText FormatString	Specify the tooltip text displayed for the pop out image. Include a {0} to inject the current site map section's title.
DynamicPopOutImageUrl StaticPopOutImageUrl	Specify the URL to your own image if you want to use a pop-out image other than the default arrow.
StaticSubMenuIndent	Specifies the indentation between a static menu item and its static submenu. As Figure 19.12 shows, when displaying multiple levels in the static portion, there's an indentation between levels. Use this property to tailor the amount of indentation. (Defaults to 16 pixels.)
Orientation	Specifies whether the menu is laid out horizontally or vertically. Can be either Vertical or Horizontal; defaults to Vertical..
DynamicHorizontalOffset DynamicVerticalOffset	Specify the offset in pixels between the right border of a menu item and the left border of its submenu item (or of the bottom border of a menu item and the top border of its submenu item). Both properties default to 0.
ItemWrap	Specifies a Boolean property that indicates whether the text in a menu item should be wrapped. Defaults to False.

Figure 19.13. This menu has a Horizontal Orientation and was further customized with Auto Format.

Did you Know?

Like the SiteMapPath and TreeView controls examined earlier in this hour, the Menu control also offers an Auto Format option, which is available through its smart tag.

Furthermore, the Menu control has a number of properties in the Styles section of its Properties window that you can use to customize the appearance of the static and dynamic submenus and menu items.