Display Popup In .NET MAUI Using Community Toolkit

hello guys welcome to my channel today in this video i am going to display pop-up using community toolkit in dot net mavi application so let me install community toolkit in this project so for install just right click on your project click on manage new get packages and install this package community toolkit.mobi so this package i'm just going to install in this project okay after that just initialize this toolkit in my program.cs so here in my program.cs i'm just going to add that here use mavi community toolkit so i can access all the controls available in this toolkit now i'm just going to add one page to display as a pop-up so here in dot net mavi content page i'm just going to add okay so right now this is the content page so for displaying this page as a pop-up i need to convert into pop-up page so for that let me add namespace here so this name space i am just going to use myvi toolkit so from that i can now access toolkit.popup now i need to change a base class of this pop-up page from code behind so i need to set as a pop-up here also okay now here on main page on the click of button i am just going to display uh let me display this pop-up page so for that you just need to use so pop-up method so like you can access this dot so pop-up and in that just specify the pop-up page name so here we have added our page name as a pop-up page so that here i'm just going to specify so now it's just going to display pop-up page on the click of this button so let me run the application okay so here on the click of button it's uh displaying uh welcome to dot net mavi so that content is available here in pop-up page so let me just add here so from the resources images i'm just going to display this image here okay now let me run the application okay so now it's displaying good so here by default like this toolkit dot pop-up is aligned to like horizontally and vertically align to center but if you if you want to like a display either on like left side or right side or the bottom of the screen then you just need to set here uh this horizontal option property to align it horizontally like uh let me set to start and vertical option also start so it will align this pop-up to like the top of the screen and left side so let me run and also there is another property like if you right now if i click outside of a pop-up page then it's just going to close this pop-up to to avoid this you just can you just need to set can be dismissed by tapping outside property so it will after that it's not going to close the pop-up okay so now it's displaying top left side now here on outside of click it just closing pop up to avoid that like if you do not want to close this then just set this can dismiss by tapping outside to false so after that it just it will not close the pop-up page and after that you just need to add here button to close it manually okay so now if i click outside of the screen then it's not going to close the pop-up now let me add here button like two button for confirmation like yes and now do okay so for close pop-up you just need to add this blood clothes okay i mean that you can pass value also so like on the click of yes button is just going to close the pop-up and here also i'm just going to pass some value so i just uh use this to button so let me now run run the application so on the click of here so no it's just going to close the pop-up and here like in some scenario you need to pass some value like either like uh if you display some alert pop-up and for the confirmation like user confirm the click on confirm button or not so in that case if you want to pass some value that time you can pass here value in this closed function in the type of object format okay so here on the click of yes or no it is going to close the pop-up so now i'm just displaying pop-up page here on the click of main page uh on the click of button in main page or gmail.cs so you can use those uh another method is so pop-up by pagesync method so let me use that and here i will pass the page name that i want to display okay so this soap up page uh will return the value so whatever the value we pass here on close method that you can access here so let me pass here and that value will be any type if you want to pass some object so let me just pass simply here true on the click appears and let me pass some object on the click of no button so you can just for temporary purpose i am just passing value like this now let me just add debug point here now i'm just going to run application so on the click of yes button this result going to return true and on the click of no button it is going to return this object and in that user id is equal to one that i passed okay so here on the click of yes okay sorry i forgot to add here because this is just so pop-up pagesing method so i need to add away so it's just going to wait till any action is performed now let me even so okay so now here on the click of yes this result returning true and on the click of no uh this returning now in object format user id is equal to one so whatever the information you want to pass you just you can pass in a close function yeah so you can pass you know because this close function accepting object type value so you can pass any type of value now let me add here one view model so how you can display pop-up page from view model so that i'm just going to show you so here i'm just going to add new view model for the main page so here i just created so pop-up command so from here i'm just going to display pop-up page now this main page binding context i am just going to set as a main page view model so for displaying copper page from view model so you just need to use tab dot current dot main page so whatever the current page so from there it's just going to display on that page it is going to display pop-up page now here in main page so i'm just going to remove this counter click event and i'm just going to pass this command name so pop-up command here and it's just going to execute this so power passing method so okay so it's displaying pop up here on the button click now like if you want to perform some event like on the click of uh yes or no button you you want to call some api call and you want to perform some action that you can do based on some condition okay so that's all for today i hope you like this video and thank you so much for watching

Channel: Programming With Pragnesh

Views: 7,235

Keywords: .NET MAUI, maui, c# maui, Popup In .NET MAUI, Display Popup In .NET MAUI, Community Tookit Popup, .net maui, net maui, maui c#, maui tutorial, maui .net, C# maui, dotnet maui tutorial, blazor tutorial, blazor crud, .net maui app

Id: 0-FaDeCPIhM

Length: 15min 58sec (958 seconds)

Published: Fri Sep 16 2022