.NET Maui Apps | How to display Popups with MVVM In .NET Maui Mobile and Desktop applications.

Hello friends and everyone and welcome back again  to netcode app Channel this video we are going to   cover up the last part of pop-ups in.net Murray  I have covered the default one that is using   display I like display action sheets and also  display prompt async and I've also done a video   on using the toast and on the snack bar now the  last one left here it is how to display pop-ups   use any Community toolkit dot marry nuget  package now one advantage of this is you can   decide to turn a whole content page into a pop-up  so let's create a project.net Mary app and I have   created one already aside from that we have to  install some nuget packages and the first one   I'm going to install is the committee toolkit dot  marry and aside from that we're going to install   chronic2kid.mpvm so you want to use the model  0v mode architecture for this lesson so that's   all you need to download these two packages so  right click on dependencies and as you can see   for mine I have the community2k.mary that is what  we need most and also the 22k.mpvm that is what we   are going to use so install these two packages you  can right click on dependencies and I go to manage   naked packages you pass them to the browse Tab  and I installed them quietly Okay so let's assume   you are done installing what you need to do here  is with the mgvm you do not have to initialize   it in the program.cs file but for the the Murray  community2k.mary you have to initialize it so how   to initialize it let's click on my program.cs file  and in here we have to initialize it so dot use   and we can go for Mary Community  toolkit so we need to add this   now the lesson that we have to do is  after adding this we have to create a   page so let's create a Content page for this  so right click on the project let's add a new   item and this is going to be.net Marie content  page and now here let's name this as a pop-up page   now you know we are going to convert this into a  pop-up so we have to change the type of content   page and also it's related uh models in it so  let's see how to work on that now the first   thing to do is let's add our namespace so we want  to take out this title let's add our namespace so let's say this is two kids and now we have to add http and uh schema so let's search for that  if it is here 2022.mary so we have it   here the mario.2 okay so that's  what we need to add as namespace so aside from doing this the next thing that we can do is let's turn this  to two Kit then we have our pop-up specify two   now the lesson that we can  do is we have the same thing we have this vertical stack layout you can  just grab this and you put this in a frame   so maybe you can paste this here so we have a frame we have it can stack layout  and we have this button or label in it that's okay now all you have to do again after doing this  is we have to go to the pop-up page that is   the pop-up.xml.cs and I instead of inheriting  from content page it's not going to help from   pop-up page so pop up now let's initialize it so we have to have a  button so we click on to display this pop-up   so let's go to after saving this let's go to main  page and now here this button we want to do that   so before that let's create a view model to this  page or this application so click on ADD then   you add a class as a view model so this related  to it is for this main page so we say main page view model since we have installed mbvm  we can use the class here so observable objects [Music] so observable objects and let's have a button so public is in task so let's show pop-up and now with this let's create so pop up so we say my pop-up is equal to new now the name of this is pop-up page so pop-up page then we're gonna say sell dots current  dots so here you see we have current   and we have page or you have current page  dot show pop-up so we have this Shield pop-up and now here we pass in the pop-up so you pass in this now let's save  this so let's use an await here   okay so let's see so this is  white so let's take out this await so let's take off the weights  and now here let's make it white   and let's see we can take up the async  now this let's bind this main page view   model to the main page so we come to the  main page over here and let's find it so binding contest is equal to aside from this   we have to register this main page so let's  copy this and let's go to the Mario program.cs so 0.services.com Singleton that we can pass in this  view model Also let's register the page so that is the main page you register that too okay now aside from this let's go to the main page view  model and now here must be public partial class okay so watch that let's go to the main pages of analyze by The View model so we are going to use and we're going to say that this  is let's say local or view model name space then I'm gonna use demo so let's  specify the data type and we say view model and now we can go in for main page view model  so we have main page view model over here now this button we can now bind  into it so let's say this is command Okay so command and we're going to bind it and what is the name of let's see the main PhD  mode okay see we have to pass in a relay command   so relay command then we can grab that  command over here in the main page   so you can have show pop-up command now  let's save this and run this application so this page is now open right now it is not  displayed third but that's going to be pop-up so this will pop up now when you click on it you  can see we have welcome 2.net marry so we see this   is a pop-up and here we can decide to style it  the way that we want okay so let's try that and   see so when you go to the pop-up page we have  this Frame and maybe you can have border color   maybe red you can have image in here so let's see if we can go to resources and we   have images let's drag and drop  this here so we have this image so let's save this and now let's refresh it and  see what we have now so you can see now we have display pop-up let's refresh the page [Music] so  now let's click on the button and see so I click   on the display pop-up and I can see we have the  image displayed with the content here with the   Border also indicated red and specified in the  code so that is a way to display the pop-up but   this time around we want to do something else  how can you pass data from view model to this   so let's say if I click on the button I want to  pass data from A View model to this is it possible   we're going to have a look but first of all let's  talk about these two now we know if I click on   this backdrop the pop-up disappeared if I want to  stop that what can I do you come to this and here   you can specify all the properties over here the  first one is you can talk about a vertical height it is in the center page as you can see from  here it is in the center page now if I decide to   um set this to let's click on this button   so you can see it's in the center  page that if I decide to change this so let's say and it's going to move  to the end when we refresh the page   and also we can talk about the next  one so let's put this to Center also you can talk about the horizontal one so  you can also set the horizontal version from   um this that should be the  stats or the center or the   end you can do that now the next  one too that I want to talk about is you see that if I click on this page the  background at the backdrop you can see the   pop-up disappears if I want to stop that can I  make it yes you can do that by using this can   dismiss by tapping outside of pop-up if I set this  to force let's see refresh this so I'll click on   the display pop-up now click backdrop and nothing  happens so in this case you have to have a button   so that I can click on this button to close  it so let's add a button here and this button maybe I will say that the test is close so  let's give it a name because we are going   to close it so then I'm going to perform any  functions so let's close this and we say BTN   close now let's have a click event so we  generate a click event here and let's go   to your pop-up page now you have it here  so we can just type in this Dot close now let's refresh this and see what we  have so let's click on display pop-up   now it displays and click on close and it closes  so here I click on the backdrop nothing happens   unless you click on this close let's have  another button about there and this time   around you're gonna have Auto close or when  you click on this button you want to perform   different all together so let's go to the pop-up  page here and let's add another button here as thank you so we add a button  and we say test is let's say hi so now let's you can see we have this view model   bound to this pop-up page so in here  maybe we can decide to pass it here so that is the main page viewmodo and let's bind to the contest so binding contests records you npg model so let's register this in  program dots.mary.program   so you can just grab this we have this already so  I know this is let's try to add this for part page okay now let's go to this program  here where we have this Murray   now in here we have to specify this so  maybe we can decide to create new main page   now the lesson that we're going to do here  is let's pass in so this is public async void   or let's say this is public void  yeah let's or less made a sync right now let's say let's  give it a name I say something so you can say a weight shell  dot current dot display Alex say you can see saying hi you have okay button so let's put a relay command so this command let's go to the pop-up  page now this button let's pass and command   and you can go for binding and  let's see if we're gonna have so we have the main page view model added  to this so let's close this first and here   let's see so say something now let's run  this application and see what we have now so I'll click on display pop-up and now see how  I click on this and I could see I have saying hi   to you so aside from that you know if I click on  anywhere it doesn't go click on say hi I can say   hi and as soon as I click on close it closes  okay but what off in case you want to do this   as soon as I click on this pop-up it will wait  for some time then it closes itself can we do   that yes we can so let's see what we can do  about that now in here what we have this page our main model so in here we can start a new task  then when the task is done we can just close it   so in a command page whereby that's a v model  that is where we have our show pop-up now after   showing the pop-up you want to check for  some time you want to start a new task and   check if the time is up then you close the  pop-up so you can do that by saying I wait then we can start so task Factory so dot start  new task then this you're gonna call this method so we say that now let's close it so trade dot sleep and you're going  to use maybe three seconds   then at the end we're gonna say pop-up Dot close now let's save this we're going to wait  for 30 seconds then we're gonna close it so let's click on this button and as soon as we   click on it you're waiting for three  seconds if you automatically close so you see it has closed so you open it you can  decide to click on this button to get it close or   when you wait for some time it's going to close  by itself so we can use try cash here to prevent   this it is saying this post cannot access dispose  object so we can use a try cut here if you don't   want to have a close button here we can wait for  some time to get them it closes by itself okay so   maybe we can decide to clear this when we run  it again so we can use try Cuts here so let's   see let's try you can just try then we can catch  the exception so we can do this let's refresh it   so let's click on the display button Now display  so let's close this and you could see it closes   now there is no exception here again or we  can just wait it's going to close by itself   so I believe now you have the basics  of how to use pop-ups in dot net marry   thank you so much for watching and I'm  going to catch you up in the next video

Channel: Netcode-Hub

Views: 262

Keywords: skip(), scaffolding, assign-role, mobile apps, maui app, mobile app, desktop app, create app, android, apk, applications, MSIX, 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, navigation service, nivigate trough content pages using navigation service, How to use Font Awesome in NET MAUI Mobile and Desktop applications., fontawesome, icons

Id: fVfB0jI8vYo

Length: 20min 39sec (1239 seconds)

Published: Tue Aug 08 2023