.NET Maui Apps | Add Context Menu to Desktop Application to enhance its appearance and accessibility

Hello friends and family you're welcome to net  to adapt Channel we're going to talk about how   to improve dot net marry desktop application  with a hop-off or integrating contest menu   when you have a list in the collection view  when you run this application in the Android   you can have these features like a swap or tab  swamp views you can swap to delete or swap to do   anything at all but you know swap View does  not work in Windows or desktop application   so in such case is there any way to improve or add  a contest menu whereby I can just right click and   get me the content that I want yes you can let's  see now you see we have a list over here in this   app now I can just Swap this list from left to  right or from right to left so I can have many   over here either to delete it or to view or to do  any other stuff but when you run this content in   desktop application some view doesn't work so what  we're going to do here is you want to right click   so that you can have the contest so example I'm  going to right click on like this we're going to   have this contest menu here whereby we can choose  from this contest and that is a way to improve   the desktop application create goes to James what  you want to do here is first of all let's install   some package so right click on this and I go  to manage index packages and now here we have   to install community2k.mdvm because that's what  you're going to be using but I've installed that   already so if I go to dependencies and Android and  now packages because I have this package over here   installed so you can get it from this browse Tab  and now install this package okay so when you are   done the next thing that we're gonna do here is  we have to create our model so let's right click   and I add a class so we're going to add class and  now this class is going to be user so we're going   to use a user class now you're going to have Visa  ID username so you want to populate to get a list   in the collection view so you can have ID and  maybe you can go in four so this is string and we   can go in for name okay now um maybe you can add  something else but let's maintain this now we can   save this let's create our view model so let's  add a class and this class is going to be who   home page view model uh we're going to use  the main page so we're going to say main page gmoda now this main PhD model is going  to inherit from observable object so with this let's create Constructor here and let's create public observable collection and on this collection we're going to use  for this user model and I will say uses so we have a get and set assessors  then we can assign this to new so   in here we can talk about add users let's create this method so we have private void and uses and now we are going to  users dot add then new user so ID equal to one name so let's see we have John  Doe that is the first one so let's copy this and add few once so add me user we add this  we can also add another one so let's close this Okay so yeah we're gonna use another one so let's add this to and let's add one more to make it like four so here the ID is going to be two and down  three and I'm four so we're gonna have like okay so now we have this disaster when  this page gets called we want to call   this method now this method here it  is populating the user collection   so let's collect all this  because you're not going to use okay now let's save this now let's go to the main  page so first of all let's register this here so we say Builder dot Services dot add so we want to add  transient and that's going to be main page okay now let's do same two The  View model so let's grab this   and now here so we say main page view model you  do this okay so let's go to the main page the   example.cs let's bind the context so we can pass  in main page view model then let's bind it here so it's a binding contest is equal to main page  view model okay now let's save this so when we   come to this main page here this must be a public  partial class and that is what we need to do here   okay now in this main page let's use a collection  View so here you can play the default one   and we're going to use collection  View so first of all we can use grid and now here we say row  definitions we're gonna use star then in here we're gonna use collection View for a collection View and we have  collection view dot item templates so so in this so once you have the item templates let's  specify the data template and now this data   template before we do that you have to add  the view model so let's add the name space   and I will say this is View model we set this  equal to so now let's navigate to The View model so namespace then we have demo okay so we have this this is a demo and  let's specify the data type here so X   data type then I can talk about this view  model dot main page viewmodel so let's see survey model and we can talk about this main  page view model so let's open it now within   the data type we can also specify the model so  let's see now we have this view model so we can   grab the model from here so inside of this  view model we can talk about let's say local   then we can copy this and grab it  here so with here we can talk about X   and with this data type so let's specify  the data type here and we say local and on this Lookout we want to  use user now in this data template   with a collection view let's bind the item source so item Source we are binding this item source  to users like this now let's specify a frame here   so let's use frame and now this  Frame we can use border color watercolor and also let's specify the margin   so five five zero meaning left top um  right and bottom so in here let's use label and on this label let's go for the test  and on this test let's bind this to   um name so when we run this let's let's run this  in the window machine and see what we have now so you can see that application has run in  the desktop mode and that's what you see so   let's try to add the contest menu  so if I right click on this can I   have an options here contest menu that's what  we're going to have a look today so let's see so let's surround the frame here with  a swap view so we can have access to   the flyout base and we can get the  contest flyers from it so swap View the last space what we have here so in  here we can now look up for flat out base   then you can have contest fly out then  when you open this you can have menu so many fly out then inside this menu fly out  you can have many item so many fly out item as   you can see from here and we can talk about  the test so let's say um we can talk about maybe get name we can also make a copy of this and maybe you can say View details you can add one more let's say delete so let's save this and now let's see so  if I right click on this you see we have   the contest menu here so get name  now each has the same context menu   as you can see so in the Android you have to  swap by here contest menu works for this and   anywhere that you click if it is within  the frame it's going to work so it is not   limited to only the name anywhere that you  click install wax okay the next thing that   we can talk about here is we can add maybe  lines so let's see what we can do from here   if we can actually add some line to this  to make it beautiful so we can go in before so many fly outs separator yes  you have this and we can copy this   and now paste it here so this is going to  give it a line so save this and I'll see   you can see we have lines in between so  this is also a feature that we can also add   we can also add an image or an icon to base okay  so let's say get image now let's see this item if we can have icon image source then we don't  have any image here so we can decide to use   when you go to our resources and our images  you have.net but dot lvg so you can add that   so that's Nets bot and last call lvg dot lvg let's see if it is so it is  solution okay so we can just take this off so save this and let's see if this  will work for us okay so the icon must   be here but we are not seeing this icon  image source let's refresh this and see   all right so let's see now this is not  sure when so let's try to I've added and   a map image here so you see this is a map  image now let's try to use that image here so map dots PN PNG save this and now let's see  so we see the icon is showing right so you can   decide to add an image or an icon and it's going  to be shown over here okay now the next thing that   you can talk about is event so if I click on this  what should happen maybe this so I can decide to click this so you can add click event and uh when it is Click what you  want to do we have this event   um code so we save this now  let's go to this page and you   can see the event over here so you can  decide to display something like cell to sell that current that display alerts let's say this is info and here we can talk about let's say clicked and we say okay over here so I want to save  this let's see what happens so if I click on   this and I get name we must have that event file  because we Associated the events to the first one   so it is saying that we have to  restart our so let's restart this so loaded now let's see so get name and you can   see we have the associated to it but  in case if you want to associate this   if you want to display this to The View model  can we do that let's try to see if we can switch   this to a view model because you don't want to  use the event driven you want to bind this to   a method created in a view model that's a home  page view model so in such case what can we do let's see so let's give this content page name  so we set this name to and this is main page content so after setting up  this page then this is what we can do   we come to the first page and in  here we can clear this clicked so let's slide this off now once you click  the click we have to the event you have to   also go to this and now clear this event  as well now in here let's add command now this command we have to bind it now this bind  we set up source and this Source make a reference   a reference to so we reference then  this reference we set up to main page   so that is a main page content that is  a reference that we are setting up to and aside from that we have to specify the  path and do you have any path so we have to   go in there and then create a method okay so  before we come to this let's stop this let's   go to the main page and I'll create a method  here so this is public and this is display name   and now the display name we are passing  in with the user and the user object and now we say that so is isn't task you forgot that and  now with this we have to say so if user it's not records you now that is where we want  to um display so which cell dots current dot   display alert and now this is info and what  you want to display here it is user.name then you can have okay button else then you want to return very simple so you want to display the name  so we have this method now let's pass in an   attribute here as a relay command to this now  let's go to the main page so in here we specify   the path and now the part how I'm going to specify  the path we are going to do it by saying binding contest so path is equal to binder contest Dot so binding contest dots now you can go in for the  method name so this is a method name now since we   are using the relay command it means you have  to add command to it so we go to the view model   that's the main page then dots we paste this and  add command to it aside from that let's specify   command parameter so what are the command  parameters that we want and now here we say   binding then using dot mini referring to itself  so you see we create a reference to the page and I   reset the context The Binding contest now when you  go to the main page here the context bound here it   is a main page view model and on this main page  view model contains the method known as display   name so when we make a reference here it needs to  refer to the context bound to this main page and   now we want to go in there and make a reference to  a command known as display name command and pass   in a method or passing the variable or an object  as a current object that the mouse is hovering   on so that's why this line is telling us to do so  now let's save this and unless for an application so now let's see once application has built  and run so right click on this now you see   we have this methods here or this context menu  so delete happens uh viewing nothing happened   now if I click on get name let's wrap it we say I  have John Doe that is a name that I'm displaying   if I click on this and click on this you see  I have the name and that is the way so you   see this method that we are calling here it is  bound to the view model and that is a beautiful   way to use context menu in desktop application  this is for desktop application contest menus   as for desktop application okay now aside from  this you know we can add multiple if you want   to add sub maybe this gets if you want to add  sub or you want to have like something like   options you want to have something like detailed  or more to get us the list so how can I do that   let's see how to group or how to add sub contest  menu so to add sub contest menu is quite simple   let's see how to do that now we go to  the page so here let's add a separator so let's take this out and now let's add a separator here and let's create this menu fly out item so we're  gonna say menu fly out item some items as you can   see from here we have this so sub item then let's  say test we say more so this is what's going to be   displayed now when this button is clicked you're  gonna have this flyout item so you can copy this and now paste this so let's see so more we can talk about um save maybe edit and let's say add to favorites okay so maybe we can't add this so I'll save  this and now let's see what's going to happen   so if I click on this you see I have more since I  hover on I have saved edit add to favorite right   so the same thing applies to this and I can do  that so you can do more with this contest menu   um you can do more to to use it  in your application or desktop   application development all right so that  is a short video on how to integrate this   thank you so much for watching if you like  what I'm doing you can give me a thumbs up   and also subscribe to the channel as well  check the playlist and we have a lot of   lessons and projects for you thank you and  I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 252

Keywords: asp.net core, Registration, controller, service, email service, web api, SMTP, pagination, EFCore 7, skip(), scalffold, scaffolding, assign-role, maui, mobile apps, maui app, mobile app, desktop app, create app, barcode, qrcode, android, apk, applications, application, publish, windows, MSIX, publish apk applications, poweshell, cli, command-prompt, google api key, map key, google map api key, cloud key, direction, maps, integrate map, desktop application, google map.api key, api key, context menu

Id: O6mtzfgaePU

Length: 26min 53sec (1613 seconds)

Published: Sat Aug 05 2023