OfficeNavigationBar Class

An Outlook-inspired navigation bar, supporting integration with the NavBarControl.

Namespace: DevExpress.Xpf.Navigation

Assembly: DevExpress.Xpf.Controls.v18.2.dll

Declaration

C#
VB.NET

public class OfficeNavigationBar :
    veSelector,
    IFlyoutProvider,
    ILogicalOwner,
    IInputElement

Public Class OfficeNavigationBar
    Inherits veSelector
    Implements IFlyoutProvider,
               ILogicalOwner,
               IInputElement

Remarks

The OfficeNavigationBar is an Outlook 2013-inspired navigation bar that supports integration with the Navigation Bar and AccordionControl. The OfficeNavigationBar control displays navigation links (items), which can be clicked to invoke a specific functionality. You can add and access control’s items using the Items or ItemsSource property. Handle the SelectionChanged event to process a particular item click.

DX-OfficeNavBar

Integration with the Accordion control
Integration with the NavBar control
Peek Form

Integration with the Accordion control

The Office Navigation Bar control seamlessly integrates with the AccordionControl.

Note

The Office Navigation Bar is invisible when in an assigned Accordion control its AccordionControl.ViewMode property is set to AccordionViewMode.NavigationPane.

When you assign an AccordionControl to the OfficeNavigationBar.NavigationClient, the Accordion’s root items are obtained and presented as items in the Office Navigation Bar. At runtime, when an end-user clicks any of these items, corresponding accordion subitems are automatically activated in the bound AccordionControl.

Note

In this integration mode, do not manually specify items via the OfficeNavigationBar.Items or OfficeNavigationBar.ItemsSource property.

The Office Navigation Bar control can integrate with a NavBarControl.

Note

If a NavBarControl has the NavigationPane View applied, you need to turn its Compact mode off. Otherwise, the Office Navigation Bar will be invisible. To turn this mode off, use the NavBarControl.Compact property.

When you assign a NavBarControl to the OfficeNavigationBar.NavigationClient, the NavBarControl’s groups are obtained and presented as items in the Office Navigation Bar. At runtime, when an end-user clicks any of these items, a corresponding group is automatically activated in the bound NavBarControl. Note that group activation is only noticeable when the NavBarControl is painted using the NavigationPane or SideBar View.

Note

In this integration mode, do not manually specify items via the Items or ItemsSource property.

When the Navigation Pane style is applied to the NavBarControl, the group selector is automatically hidden from the NavBarControl after it is bound to the OfficeNavigationBar.

Peek Form

The OfficeNavigationBar control can display a popup Peek Form for its items to provide custom content for end-users. By default, the Peek Form is displayed when hovering over items.

OffNavBar-PeekForm

You can specify the Peek Form template within the specified item of an integrated control:

For integrated AccordionControl: use the accordion root item’s AccordionItem.PeekFormTemplate property to specify the Peek Form template for this item.
For integrated NavBarControl: use the navbar group’s NavBarGroup.PeekFormTemplate property to specify the Peek Form template for this group.

The following code snippets (auto-collected from DevExpress Examples) contain references to the OfficeNavigationBar class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

how-to-use-officenavigationbar-with-navbarcontrol-to-navigate-between-views-t192348/CS/DXSample/MainWindow.xaml#L53

    </Grid>
    <dxnav:OfficeNavigationBar Grid.Row="1" NavigationClient="{Binding ElementName=nav}"/>
</Grid>

building-outlook-navigation-menu-using-officenavigationbar-and-navbarcontrol-with-treeview-t329868/VB/NavBarExample/MainWindow.xaml#L75

    <Border Background="LightBlue" Grid.Column="1"/>
    <dxnav:OfficeNavigationBar Grid.Row="1" Grid.ColumnSpan="2" NavigationClient="{Binding ElementName=navBar}" ShowPeekFormOnItemHover="True"/>
</Grid>