Interaction with Navigation Bar

• Apr 01, 2018
• 3 minutes to read

Office Navigation Bar was originally designed to be used in conjunction with a Navigation Bar control. These controls can be used together in two scenarios:

1. the Office Navigation Bar serves as a bottom navigation panel for the Navigation Bar;
2. the Office Navigation Bar replaces specific Navigation Bar Groups (or all of them) when in collapsed state.

This article provides information on both of these scenarios.

Bottom Navigation Panel

When used as a bottom navigation panel for a Navigation Bar, the Office Navigation Bar is populated automatically. In turn, the Navigation Bar (in its Navigation Pane View) loses all visual elements except for the currently active NavBarGroup and the expand/collapse button. Selecting Office Navigation Bar items activates corresponding Navigation Bar groups. The animation below illustrates this interaction. Transition effects captured in this animation relate to the Navigation Frame that switches its pages upon clicking Office Navigation Bar items.

To combine these two controls, follow the steps below.

1. Switch the Navigation Bar to the Navigation Pane (recommended) or Side Bar View. The Explorer Bar View cannot communicate with an Office Navigation Bar.
2. Populate the Navigation Bar with groups and items.
3. Remove existing Office Navigation Bar items and check the OfficeNavigationBar.Orientation property value to make sure the control is oriented horizontally.
4. Assign your Navigation Bar to the OfficeNavigationBar.NavigationClient property. Refer to this link to learn how the Office Navigation Bar retrieves Navigation Bar groups and creates related items.
5. Optionally, set the OfficeNavigationBar.Compact property to true. In compact mode, the Office Navigation Bar will be docked to the Navigation Bar’s bottom, delimited from the rest of the control by a splitter. In this mode, Office Navigation Bar items display NavBar groups icons instead of their captions. See the animation below for an example.

Collapsed NavPane Client

Another integration scenario is using the Office Navigation Bar as a replacement for one or several NavBarGroups when the Navigation Bar is collapsed (see the animation below). This scenario emulates the UI found in MS Outlook 2013 and is useful if you need to display custom items in the collapsed Navigation Bar. Note that this works only when the Navigation Bar is in Navigation Pane View.

The following steps illustrate how to implement this integration scenario.

1. Switch the Navigation Bar to the Navigation Pane View and populate it with groups and items.
2. Add an Office Navigation Bar and populate it with custom items.
3. Switch the OfficeNavigationBar.Orientation property to Vertical.
4. Assign your Office Navigation Bar to the NavBarGroup.CollapsedNavPaneContentControl property to replace an individual collapsed group. Alternatively, use the OptionsNavPane.CollapsedNavPaneContentControl property to replace any collapsed Navigation Pane group with this Office Navigation Bar.