WinForms Accordion Control - Hamburger Menu and Navigation Pane support (v18.1)

Oliver's Blog
16 April 2018

The Hamburger Menu

The Hamburger Menu has a long history. It was introduced by Norm Cox in the early 1990s as a part of the user interface for the Xerox Star, but became much more popular in the last decade when mobile app developers were looking for ways to accommodate complex user interfaces on small mobile phone screens. The Hamburger Menu has become a universal UI element: three stacked horizontal bars are instantly recognized by end users today as “the main menu”. The metaphor is widely used in web and desktop applications, including modern UWP ones. For example, here’s a screenshot from a Microsoft Store “Mail” app:

Mail App

With our v18.1 release, the WinForms Hamburger Menu makes its way into the WinForms controls suite. Since our WinForms package already included lots of navigation and menu controls, we decided to extend existing feature sets rather than add a new control.

We integrated the Hamburger Menu in our Accordion Control: Set the ViewType property to HamburgerMenu and the Accordion Control supports a collapsed state where it mimics the behavior of Windows 10 apps and shows a narrow strip of icons.

Narrow Strip of Icons

Depending on the property OptionsHamburgerMenu.DisplayMode, the Hamburger Menu expands in three different modes. In Overlay mode, the expanded Accordion is drawn on top of the neighboring content.

Overlay Mode

Expanding the Hamburger Menu with the Inline mode applied forces the adjoining content to squeeze, making way for the Accordion.

Inline Mode

Finally, the option Minimal is similar to Overlay when the menu is expanded, but it reminds of mobile devices when the Accordion Control collapses, leaving the Hamburger Menu button as the only visible control part.

Minimal Mode

The Accordion Control has been a useful modern replacement for the original Navigation Bar ever since we first introduced it. It has several important advantages — in a nutshell, in case you have missed out so far:

  • Rich item header customization capabilities, enabling custom controls element-specific context buttons
  • DirectX rendering with support for visual effects like Acrylic (this will be available in v18.1)
  • An intuitive object hierarchy with AccordionElement objects as the only child elements used by the control
  • A modern appearance with visually minimalistic items

However, the early Accordion Control didn’t support the Navigation Pane View, a well-known navigation bar view inspired by Outlook and commonly used in modern applications.

In the upcoming v18.1 release, the Accordion Control now supports the Navigation Pane appearance, in the latest style shown in Microsoft UWP applications. To enable it, simply switch the RootDisplayMode property to AccordionControlRootDisplayMode.Footer.

Navigation Pane

As always, your feedback counts

Tell us what you think! Do you see these features making their way into your future projects? How do you feel about the Hamburger Menu in classic desktop apps?

Before I let you go, just a quick question - are you guys using 24/7 app monitoring services such as Logify? Our support team plans on using Logify with some of our enterprise customers and we’d love to know what you guys think of 24/7 app monitoring.

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.