C# WPF Material Design UI: Navigation Drawer & PopUp Menu
HTML-код
- Опубликовано: 7 янв 2018
- LinkedIn
/ abeldutra
C# WPF UI: Navigation Drawer and PopUp Menu
Buy me a coffee
www.buymeacoffee.com/abeldutraui
++++++++++++++++++++++++++++++++++++++++++
Material Design XAML
materialdesigninxaml.net/
++++++++++++++++++++++++++++++++++++++++++
GitHub
github.com/Abel13/NavigationD... 
Наука
![WPF Commands Explained [1 of 2 ]](/img/1.gif)
Thanks mate, been looking for the context menu for ages
I dreamed about channel like this, I didn't expect it to exist!
Thank you!! Most useful video on RUclips about WPF!!
Thank u again man
En serio, son muy buenos tus artículos, mis respetos
Your video helped a lot. Thank you so much!
Wow, design is awesome!
Thank you for share, it is amazing!!!
Excellent video, thank you very much for taking the time to make and post this video.
If you can please make more as you have great design skills and many people still use WPF and UI toolkits such as Material Design, Mahapps etc.
As you know, most programmers are not good designers (although they think they are :) so your videos are very helpful.
Thanks again
Oh, thank you!! I'm glad to help :D your comment is very important to me, it motivate me to create more videos!! Any question or suggestions please tell me and I'll do my best! :D
@@AbelDutraUI In University i didn't recieve WPF (now i'm studying databases), only WinForms, this is so pretty, you make awesome content, i would say that if you have some time, can create an animated charging circle/bar that report how much of the exe actually is charged 'til the app is completely open, hope you do it, i'll try too, thx for amazing videos!
Wonderful presentation. Thanks!
Thank you so much for this tutorial man.. Keep it up.
best tutorial ever
Wonderful
Thank you!! Plaease upload more video this is very good work!
It's Amazing!!!!
thx , this is great :D
You are the best!
Thank you for making this tutorial. Really this video helped me out..!
really really thanks!!!
u are
the best
wonderful!!!!
Million thank you ....
Really nice UI. Me suscribo
you're the best
great tutorial. thanks a lot.
Hi my friend, Thanks fro uploading the video! very informative, When I have tried this design one thing I noticed is that the side panel gets overlapped with the usercontrol form when we select each menu in the panel. How to adjust the design?
Hi, i am new to WPF and i really liked this tutorial, it'S what i needed so thank you for that.
I have now some issues with content navigation, and how is that done, i researched a bit and only found web navigation between pages or using declaration instead of window, which doesn't allow me to to set window transparancy and other properties, ... of course. Or to use the Drag event anymore.
Does this have to be a page nested in a main window or how can i do this?
is there any way arround, or what is the point i am missing?
thank you in advance.
Nice....man
Nice, helped me a lot in my design. Thank you!
amazing
Thanks a lot for this helpful tutorial (y)
Excellent!
Very Nice...
excelente buen tutorial
Very well
very great
Ä bit late but what do you do at 2:56 to get the resource dictionary sources to automatically paste into the app.xaml?? Are you adding from refereces? Because you don't have a dictionary file for the styles so it must be from references right?. Thanks.
You my are a hero
Great video. While I appreciate you taking the time to record this and I understand it probably is easier for you, it would be really helpful if you used a horizontal split of the window so we can see a lot more of the code at one time instead of having to pause, rewind to a point in which you are scrolled over to the right more, then move it again to see the left side, so on and so forth.
Thank you! I'll do that in the next videos. :)
Thanks !
Thank you :) It is very very nice !!!
Try to use Versatile Data Visualization Tool for High Technologies atomicuschart.com get free trial for 3 month
thanks this is the best design video
:D thank you!!
I have one problem. I implemented this menu in .net core, and the first time when i click button to expand side menu, I have a 1-2 seconds delay before it expands, but each time after that evevrthin works perfect. Thanks in advance
Thanks
Awesome video. Really you are sharing your valuable skills to us and also demo project so that we can get instant result. Thanks a lot. Wishing you a wonderful year ahead. Happy new year!
Thank you!!
Happy new year!!! :D
But why there is no defination to row and column, good practice or not?
Excellent! Really enjoy your video. By the way, will you do a responsive UI tutorial someday?
Gooood👍
Thank you :D
By the way, could you explain for what and from where you input the links at 2:59? Also, do you input them by keyboard or copy from somewhere?
Hello, the lib Material Design that I used need this code.
I copied to be faster, all my codes are on github...
this file you can see here: github.com/Abel13/NavigationDrawer/blob/master/NavigationDrawerPopUpMenu2/App.xaml
Now I got it. Thank you:)
How can I resize it and UserControlCreate.Xaml fits properly on the maingrid ?
Can u explain how i can select by swich case complete. When i click it face an erorr that switch (((ListViewItem)((ListView)sender).SelectedItem).Name) in not refrenced or it is null. Thanks Great
wonderful design and lovely animation like android !
I have a software with c# winform can i make this design and animation to my soft?
Great tutorial. Also new to WPF. Is there a way to make the right side (main screen) responsive? So that when the side menu open/closes the right content gets pushed to the side in a responsive way?
Yeah it is! I'll try to do a video like that
Nice !!! !but how can I do open window from menu ?
Thanks bro for this wonderful video you are such a rare gift.
I would like to request for a video on how to create pages. Like that of Microsoft word that can auto insert pages immediately the page is filled up
Thanks in advance
I need an ScrollView for the GridMain, but i don't know to do
Such a modern sweet GUI. Good job. However..
Can you implement that the navigation drawer closes after one of its buttons is clicked e.g. Home?
Basically: how can you fire the EventTrigger for closing the Menu if you clicked one of the navigation drawer buttons and the menu is open?
Additionally how do you link the materialpop up menu with the button/textblock it is clicked within it to access it within the viewmodel?
Hello, thank you! :D in this video I did it: ruclips.net/video/VNYOKc1PLqA/видео.html
Add More! :')
Amazing work, but is there a way to get the GridMain to animate properly in response to ButtonOpenMenu/ButtonCloseMenu ? and Have GridMain linked to Column/Row-definitions with a value of "*" ? so that the contents of the UerControl are resized correctly ?
Was able to do it with Blend managing the animation for the GridMain :)
Hello this tutorial is very nice but i want to create some Sub menu in this so how can i do this with your code please suggest me..
this is excellent, what I would like to know is how to load different forms when clicking the left menu buttons?
You can use the event selection changed to get the menu index or using mvvm
What great music ,what is the name of the remix?
First of all, thank you so much for sharing your skills.
Once you change the window resize mode to none ( ResizeMode="NoResize"). Window is not movable, please help?
Hello, Thank you!!
To move the window you can use the function DragMove(); like I did here: ruclips.net/video/VNYOKc1PLqA/видео.html
Thank you, brother!
I would really like to know how to make a sidebar which will reduce the number of menu items in it if the window is shrunk too small by the user. It would then replace one of these menu items by 3 dots item and contain the hidden menu items in it. Do you think you could make something like that?
I can try to do it!
what is the first song pls ?
Hey i am new to material design XAML. Is there a way to add expander on the listview items. So that i can add more items under listview items.
By the way great tutorial. Thank you.
Hello, I think it's possible... There is a tag that I think it can be possible, I'll try to do something like that to the next vídeo!
That would be great. Or if its not too hard can you throw a simple example with expander. I tried adding it but expander messes up the icon on the side of the listviewitem
Hi, I'm sorry about the delay... you can try to do something like that:
TESTE
TESTE2
TESTE
TESTE2
...and customize each ListViewItem
Thank you very much. It worked. This is what i did if anyone is curious
Oh, very nice!!
Brilliant Video!
Is there any chance you could show how to have a Menu Slider (Navigation Drawer) and how to actively resize the rest of the page?
Yes, I'll try to do it soon!
@@AbelDutraUI Thank you!
hi, thanks for the video . Can you suggest me what to do to move child GridMain with left panel?
Hi, try this one: ruclips.net/video/oDEtZ5_kbww/видео.html
Thanks for this. Can you do one where it Shifts the content instead of just overlapping? Like the Microsoft sites do: Flow, dynamics, etc
Hi, of course :) I'll do that soon as possible
@@AbelDutraUIif possible kindly design something with custom minimizes, maximize and close button.. if it's not too much to ask :)
@@arnoldparas3043 I actually used this resource before which really helped (www.codeproject.com/Articles/1245616/Custom-WPF-Window-with-Windows-System-Functionalit)
but i agree a nice video showing it would be great.
valeu video top
Eu que agradeço
Great video. How can I close the grid menu when I click in any listview button??
You can start the animation when some event happens
Seria possível fazer a navegação utilizando o TabControl? Esse controle simplifica muita coisa pra mim, mas não consigo alterar o estilo dele usando o material design
Diego, da uma olhada nesse meu outro vídeo: ruclips.net/video/XcXjIqjB108/видео.html
Veja se te atende
@@AbelDutraUI Ajudou e muito! Obrigado!!!
Excellent video. This is the best video available so far to learn about WPF on RUclips. Do you have any books published? Would be glad to pay for that? Good work.
Thank you so much!! Unfortunately I don't have books or courses yet :(
But it's on my roadmap to do 🙂
is there a way to install this nuget package on .net framework 4.0 im getting a problem since computers here are windows 7 .net framework 4.0 and installing 4.5 is not an option.
Hello, I'm sorry I'll need to test. I just created on 4.5
Como eu removo o estilo normal do windows do botão quando eu passo o mouse sobre ele em WPF?
Você adicionou a biblioteca de Material Design na janela que está desenvolvendo?
How can i make the ListviewItems into Buttons so that i can use Commands for MVVM Implementation?
use Calburn Micro, its really good and fun (:
You don't show enough code, it is so hard to follow what you are doing when you're scrolling left and right constantly.
You could at least start by thanking him for been kind enough to share.
How to add Metarial design dll in Visual Studio 13
please help me
You need to go to menu: PROJECT->Manage NuGet Package
then search on Online->nuget.org: Material Design
How do you open properties tab in vs 2019
Press F4 button
Hi when i try to install the nuget at 0.30, it says error and not compatible. However, my VS is updated. What can ii do to resolve this?
I'm sorry about my delay. Can you tell me what is the error?
How do I implement listviewitem click events and multi view content area?
Hello, i'm sorry about the delay.. I tryed to answer your question here: github.com/Abel13/NavigationDrawer/blob/master/README.md
Please tell me if it's ok or any other question :)
Design com WPF thx : )
Hello, Great tutorial. Im a begginer in C# and WPF would you please take some time and add more clarification on hot to do this. I've made a template following your tutorial and later to find the issue with click event.
Apreciate in advance!
Hello, thank you so much, I'll try to improve this template soon, inothers videos I implement some other things that maybe help you... Any question please tell me, I'll be happy to help you!! Thanx again!
Soundtrack, please! Amazing video!
Mt obrigado amigo! Vc é BR?
Sou sim rsrs
É isso ai, honra nossa bandeira com esse talento! Parabéns, melhor video que encontrei de MD!
opa
I have problems when I use this code with .NET core please help
Hi, what is the problem?
@@AbelDutraUI how to create a switch menu with user controls using .net Core instead of .net Framework some functions like "gridmain.children.add" don't work
Hi, thanks for this tutorial. How to add OnClick event on ListViewItem? Thanks
You can do like I did on this vídeo: ruclips.net/video/VNYOKc1PLqA/видео.htmlm22s
Tell me does it help you?
Thank you so much, it helped a lot! =)
my ears!!!
Why not Windows Form Aplication?
Hello, I think WPF easier than windows forms
@@AbelDutraUI So how to connect xml with a Windows form
@@AbelDutraUI share whatsapp please
thank you so much nigga,,,,i did my first wpf school project using this design and it is nice...but how can i navigate to other windows..like home..and the like listed in the listview...please quick response...???
Watch this other video: ruclips.net/video/VNYOKc1PLqA/видео.html
Here I show how to navigate.
Is the music a pun to a certain youtuber ? XD
Are you Brazilian?
Opa, sou sim
Suspeitei! Visual Studio em Português + Teclado em Português + Facebook com memes brasileiros = Brasileiro KKKKKK Tbm sou man, gostei muito do vídeo, deu uma inspiração legal em um projeto que estou digamos que "terminando" o começo KKK Hein, você já tentou programar UWP's?
Tenho alguns App's UWP mas não upei pro GitHub... O mais completo que fiz foi consumindo a API da RIOT games
FODA!!!!!!! Eu estou fazendo um que vai usar a API da Steam futuramente, por enquanto acabei de finalizar a base do code behind e parti para o front
Legal! Quero começar a fazer uns vídeos de softwares completos, mas to muito atarefado com a faculdade, devo começar nas férias.
source ?
github.com/Abel13/NavigationDrawer
You should set the GitHub up before you do the video. It's already hard following along the example without any words, and gets a lot harder as you jump around. Set the GitHub up so you can flow through your example more smoothly. Good work though!
Hi, thank you! The source code is in video description
Танк ю со матч ман
it's fast to the point that it's becoming useless ...
why can't you explain what you are doing instead of playing music?
Hi, I'm not comfortable talking in English yet, but maybe I start doing it in 2020
Misleading!!!
Omg stop that 'music' !
I will never understand why people put shitty music behind these tutorials. I get it if you don't want to talk, but why this kind of music?
the sound is some kind of trash, for patients with epilepsy. Why are you doing this? Listen to what you want in your headphones. There's no reason to show the whole world your chops.
Thanks, I'll try to improve it
Very bed video
What can I inprove to be better?