内容简介: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.
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?
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》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
机器学习实战:基于Scikit-Learn和TensorFlow
Aurélien Géron / 王静源、贾玮、边蕤、邱俊涛 / 机械工业出版社 / 2018-8 / 119.00
本书主要分为两个部分。第一部分为第1章到第8章,涵盖机器学习的基础理论知识和基本算法——从线性回归到随机森林等,帮助读者掌握Scikit-Learn的常用方法;第二部分为第9章到第16章,探讨深度学习和常用框架TensorFlow,一步一个脚印地带领读者使用TensorFlow搭建和训练深度神经网络,以及卷积神经网络。一起来看看 《机器学习实战:基于Scikit-Learn和TensorFlow》 这本书的介绍吧!