Time to Boost Your HamburgerMenu! Multi-Level Items Have Arrived

栏目: IT技术 · 发布时间: 5年前

内容简介:The new version of Telerik UI for WPF's HamburgerMenu recipe is here. The RadNavigationView now supports UWP-like multi-levels! Learn how to achieve a hierarchical menu.Remember how I deliberately let the secret about mastering the navigation within your W

The new version of Telerik UI for WPF's HamburgerMenu recipe is here. The RadNavigationView now supports UWP-like multi-levels! Learn how to achieve a hierarchical menu.

Remember how I deliberately let the secret about mastering the navigation within your WPF apps just slip? I did not hesitate a minute to share with you the recipe of our HamburgerMenu . But you know what—I like making my favorite recipes taste better every time. That’s why I’m so thrilled to announce the new stuffing of this one. Let me introduce you to the multi-level hierarchy support of RadNavigationView!

Since the R1 2019 Release, when the first version of the HamburgerMenu recipe was created, a lot of requests and feedback was received. I am so grateful for that. Thanks to all of you, looking for multi-level items (like in UWP), the RadNavigationView control now supports it! Let me show you how to achieve hierarchical menu visualization.

Setting Up Hierarchy

Each RadNavigationViewItem element now has an Items collection. It can be populated with numerous RadNavigationViewItem elements, thus allowing multilevel items definition. XAML lovers, check it out below:

<telerik:RadNavigationView PaneHeader="Mail"> 

    <telerik:RadNavigationView.Items> 

        <telerik:RadNavigationViewItem Content="Accounts"> 

            <telerik:RadNavigationViewItem.Items>

                <telerik:RadNavigationViewItem Content="Viktoria Grozdancheva (vgrozdancheva@prgs.com)" /> 

                <telerik:RadNavigationViewItem Content="John Doe (jdoe@prgs.com)" />                        

            </telerik:RadNavigationViewItem.Items> 

        </telerik:RadNavigationViewItem> 

        <telerik:RadNavigationViewItem Content="Folders"> 

            <telerik:RadNavigationViewItem.Items> 

                <telerik:RadNavigationViewItem Content="Inbox"/> 

                <telerik:RadNavigationViewItem Content="Drafts"/> 

                <telerik:RadNavigationViewItem Content="Sent Items"/> 

                <telerik:RadNavigationViewItem Content="Deleted Items"/> 

            </telerik:RadNavigationViewItem.Items> 

        </telerik:RadNavigationViewItem>              

    </telerik:RadNavigationView.Items> 

</telerik:RadNavigationView>

Data Binding lovers, don’t you be worried. The HamburgerMenu can also be populated with business objects via its ItemsSource property. The DisplayMemberPath and ItemContainerStyle properties can be used to further customize the items and allow sub-items. Check the Hierarchical Data Binding article of the control for more information and examples.

So much talking and not a single preview of the menu’s multi-levels in action… Shame on me.

Time to Boost Your HamburgerMenu! Multi-Level Items Have Arrived

P.S. This awesome GIF is not a preview of the first code snippet, it’s from our precious Telerik UI for WPF Controls Demo application . Don’t hesitate to check it out and play with the Sub Items demo of the NavigationView control.

Oh, one thing that's worth noticing about the GIF is that when I click directly on the expand/collapse icon, the item does not get selected—this way only the expanded or collapsed state is triggered. Clicking everywhere else in the bounds of the item will trigger its selected state. Thought you might want to know it :innocent:.

Customization Capabilities

The NavigationView sub-items are totally tailor-made to meet your business needs. Let’s peek at the benefits of the hierarchical hamburger menu together.

Expand/Collapse Icons

First thing that I’d like to be in control of are the expand and collapse icons, of course. For this purpose, the ExpandedIcon and CollapsedIcon properties of the RadNavigationViewItem come in handy. The default icon template of the item uses RadGlyph , so you can set the properties to a glyph string from the glyphs reference sheet . My favorite cheat-sheet. :stuck_out_tongue_closed_eyes:

Oh, you can also experiment with the expand/collapse animations if you dare!

Nested Items Indentation

All child items can have a different than the default horizontal offset (indent). Simply set the SubItemsIndentation property of RadNavigationView to the desired value and you’re all done. You can play with this one using the Configurator part of the Sub Items demo that I mentioned a few lines above.

Single/Multiple Expanded Items

The default behavior of the RadNavigationView allows expanding multiple RadNavigationViewItem elements with child items at once. Need to restrict that to only a single expanded item at a time? Sure, just set the AllowMultipleExpandedItems property of RadNavigationView to False.

Flying Out to NavigationView’s Flyout

What about having a collapsed pane and the NavigationView is in its Compact or Expanded DisplayMode ? Where do all nested menu items go?

Time to Boost Your HamburgerMenu! Multi-Level Items Have Arrived

That’s right, they fly out to the east coast of the pane :blush:. Now, seriously, clicking on a parent item displays its children (the collapsed RadNavigationViewItems) in a flyout which has a nice animation by the way to make sure the flight is smooth.

Some of you asked for direct access to the sub-items on hovering over a main menu entry. This can be achieved by changing the default ClickMode of the parent item to Hover. Easy-peasy.

Sub-Items Events

A few words about the events that are fired when expanding and collapsing the items. These actions fire the ItemExpanded and ItemCollapsed events of RadNavigationView. Additionally, the RadNavigationViewItem exposes Expanded and Collapsed events, which are fired before the previous two.

Closing Words

You know I’m only human and might have missed something which you consider important. Therefore, don’t forget to check out theHierarchy and Hierarchical Data Binding articles of the NavigationView as well.

Okay, that’s it, guys. Thanks for taking your time to read my blog! I hope the multi-level hierarchy support of the HamburgerMenu met your expectations and you’re eager to:

Get the Latest Telerik UI for WPF

I’m sure you’ll try it out. And when you do, I’ll be there to read your honest feedback. Don’t be shy to share it in the comment section below or head to our

Feedback portal

.

Happy coding and to make it even happier, explore all new controls, features and improvements of the R2 2020 release of Telerik UI for WPF .


以上所述就是小编给大家介绍的《Time to Boost Your HamburgerMenu! Multi-Level Items Have Arrived》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

编程珠玑(第二版)

编程珠玑(第二版)

[美] Jon Bentley / 谢君英、石朝江 / 中国电力出版社 / 2004-4 / 28.00元

《编程珠玑(第2版)》是计算机科学方面的经典名著。书的内容围绕程序设计人员面对的一系列实际问题展开。作者Jon Bentley 以其独有的洞察力和创造力,引导读者理解这些问题并学会解决方法,而这些正是程序员实际编程生涯中至关重要的。一起来看看 《编程珠玑(第二版)》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具