Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Collapse]Navigation Controls
   [Expand]Navigation Bar
   [Expand]Accordion Control
    Navigation Frame and Tab Pane
    Navigation Pane
    Tile Bar
   [Expand]TileNav Pane
    WindowsUI Button Panel
   [Collapse]Office Navigation Bar
     Interaction with Navigation Bar
   [Expand]Tile Control
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Office Navigation Bar

The OfficeNavigationBar is a customizable navigation bar with flat borderless buttons. This control can operate either separately or in conjunction with the Navigation Bar. The following figure illustrates a sample Office Navigation Bar painted with Office 2013 Light Gray DevExpress skin.

This document will illustrate how to populate and customize the Office Navigation Bar, as well as how to assign it to a NavBarControl.

Expanded Items

After you drop the Office Navigation Bar onto a form, it will appear with two automatically created items. These items are objects of the NavigationBarItem class. To add, remove or customize items invoke the control's smart tag and click the "Edit Items..." link. This will display the Collection Editor dialog shown at the figure below.

In code, you can access Office Navigation Bar's items through the OfficeNavigationBar.Items collection.

By default, the control will display all existing items (given that it has enough space to do so). To limit the number of initially shown items, use the OfficeNavigationBar.MaxItemCount property. Remaining items will be accessible by clicking the control's ellipsis button (see the Runtime Customization section below).

Individual items do not provide click events. To perform specific actions on item click, handle the OfficeNavigationBar.ItemClick event.

Expanded Peek Panel

The Office Navigation Bar supports peek panels that pop up when end-users hover control items for a certain period of time.

To enable peek panels, set the OfficeNavigationBar.ShowPeekFormOnItemHover property to true. The NavigationBarItem.ShowPeekFormOnItemHover property allows you to override this global control setting and prohibit showing peek panels for individual items.

A peek panel is displayed after a delay, which can be modified by using the OfficeNavigationBar.PeekFormShowDelay property. The default time frame before the panel appears is 1.5 seconds. You can also manually display and/or hide a peek panel by calling the OfficeNavigationBar.ShowPeekForm/OfficeNavigationBar.HidePeekForm method from code.

To supply a peek panel with content for each Office Navigation Bar item, handle the OfficeNavigationBar.QueryPeekFormContent event. Event parameters allow you to identify the source item and assign required content specific for this very item. The code below illustrates an example.

By default, a peek panel will be sized automatically according to its content. To set a fixed panel size, use the OfficeNavigationBar.PeekFormSize property.

Additional peek panel settings can be accessed through the OfficeNavigationBar.OptionsPeekFormButtonPanel properties group. For example, in this group you can set the FlyoutPanelButtonOptions.ShowButtonPanel property to true to enable the built-in button panel - a region that displays buttons and is docked to either top or bottom edge of a peek panel. Buttons displayed in this panel are stored in the FlyoutPanelButtonOptions.Buttons collection. At design time, locate this property in Visual Studio's property grid and click its ellipsis button. This will invoke the already familiar collection editor dialog that allows you to add, remove and customize peek panel buttons.

Peek panel buttons provide multiple properties, the most significant of which are listed below.

  • IButtonProperties.Caption and IButtonProperties.Image - specify the button content.
  • IButtonProperties.Style - gets or sets whether this button is a regular push button or a check button that supports pressed and regular (elevated) visual states.
  • IButtonProperties.GroupIndex - check buttons with the same value for this property unite into a radio group. When an end-user presses a radio group button, the previously checked button that belongs to the same radio group automatically returns to an elevated state.

Expanded Interaction with a Navigation Bar

Although an Office Navigation Bar can be used as a separate control, it was originally created to be used in conjunction with a Navigation Bar. 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 a collapsed state.

To learn more about each scenario, refer to the separate Interaction with Navigation Bar article.

Expanded Runtime Customization

By default, the Office Navigation Bar displays an ellipsis button after its last visible item. This is a customization button that provides access to currently hidden Office Navigation Bar items, as well as allows end-users to customize the bar itself. To place this button before Office Navigation Bar items or completely hide it, use the OfficeNavigationBar.CustomizationButtonVisibility property.

At runtime, end-users see a pop-up menu as they click the customization button (see the figure below).

At the image above, "Sales" and "Opportunities" menu items are links to currently hidden Office Navigation Bar items. The "Navigation Options" menu item is a default item that invokes the customization dialog, as illustrated below.

In this dialog, end-users can do the following.

  • Re-arrange Office Navigation Bar items by clicking the "Move Up" and "Move Down" buttons.
  • Change the maximum number of visible items. This setting is identical to modifying the OfficeNavigationBar.MaxItemCount property in code.
  • Switch the Office Navigation Bar from regular to compact mode and back (identical to the OfficeNavigationBar.Compact property).

All Office Navigation Bar customization capabilities persist when the control is used in conjunction with the Navigation Bar control.

How would you rate this topic?​​​​​​​