Views

• Oct 20, 2021
• 3 minutes to read

A Navigation Bar View determines the way the control and its child elements look and behave.

• Explorer Bar View
• Side Bar View
• Navigation Pane
• Change a Navigation Bar View

Explorer Bar View

The default Navigation Bar View.

Demo Center 22.1: Run a demo

Key features:

• groups can be expanded and collapsed individually;
• group “…List” styles are not supported (the NavBarGroup.GroupStyle property);
• end-users can utilize either exterior buttons or a regular scrollbar to scroll the oversized Navigation Bar content (the NavBarControl.SkinExplorerBarViewScrollStyle property);
• the last Navigation Bar group can stretch to fill the remaining control space (the NavBarControl.ExplorerBarStretchLastGroup property).

Side Bar View

Emulates the old-styled side bar similar to the one that was in Microsoft Outlook prior to version 2003.

Key features:

• only one Navigation Bar group can be expanded at a time;
• an expanded group fills the entire control space, which is not occupied with headers of other (inactive) groups;
• supports interior scroll buttons to scroll the content of an expanded group.

Navigation Pane View

An advanced View inspired by Microsoft Outlook’s navigation pane.

Demo Center 22.1: Run a demo

On touch devices, the Navigation Pane View does not support group content scrolling using swipe gestures. Group content can be scrolled by tapping the scroll buttons or dragging this content.

Navigation Pane View: Layout

In Navigation Pane View, the Navigation Bar consists of four zones.

Header Area Displays an active group icon and caption and the expand/collapse button. Settings: NavigationPageDefaultProperties.ShowExpandButton | OptionsNavPane.ShowGroupImageInHeader | OptionsNavPane.ShowHeaderText | OptionsNavPane.HeaderImageSize | NavBarAppearances.NavigationPaneHeader Active Group Area Displays the content of a currently active group. Inactive Group Area Displays captions and icons of inactive groups. End-users can click these captions to activate a corresponding group and show its content in the active group area. Settings: OptionsNavPane.GroupImageShowMode Overflow Panel Shows icons for all inactive groups that cannot be displayed within the inactive group area due to its size. The ellipsis buttons allow end-users to select other inactive groups and customize the control. Settings: OptionsNavPane.ShowOverflowPanel | OptionsNavPane.ShowOverflowButton Splitter An element that can be dragged at runtime to change the size ratio of active and inactive group zones. Settings: OptionsNavPane.ShowSplitter

Navigation Pane View: Collapsed State

End-users can click the expand/collapse button in the NavBar header area to minimize the control. To do the same in code, modify the OptionsNavPane.NavPaneState property.

Header Area Displays only the expand/collapse button. Active Group Area Displays a button that invokes the resizable panel that shows the content of a currently active group. A group caption is rotated vertically. Settings: OptionsNavPane.PopupFormSize | OptionsNavPane.MaxPopupFormWidth Inactive Group Area Buttons that activate groups upon clicking display only group icons. Overflow Panel Displays only the ellipsis button.

Navigation Pane View: Customization Menu

The ellipsis button in the overflow panel area allows end-users to change the number of items shown in the inactive group area, activate hidden groups and (if the OptionsNavPane.AllowOptionsMenuItem property is enabled) customize the group order and font settings.

Navigation Pane View: Integration with the Office Navigation Bar Control

The Office Navigation Bar control can replace the inactive group and overflow panel areas of a Navigation Pane. See this link to learn more.

Change a Navigation Bar View

To change a Navigation Bar View, modify the NavBarControl.PaintStyleKind property. At design time, this property is accessible through the control’s smart tag.