WPF application developers rejoice! You can have an intuitive and modern navigation in your application - look no further than the NavigationView (HamburgerMenu) in Telerik UI for WPF. Learn all about this powerful navigation control below.
I recently heard the term “conscious control,” and asked myself, "what does this mean, do controls have actual consciousness (duh!)?" However, that was just for a few seconds.
They are actually controls that can adapt to different window sizes layouts, which is essential for apps that scale across various devices and dimensions. To create conscious controls, you can either code your own adaptive UI to optimize for different screen sizes, or you could save yourselves a considerable amount of time and simply use the new NavigationView (HamburgerMenu) control, which arrived in Telerik UI for WPF in R1 2019.
In case you missed our new release, the NavigationView is just a small (but essential) part of it. Let's have a minute of glory for the new DiagramRibbon and HyperlinkButton controls, the support of Charts for RadSpreadsheet and RadSpreadProcessing and last, but not least - .Net Core 3 and VS 2019 support!
Now, let’s not forget who the “star” of the show is. That’s right – the brand new NavigationView.
Does your app need to:
If the answer to at least one of the following key points is YES, then this is the right control.
For more information on how to create a sample application that contains a RadNavigationView (HamburgerMenu) control, jump into its Getting Started article.
Reading this title, you thought for a second of Grey’s Anatomy, didn’t you? Now let’s lift the curtain and look at the hamburger menu’s control layout.
The recipe for the hamburger menu consists of:
By default, the navigation view automatically changes its DisplayMode depending on the amount of available size. It has three display modes - Minimal, Compact and Expanded.
Expanded mode – the pane stays open alongside the content
Compact mode – the pane always shows as a narrow sliver
Minimal mode – the pane shows/hides on PaneToggleButton click; the button remains fixed
By default, the control changes its DisplayMode when its size passes certain thresholds. The CompactModeThresholdWidth and ExpandedModeThresholdWidth properties specify the breakpoints at which the display mode changes. The default value for the compact one is 641 and the default value for the expanded - 1008. You can modify these values to customize the adaptive display mode behavior.
If you want to be in control of this adaptive behavior, you can do that. The only thing that you need to do is set the AutoChangeDisplayMode property to False:
<telerik:RadNavigationView x:Name="navView" AutoChangeDisplayMode="False" />
this.navView.AutoChangeDisplayMode = false;
I love the power of customizable components! Who doesn’t? Many of the NavigationView’s parts are fully customizable.
You can customize the look and feel of the PaneToggleButton using PaneToggleButtonContent, PaneToggleButtonContentTemplate and PaneToggleButtonStyle properties. If you do not need it, you can just use the PaneToggleButtonVisibility property.
The list of properties that allow customizing the control’s header are: PaneHeader, PaneHeaderTemplate and PaneHeaderHeight.
The footer can be customized using the PaneFooter and PaneFooterTemplate properties.
Wait, there is more.
I forgot to mention that you can change the color of pane components at glance with PaneBackground, PaneHeaderBackground and PaneHeaderForeground properties.
The RadNavigationViewItems are fully customizable, too, especially their icons.
The Icon and IconTemplate properties are the key here. With the help of the IconTemplate, a single DataTemplate can be set to many RadNavigationViewItems. More information on how to set the Icon of an item to a RadGlyph or use the IconTemplate property in a databinding scenario can be found in this article.
As Selector and ItemsControl classes are part of RadNavigationView’s base classes, the following properties can also be used to style the control items: ItemTemplate, ItemTemplateSelector, ItemContainerStyle.
By default, RadNavigationView defines three animations named ResizePaneAnimation, MinimalPaneOpenAnimation and MinimalPaneCloseAnimation.
This article demonstrates how you can customize these animations.
Here is the list of most important events that you need to know when it comes to RadNavigationView:
All mentioned event handlers receive two arguments - the sender argument which contains the RadNavigationView (type - object, can be cast to the RadNavigationView type) and a RoutedEventArgs object.
There is no need to mention that the HamburgerMenu comes with the great and colorful variety of UI for WPF Themes Suite, right? And you remember that if the theme brushes are not colorful enough, we offer seamless color customization and fast palette creation with the help of the Color Theme Generator, don’t you?
Enough talking. The Telerik R1 2019 Release is already live, so do not hesitate and give RadNavigationView a try right now by downloading the latest:
Try Telerik UI for WPF
Feel more than welcome to share your thoughts as a comment below, or… wait! You can visit our revamped Feedback portals about UI for WPF/Silverlight and Document Processing Libraries and let us know if you have any suggestions or if you need any particular features/controls.
Viktoria Grozdancheva is a frontend developer, part of the Progress Telerik UI for WPF & Silverlight team in Sofia. She holds a bachelor's degree in Computer Systems and Technologies. In her spare time, Viktoria loves practicing (and constantly updating) her collection of art hobbies, playing sports and hanging out with friends.
Subscribe to be the first to get our expert-written articles and tutorials for developers!