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

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 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.

27 comment(s)
Christopher Jay

I will be making use of this in classic desktop apps, so YES!

16 April, 2018
Engº Silvio Cruz

Excellent Layout improvements, that is for sure good for new windows 10 compatible apps (layout style)

16 April, 2018
Neal

Thank you for the innovation and continued improvements in DX products. For someone trying to switch to WPF and seeing all this Winforms goodness it's confusing. Why so much being done on the Winforms side vs. WPF? Isn't the future supposed to be WPF? Yet a lot of innovation and effort being done on the legacy side? Would love to read a blog on this someday as it's obviously a separate subject but I'm just wondering why so much continues to come out on the Winforms side. Is it just easier to extend as component developers?

16 April, 2018
Orhan ÖCAL

I liked it so much :)

16 April, 2018
Anurag Mahato

+1 vote for Neal

16 April, 2018
Tahreif Hylton

+1 vote for Neal

16 April, 2018
Tahreif Hylton

+1 vote for Neal

16 April, 2018
renejdm

-1 vote for Neal... Keep innovating in the WinForms space.

16 April, 2018
Heiko Mueller

Great addition - will use it in my current projects, where it replaces a component I wrote myself a few months ago. Especially DirectX support is VERY welcome!

I also have some plans for some smaller applications that I want to distribute through the Windows Store. In these applications I will use this component for the main navigation.....

@Neal: I think that the user base for WinForms is simply much larger than that for WPF. WPF is not bad, but there is no easy way to transform a WinForms GUI into WPF. And without such a way, the benefits to be expected from using WPF in large existing projects are too small to justify the time required for the transformation.

16 April, 2018
Maris Lacis

What about VCL??

16 April, 2018
Neal

@Heiko, but you bring up an issue and that is Windows Store distribution. I have clients that have surface computers where their employer only allows installation from the Windows Store. I know there is project centurion or whatever it's called that can convert Win32 to Windows Store but isn't the smarter move going forward to use WPF/XAML as well as with Xamarin capabilities via Xamarin Forms? It's hard to rationalize new projects going forward with Winforms for these reasons, you're obsolete out of the box essentially so all this great work is great but it's like creating ActiveX components in this era of .NET is it not?

16 April, 2018
Aleš Požun

2 years 2 late ...

16 April, 2018
Davide M

Thank you.

Please keep up innovating in winform technology which is mature, stable and widespread.

ROI is higher than WPF.

17 April, 2018
Heiko Mueller

@Neal

With Desktop Bridge from Microsoft it is easy to bring the WinForms app to store..... WPF requires the same procedure, since it is at the end of the day a normal desktop app. UWP and Xamarin are nice, but limited in many directions (access to local resources like databases, availability of easy-to-use UI designers and so on). UWP and Xamarin are good for things so called 'mobile' apps with limited local ressources but for rich desktop apps they have IMHO to much limitations...

17 April, 2018
Oliver Sturm (DevExpress)

Hi,

I just spoke with the WPF team to see what they had to say. It was pointed out to me that we already have a Hamburger Menu component: documentation.devexpress.com/.../Hamburger-Menu

There is also a Navigation Pane node for the Accordion control coming up in v18.1. So it seems that we have this covered quite well!

Oliver

17 April, 2018
QUALCO SA

Great news when can we expect a beta

17 April, 2018
Basit Sarguroh

Is there any plan to include in ASP.Net Web and Devextreme?

Thanks

Basit.

18 April, 2018
Oliver Sturm (DevExpress)

We are preparing the beta release right now, but as usual I can't promise an exact date for it to become available! All active DevExpress Universal subscribers will be able to download the beta.

19 April, 2018
Oliver Sturm (DevExpress)

Basit - I had a word with the teams about this. We don't currently have integrated controls for either platform that do exactly what the WinForms Accordion control does.

For ASP.NET, the suggestion is to use ASPxPanel with ASPxNavBar or ASPxMenu to create a similar solution, like in this demo: demos.devexpress.com/.../ResponsiveLayout.aspx

For DevExtreme, a solution would require some manual work at this time. The SlideOut widget is a possibility as a starting point. There are some plans to address use cases like this as part of the Layout Templates roadmap item (js.devexpress.com/Roadmap), but details are not fixed yet.

19 April, 2018
Mark Douglass

+1 vot for Heiko

@Heiko is right!!! Winforms is alive and kicking being that just about every major corporation has an investment in windows desktops in some form or another whether they are version 7 or 10. In the world of manufacturing and automation, science and quality testing, some applications are nearly decades old and are mature but too robust for a glib web site porting.

What I see happening now more than ever is a convergence of all these technologies and ways to accomplish things so that it's up to us (the developers) to pick our poison.

There is no one way of doing anything. Best tool for the job.

I for one, love this new option.

24 April, 2018
Corbin Taylor

Any update on adding the winforms librarys to NUGET?

Thanks

25 April, 2018
Oliver Sturm (DevExpress)

Hey Corbin,

I might be missing something, but I think WinForms components are available on Nuget. Check the list in this post: www.devexpress.com/.../devexpress-nuget-packages

25 April, 2018
John Peeters 2

How can I show the hamburger submenu over the full height and not as a popup menu?

30 April, 2018
Oliver Sturm (DevExpress)

Hey John,

I'm not sure I understand your question. All the images in this post show the menu over the full height! Can you explain in more detail what you're trying to achieve? Alternatively, if it's hard to explain in this format, please feel free to get in touch with our support.

3 May, 2018
Citadel LLC

Awesome! Can I request a feature though.. in the search support wildcard searching *

5 August, 2018
Gabriel Araujo 1

Hi, is it possible for the user to switch between displaymodes? Or do you need a custom button for this to be placed on the control itself?

28 August, 2018
Oliver Sturm (DevExpress)

Hi Gabriel,

One of the main use cases for the Accordion is the Fluent UI form, as described here: community.devexpress.com/.../winforms-fluent-design-form-and-acrylic-effects-v18-1.aspx

In this use case, the Accordion is automatically reconfigured to benefit from the available space in the form. Of course it is also possible to modify properties programmatically, but there is no integrated runtime interface that does this for you.

28 August, 2018

Please login or register to post comments.