WPF Accordion - Navigation Pane Style (v18.1)

Our Accordion Control was released as a modern alternative to the trusty Navigation Bar. The control is still subject to constant improvement, and for our upcoming v18.1 release, we introduced support for the Navigation Pane view style that was previously supported by the Navigation Bar. The style is achieved by taking advantage of integration with the Office Navigation Bar.

Here is what the Accordion control looks like by default:

Accordion Default Appearance

The Accordion leaves the display of its root items to the Office Navigation Bar, when the new integration is activated:

Integration with Office Navigation Bar

The Office Navigation Bar supports a Compact mode, like Microsoft Outlook:

Activate Compact Mode

With this mode active, the root items of the Accordion are shown as buttons at the bottom of the Accordion layout.

Button Display in Compact Mode

Activating the integration is very simple: just specify the property OfficeNavigationBar.NavigationClient:

<dxnav:OfficeNavigationBar NavigationClient="{Binding ElementName=accordion}"/>
<dxa:AccordionControl x:Name="accordion" CompactNavigation="True">
  <!-- ... -->

Finally, the Peek Form feature of the Office Navigation Bar lends itself well to the new Navigation Pane style. When the user hovers the mouse over a root item, the Peek Form pops up:

Peek Form

Note that a Peek Form template needs to be specified using the property AccordionItem.PeekFormTemplate. This allows you to easily implement your own Peek Form functionality.

no comments
No Comments

Please login or register to post comments.