C# WPF Material Design UI: Navigation Drawer & PopUp Menu

[@notanenglishperson9865]

I dreamed about channel like this, I didn't expect it to exist!

[@JsHwangJJ]

Thank you!! Plaease upload more video this is very good work!

[@nandkishorsonwale]

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!

[@AbelDutraUI]

Thank you!!

[@AbelDutraUI]

Happy new year!!! :D

[@davesimon9192]

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

[@AbelDutraUI]

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

[@alfredoperez2420]

@@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!

[@manukartofanu]

Wow, design is awesome!

[@tigran12]

Thank you!! Most useful video on KZbin about WPF!!

[@mosth8ed]

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.

[@AbelDutraUI]

Thank you! I'll do that in the next videos. :)

[@sadramohh]

Thanks mate, been looking for the context menu for ages

[@codingislove4279]

Thank you for making this tutorial. Really this video helped me out..!

[@dario.montoya]

En serio, son muy buenos tus artículos, mis respetos

[@Yxnder]

Ä 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.

[@trevorkobilo2480]

Wonderful presentation. Thanks!

[@alexaprodu5346]

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.

[@theway5258]

Very well

[@kodakkastone3154]

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?

[@AbelDutraUI]

Hello, thank you! :D in this video I did it: kzbin.info/www/bejne/jH-8gH6ZZrV_p6M

[@senaylmaz223]

Wonderful

[@alexanderparshakov809]

Your video helped a lot. Thank you so much!

[@balkiprasanna1984]

Excellent video. This is the best video available so far to learn about WPF on KZbin. Do you have any books published? Would be glad to pay for that? Good work.

[@AbelDutraUI]

Thank you so much!! Unfortunately I don't have books or courses yet :( But it's on my roadmap to do 🙂

[@Danger418]

Nice, helped me a lot in my design. Thank you!

[@aher3122]

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?

[@AbelDutraUI]

Yeah it is! I'll try to do a video like that

[@mrohailiqbal]

Very Nice...

[@eddyemlj8482]

Thank u again man

[@pavlosomko9732]

u are the best

[@kurtisaspden2345]

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?

[@AbelDutraUI]

Yes, I'll try to do it soon!

[@kurtisaspden2345]

@@AbelDutraUI Thank you!

[@argawirawan8296]

very great

[@vmarinpietri]

Nice !!! !but how can I do open window from menu ?

[@tolibass420]

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 ?

[@tolibass420]

Was able to do it with Blend managing the animation for the GridMain :)

[@conradtwoeleven5415]

this is excellent, what I would like to know is how to load different forms when clicking the left menu buttons?

[@AbelDutraUI]

You can use the event selection changed to get the menu index or using mvvm

[@phakkhaponwonganu8315]

Million thank you ....

[@alexanderparshakov809]

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?

[@AbelDutraUI]

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

[@alexanderparshakov809]

Now I got it. Thank you:)

[@johnolive6634]

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

[@Enzovandit]

really really thanks!!!

[@katiais8757]

Thanks a lot for this helpful tutorial (y)

[@iancarr3923]

Excellent!

[@pablocuadros8482]

You my are a hero

[@ChrisLawford]

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?

[@AbelDutraUI]

I can try to do it!

[@patyue5012]

But why there is no defination to row and column, good practice or not?

[@draskomi]

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

[@arnoldparas3043]

Thank you so much for this tutorial man.. Keep it up.

[@nebezho9686]

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

[@danielsachin1106]

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?

[@begumbeyzakocahuyuk3122]

wonderful!!!!

[@amazinggamers356]

best tutorial ever

[@pranavshirsul2186]

hi, thanks for the video . Can you suggest me what to do to move child GridMain with left panel?

[@AbelDutraUI]

Hi, try this one: kzbin.info/www/bejne/pXWopY1rlNCVrdk

[@hunainnasir520]

How can I resize it and UserControlCreate.Xaml fits properly on the maingrid ?

[@utsavroy2656]

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.

[@AbelDutraUI]

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!

[@utsavroy2656]

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

[@AbelDutraUI]

Hi, I'm sorry about the delay... you can try to do something like that: TESTE TESTE2 TESTE TESTE2 ...and customize each ListViewItem

[@utsavroy2656]

Thank you very much. It worked. This is what i did if anyone is curious

[@AbelDutraUI]

Oh, very nice!!

[@אלוןגרוס-ו4ה]

What great music ,what is the name of the remix?

[@ManavDIY]

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?

[@AbelDutraUI]

Hello, Thank you!! To move the window you can use the function DragMove(); like I did here: kzbin.info/www/bejne/jH-8gH6ZZrV_p6M

[@ManavDIY]

Thank you, brother!

[@dayanbermudez3525]

excelente buen tutorial

[@TallyOce]

You don't show enough code, it is so hard to follow what you are doing when you're scrolling left and right constantly.

[@dii2]

You could at least start by thanking him for been kind enough to share.

[@chamhoi3132]

Thank you :) It is very very nice !!!

[@Wildbeez]

Try to use Versatile Data Visualization Tool for High Technologies atomicuschart.com get free trial for 3 month

[@ChrisLawford]

Thanks for this. Can you do one where it Shifts the content instead of just overlapping? Like the Microsoft sites do: Flow, dynamics, etc

[@AbelDutraUI]

Hi, of course :) I'll do that soon as possible

[@arnoldparas3043]

​@@AbelDutraUI​if possible kindly design something with custom minimizes, maximize and close button.. if it's not too much to ask :)

[@ChrisLawford]

@@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.

[@jgrecalde]

Great video. How can I close the grid menu when I click in any listview button??

[@AbelDutraUI]

