WPF - Navigation Drawer / Sidebar Menu | UI Design | XAML | C# | Project | Tutorial
HTML-код
- Опубликовано: 9 мар 2020
- [ Skill Level : Intermediate ]
Hi, this video demonstrates the use of " DoubleAnimation " of the " Storyboard " element to make the transition of objects / controls between "From" and "To" target values along with a specific time duration for the transition to occur.
Subscription Link for more WPF videos and updates :
ruclips.net/user/cdesignproarunmut...
Download the Complete Source Code from Github Repository.
Link : github.com/CSharpDesignPro/Na...
Channel Link: / cdesignpro_arunmutharasu
Navigation Drawer Code starts at 5:16
Tools Used :
Microsoft Visual Studio Community Edition 2019
Icon Credits :
Link : icons8.com/icons
Background Music Credits:
Far Away by Declan DP / declandp
Licensing Agreement: www.declandp.info/music-licensing
Free Download / Stream: bit.ly/2NhWC1F
Music promoted by Audio Library • Far Away - Declan DP (...
Thank you!
Have a great day!
For Business Inquiries : arun.enterprises.co@gmail.com
Excellent tutorial. It is very instructive and reveals a methodology rarely seen in other videos. Thank you
+ELIO ABREU - Hi, Thank you for the appreciation! I'm glad the tutorial was informative. Thanks for watching:)
It's amazing how I'm able to increase my understanding of building XAML designs for WPF with these videos. Thank you very much
@Jorge Edson - I'm glad it was helpful. Thank you!
This is another beautiful design like some others of this channel.
Impressive presentation and clean code to be understandable.
Thanks for the source code too.
+de Spirit - Thanks for the appreciation, and glad I could help!
Thank you so much for this tutorial. I'm a beginner to WPF and this has taught me so many concepts I can build upon going forward.
Great to hear, Mark. All the best!
Amazing tutorial
This is just perfect. Straight to the point, and beautifully designed.
Might seem like a peripheral point to make, but the music was spot on, too!
@Ole Martin Gulbrandsen - I appreciate you for taking the time to watch and comment. Thanks!!
sos un genio, muy bueno tu video.
Perfect!
Great Tutorial.. thanks bro..
@Budi Santoso - You're welcome! Thanks for watching :)
YOU are amazing!! I subscribed.
@Yuu Source - Thank you!
Excellent tut. thank u very much!
@Tuan X-i-K-e - You're welcome! Glad the tutorial was helpful. Thanks for watching:)
Thanks man, you help me on everything
@KamikazeGrade - Glad to help!
Amazing design
Glad you like it
Awesome!
+Talking2Wall - Hi, I'm glad. Thanks for the appreciation:)
Awesome!!
Thanks!
gracias, muy recomendable
+JOS BEXERR - Thank you!
Awesome vid. Helped a lot. How would I be able to put a frame instead of the background image there so I can open different pages in it?
verry good
Simply Amazing! I am shifting from Javafx and have barely any idea about xaml, i followed your video and got the results, but how do i get better at this, this was intimidating, how can i master this? Understanding the basic components and UI Building Methodology
+hardy sarin - Thank you! For a beginner, I would recommend "WPF Unleashed by Adam Nathan " or "Learn WPF MVVM by Arnaud Weil " and also the MSDN documentation to further assist you if you're looking to code a specific functionality. Mastery is just a matter of time! I hope this helps. Thanks for watching:)
cool
Hi, im aware this video was uploaded years ago however i tried coding along but using my own colours ,logos ect. The tooltips work fine and the UI looks great however the navigation bar doesnt slide out. At what point in the video is the code / xaml for this to happen written as i cannot figure it out ?
Great video tho
Nevermind dont worry, accidentally named the storyboaord.Targetname st_pnl instead of nav_pnl. Thanks for the video it was a real help
@jamiemyers4696 - No problem at all!. I'm glad the issue was resolved. Thanks for the appreciation!
Impressive.
+Spodermen SW3G - I'm glad. Thanks for the appreciation:)
@@CSharpDesignPro np
Thanks for the Tutorial... It’s awesome and very helpful but I can't follow the whole Bit with the
, How does someone Open that feature ?
Hi Msgraceb, A Resource is an object that can be reused in your app. You simply need to define the resources.
For Example:
thank you very much !
@Mr. Mythoclast - Glad it helped!
How does one add pages to this? Love the meticulous design work.
Hi there i was following your video to learn more about designing a sidebar like this however i have a question. if i want a program to be able to resize but keep the buttons visible and not stretch how would you know how i could accomplish this?
+Sunhallow - Hi, A button with a fixed height and width would not resize unless it is placed in a parent/control container (StackPanel, Canvas, DockPanel, WrapPanel, Grid) to be able to stretch itself as the window/program attempts to resize. Try to use the alignment(vertical, horizontal) properties or setting the margins (left,top,right,bottom) to position the button at a relative/specific location on the window. I hope this helps. Thanks for watching:)
you know im a beginner but i may be copying but at least im learning what this stuff is doing as im watching so thank you
@KelG - I'm glad it was helpful!
Very good tutorial...could you kindly build on this one and explain how to switch between the content on the right once a menu item is clicked
+kevin nyakundi - Thanks for the appreciation :) Handle the "SelectionChanged" event of the ListView or the "PreviewMouseLeftButtonDown" of the ListViewItem to switch between contents. I hope that helps.
@@CSharpDesignPro Hello, i am building my school project based on your UI design template, love this tutorial very much, but could you explain how to determine which tab from nagivation panel user have selected if implement using "SelectionChanged" event of ListView rather than ListViewItem?
Thanks!
nice Bro
Thanks!
Very Nice Tutorial. But i have a question. If i want a Submenu, how i can do it?
For Example: Maps is the Menu point and i want to have under Maps Submenu Point with Adress. So if i click on Maps than the Submenu Point is coming.
Hi Anna, The Hamburger Menu with Sub Menu Video Tutorial might be helpful.
Link : ruclips.net/video/YkZq3u9gmRc/видео.html
Very well made one. Wish it could react on button click tho
@AzeRTy Block - Hi, Thanks for the appreciation:) Unfortunately, this code setup was limited to sidemenu animation. You can handle the ListView SelectedItem / SelectionChanged events but, that would probably end up with redesigning the entire project. You can check my recent video "WPF - MVVM Based Modern Dashboard" on this channel. The code management gets easier with MVVM architecture / pattern. I hope that's helpful.
many thanx
@The Way - You're welcome! Thanks for watching:)
Hi, thanks for the nice tutorial/ I want to add more menu like MS Word has/ How can I do that please?
+A.K.M ASADUZZAMAN - Hi, Thanks for the appreciation! I'll try to make a tutorial on MS Word Menu in one of my upcoming videos. Don't miss the notifications. Thanks for watching:)
@@CSharpDesignPro - Hi, thanks for the response. How can I make like the given example of (responsive Dashboard) URL in WPF?
ruclips.net/video/y1jftnTaTXU/видео.html
+A.K.M ASADUZZAMAN - You can replace the ToggleButton.Checked / Unchecked RoutedEvent (XAML) with HyperLink(dot)Click event (Open & Close Hyperlink).
// XAML
Open Dashboard Panel
Nice Tutorial. Cannot find all images in github project. Is there a spearate folder for all the assets used in this application
@DEE MAN - Glad the tutorial was helpful. You can find all the images in the Assets folder.
Thanks for your video! When I cloned the source code from git to my local PC, how to open it?
@PENG GAO - Hi, You can find a compressed file "Navigation Drawer App.rar" included in the repository. Extract the file and try to open it in VS.
@@CSharpDesignPro Thank you for your reply, i am really appreciate!
thanks very much.
@Hua Jarry - You're welcome. Thanks!
@@CSharpDesignPro when I tried that toggle button, and failed processing the border. can you help me?
@Hua Jarry - Hi, I'm currently on my schedule to upload the next video. You can post the error message in the comment box. I'll try to find the time and resolve the issue if possible.
hello how you transfer the line to a comment, which short key you using :]
@fire dark7981
1. Select the line(s) to comment.
2. COMMENT - [ CTRL + K ] , [ CTRL + C ]
3. UNCOMMENT - [ CTRL + K ] , [ CTRL + U ]
is this a plugin you are using to colorize your XAML code?
Not a plugin. To change the settings in Visual Studio 2019 IDE, Go to Tools > Options > Environment > Fonts and Colors.
when does the bar animation end?
@fady Suis
The grid (nav_pnl) is set to a specific width of "65" at its default (collapsed) state.
The DoubleAnimation expands the width of the grid from "65" to "230" and vice versa.
So, the bar animation will end at the default start (from) width of "65".
I hope this helps!
Hello! Great Tutorial. Can I get the Folder for the assets?
Yes, sure. Icons Folder Link : github.com/CSharpDesignPro/Navigation-Drawer-Sidebar-Menu-in-WPF/tree/master/Icons
Hey! Tell me where
can I take a color scheme like yours?
Hi, To change the settings in Visual Studio 2019 IDE, Go to Tools > Options > Environment > Fonts and Colors. The current color scheme is based on Monokai theme / colors.
hello this is very nice design . can I use this ui for my app? with your lisance.
Yes, of course. You can use it in your application.
The project on GitHub doesn't contain images :(
@Petru Cervac - Navigate to the "Assets" folder in the .rar file. I hope the images are available in this folder.
@@CSharpDesignPro I can't find them as well along with "tts" file :(
Icons Folder Link : github.com/CSharpDesignPro/Navigation-Drawer-Sidebar-Menu-in-WPF/tree/master/Icons
What is the shortcut used in the video to generate this comment-like stuff? XD
@Iviaca Lena - Ctrl+K , Ctrl+C