Hamburger Menu/Navigation Drawer - WPF UI COMPONENT WORKSHOP
HTML-код
- Опубликовано: 31 май 2024
- Learn how to create a custom hamburger menu (aka navigation drawer) control in WPF. Additional concepts covered include dependency properties, animations, and styling.
Leave a comment below if you'd like to see other custom UI components featured in this series.
In this series, I create advanced, custom WPF UI components. Not only are these components useful for applications, but they also demonstrate how to apply various fundamental WPF concepts. The skills and concepts covered in this tutorial will certainly help you overcome most WPF UI challenges!
TIMESTAMPS:
0:00 - Introduction
0:47 - Project Setup
1:35 - Adding Dependency Properties
2:21 - Implementing the Default ControlTemplate
3:38 - Using the Hamburger Menu
5:56 - Animating Open/Close
11:58 - Calculating Animation Width
14:51 - Adding Hamburger Menu Items
16:59 - Styling Hamburger Menu Items
21:05 - Conclusion (and Handling Null Content!)
FULL PLAYLIST: • WPF UI Component Works...
SOURCE CODE: github.com/SingletonSean/wpf-...
OTHER LINKS:
Become a Member: / @singletonsean
Donations: www.paypal.com/biz/fund?id=UB... 
Наука
![DRAGON BALL: Sparking! ZERO - Fused Warriors Trailer [BUDOKAI TENKAICHI Series]](http://i.ytimg.com/vi/84p4Lvyfyes/mqdefault.jpg)
This tutorial helped me a lot! I created a nice hamburger menu following your example step by step. Now I'd appreciate if you could show us how to tackle the creation of these submenu items, like in the Angular website, as many other folks are requesting in the comments. I've seen some examples using material design package, but I'd like to know how to do that without any 3rd party packages. Thanks for your great job!!!
Absolutely fantastic thank you!
Thank you for a proper explanation! Your tutorials are very useful. Keep referencing them through all my C# university journey)
Well done, easily followable and I learned a couple things. I opted to wrap my animations in an dependency property enum and use ThicknessAnimation's to get the sliding effect rather than a curtain effect.
Thanks for another great video. I am currently using a lot of your navigation tutorials on an app that i use daily. I also use the modal windows taken from your workshops. My next addition is what I think is a combination of modal and this workshop to create a menu similar to the menu on RUclips with what appears to be a modal window coming from the left to provide the menu. Several issues include the icon on a different part of the layout. I will let you know how I get on.... Thanks again
Thank you, this was so easy to follow even for a newbie. Btw i needed this kind of menu to slide left-right and also dropdown-like for two different menus on my app so I extended the functionality with a Orientation type dependency property. Doing that I encountered hard enough playing with Width and Height so I changed it a little bit so I could modify position instead (throug TranslateTransform animation on the ContentControl element)
I thought it could be useful to share my approach.
Hey Sean, Great tutorial! It would be great also if you could you do another video expanding on this with sub-menu items that would appear when you mouse over a menu item.
Hi Sean. Another great tutorial! I tried to implement this menu into my project and not as a separate Custom Control Library but this did not work. Something with the HamburgerMenuItems was causing them to not show up in the UI. If I removed the OverrideMetadata for HamburgerMenuItem they re-appeared, although as regular RadioButtons. Importing the menu as you did from a library works fine though. Do you know why?
Magnificent
Thank for so many great videos - could you give any pointers to implement ICommand on the buttons to a ViewModel of the parent window for example?
What about animating the margin property instead of the width? That way the content slides in as opposed to a curtain being drawn back on the content. Thanks for the great videos, they are a great learning resource
I see what you mean J-ManZA! That's a good idea and would feel much more natural, I might have to try that out.
Great video. I like your style.
Thanks Jacob!
it is so great
Neat, well done! BTW, are you going to add live streaming prices to that stock app you did a series on?
Thanks Das! I'm not sure about the future of the stock app. When I started that series, the stock API was 100% free and had no limits. Now that the API has price tiers and limits, it's been pretty unmotivating to get back to that app. I also feel like my other videos are more effective for understanding WPF concepts.
Regardless, it still sounds like a fun feature to demonstrate. Perhaps I could roll a full-stack application tutorial (WPF + ASP.NET + maybe SignalR?) on this channel that digs into those concepts! I'll keep that in mind.
Thank you so much for this great tutorial, I have a question regardless of the HamburgerMenuItem, in some cases we provide little border left or right to these items (to determine the item is selected), do you think changing from one item(RadioButton which you used as HamburgerMenuItem) to another that little border can be animated?
I think so Cyril! I assume you'd have to play around with enter/exit actions for those animations. I could see that being a satisfying user experience.
@@SingletonSean Thank you so much, I managed to get it working by applying the animation on the height for those little borders, it's gives different vibes now.
Very informative Sean..thank you for all these efforts you put for us 🙏😊
Hi Sean! Can you perhaps tell me what the best approach is for a hamburger menu when I want to use it in a layout in combination with a navigation bar?
Hey Ries! Are you saying that you want a hamburger menu and a navigation bar visible at the same time? And the menu and navbar would have different items?
@@SingletonSean Yes, indeed, I want to use the navbar for actual navigation and the hamburger menu to switch data shown on the 'content' part of the screen. I have rewatched your layout tutorial from the navigation series (thanks!) and tried to implement it the same way as the navbar. It works pretty well actually, I only didn't know how to do the animation in the c# code, so I did that with storyboards.
What if you want the hamburger menu to float over everything and not move anything over?
Good question Das, I could see that being useful. I think in that case, you could have the menu and the page content in the same grid cell. Then, you'd just have to set the z-index of the menu to be above the page content.
Can this be also in UserControl instead? What's different between these, by the way. Thanks.
Hey Brad, it could be a UserControl! However, when using a UserControl, the UI and the UI behavior are tied together. This approach decouples the UI and the UI behavior and allows the component's UI to be completely overridden by another application. This is beneficial for components that have complex behavior and could have various different UI implementations. If your use case doesn't need these benefits, then feel free to use a UserControl, which will be much simpler.
@@SingletonSean Thanks for your reply. What if I use the custom control like your tutorial, can this be able to put this Ui component to the MainWindow.xaml? Thanks once again for your time.