You can start the animation when some event happens

[@allanmingau]

valeu video top

[@AbelDutraUI]

Eu que agradeço

[@leamon9024]

Excellent! Really enjoy your video. By the way, will you do a responsive UI tutorial someday?

[@bobi9749]

How can i make the ListviewItems into Buttons so that i can use Commands for MVVM Implementation?

[@mdrahbarahmedkhan]

use Calburn Micro, its really good and fun (:

[@diegofernandes1258]

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

[@AbelDutraUI]

Diego, da uma olhada nesse meu outro vídeo: kzbin.info/www/bejne/jpS7m3ynn6dkZpo Veja se te atende

[@diegofernandes1258]

@@AbelDutraUI Ajudou e muito! Obrigado!!!

[@federicosorgi265]

Thanks !

[@haydarm.al-samawe9819]

amazing

[@mohuissier1277]

wonderful design and lovely animation like android ! I have a software with c# winform can i make this design and animation to my soft?

[@levivelasquezpaz7401]

thanks this is the best design video

[@AbelDutraUI]

:D thank you!!

[@sona184]

Thank you for share, it is amazing!!!

[@陳葵-b2q]

thx , this is great :D

[@maiconh.rossini7759]

You are the best!

[@asithas.bchandranayake4353]

great tutorial. thanks a lot.

[@rishabhshrivastava1722]

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..

[@eweem1110]

I need an ScrollView for the GridMain, but i don't know to do

[@brandoncox469]

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!

[@AbelDutraUI]

Hi, thank you! The source code is in video description

[@adrianoplushenko890]

Really nice UI. Me suscribo

[@TurtleSergio42]

you're the best

[@renanazzolim7112]

Hi, thanks for this tutorial. How to add OnClick event on ListViewItem? Thanks

[@AbelDutraUI]

You can do like I did on this vídeo: kzbin.info/www/bejne/jH-8gH6ZZrV_p6Mm22s Tell me does it help you?

[@renanazzolim7112]

Thank you so much, it helped a lot! =)

[@ChuckChad1]

It's Amazing!!!!

[@berlyntumaneng9285]

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.

[@AbelDutraUI]

Hello, I'm sorry I'll need to test. I just created on 4.5

[@PasirPelangi99]

Why not Windows Form Aplication?

[@AbelDutraUI]

Hello, I think WPF easier than windows forms

[@PasirPelangi99]

@@AbelDutraUI So how to connect xml with a Windows form

[@PasirPelangi99]

@@AbelDutraUI share whatsapp please

[@emisondias1136]

Mt obrigado amigo! Vc é BR?

[@AbelDutraUI]

Sou sim rsrs

[@JuniorSilva-dg3ow]

É isso ai, honra nossa bandeira com esse talento! Parabéns, melhor video que encontrei de MD!

[@sharmafamilykvideos]

How to add Metarial design dll in Visual Studio 13 please help me

[@AbelDutraUI]

You need to go to menu: PROJECT->Manage NuGet Package then search on Online->nuget.org: Material Design

[@iamnin0]

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?

[@AbelDutraUI]

I'm sorry about my delay. Can you tell me what is the error?

[@hitoshilxrd4518]

How do you open properties tab in vs 2019

[@AbelDutraUI]

Press F4 button

[@huzaifaansari8688]

Nice....man

[@mathieucisse7981]

what is the first song pls ?

[@br0keh]

Como eu removo o estilo normal do windows do botão quando eu passo o mouse sobre ele em WPF?

[@AbelDutraUI]

Você adicionou a biblioteca de Material Design na janela que está desenvolvendo?

[@tuandoan4296]

Thanks

[@아딱맨]

How do I implement listviewitem click events and multi view content area?

[@AbelDutraUI]

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 : )

[@CarlosEGuillen]

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!

[@AbelDutraUI]

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!

[@lucimarckjunior4754]

Are you Brazilian?

[@AbelDutraUI]

Opa, sou sim

[@lucimarckjunior4754]

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?

[@AbelDutraUI]

Tenho alguns App's UWP mas não upei pro GitHub... O mais completo que fiz foi consumindo a API da RIOT games

[@lucimarckjunior4754]

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

[@AbelDutraUI]

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.

[@alekseivamen6835]

Gooood👍

[@AbelDutraUI]

Thank you :D

[@pleasedont1692]

I have problems when I use this code with .NET core please help

[@AbelDutraUI]

Hi, what is the problem?

[@pleasedont1692]

@@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

[@tangitv6758]

Is the music a pun to a certain youtuber ? XD

[@Kairo18]

opa

[@kevmac9967]

Add More! :')

[@amateursdream]

Soundtrack, please! Amazing video!

[@MehammedTeshome]

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...???

[@AbelDutraUI]

Watch this other video: kzbin.info/www/bejne/jH-8gH6ZZrV_p6M Here I show how to navigate.

[@davidleedom]

why can't you explain what you are doing instead of playing music?

[@AbelDutraUI]

Hi, I'm not comfortable talking in English yet, but maybe I start doing it in 2020

[@EMRDJ2008]

it's fast to the point that it's becoming useless ...

[@yephick]

my ears!!!

[@mahdi4581]

source ?

[@AbelDutraUI]

github.com/Abel13/NavigationDrawer

[@handypda]

Misleading!!!

[@zungatzungatov5317]

Танк ю со матч ман

[@МанитуИзМаниту]

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.

[@AbelDutraUI]

Thanks, I'll try to improve it

[@rudiwosch4446]

Omg stop that 'music' !

[@tataelm]

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?

[@krabyrgerkrabyrgerovich2757]

Very bed video

[@AbelDutraUI]

What can I inprove to be better?