Display Popup Using Plugin.Maui.Popup In .NET MAUI

foreign [Music] [Music] [Music] foreign content in pop-up using this plugin uh plugin.mavi.popup so this plugin I have created and let me install this plugin in our project so for installing this search for this plugin plugin dot mavi.popup in your project so let me just install that plugin so just click right click on your project and click on manage new get packages and here search for this plugin.mary.popup and install this plugin in your project okay so once it installed then I just add a new page to display content in pop-up so here I am just adding a new content page okay now I need to add this namespace here so first add this name space in your content page convert this into this mavi popup.base pop-up page so now this page is converted into pop-up page and here also encode behind just site as a page pop-up page okay now here on main page click event to display pop-up just use this method mavi popup.popup action dot display pop-up so here okay so pop-up action dot display pop-up and in that just specify your page name that you want to display so in our case our page name is this pop-up page so let me add some [Music] headset so I'm just going to copy from main page this image and label I'm just going to display here in vertical strip layout okay now let me run the application let's see on the click of is counter but then it's displaying this containing pop-up or not okay so here on the click of this button uh click me button it's displaying pop-up let me just set here padding okay so you can set here padding and here is the another property that you can set like a horizontal option so if you set it to start then it is display pop-up content on start then you can set it to Center or you can set it to fill and expand so it is going to fill all the space similar way you can set the property also here like vertical option by default it's a center you can set it to start also you can set it to and means you can just set all this property Center and expand start and expand everything you can set and by default when you click outside of the pop-up content then it's just you're going to close the pop-up for this to disable it just said this property is is closed on background click when you set it to false and when you click outside of the pop-up then it's uh it's not going to close even on this back click so you just you need to in that case you need to add here one button and on the click of that button you can close that the property also if you want to set background color of this pop-up content just use this foreground color property and just said whatever the color you want that color you can set here in pop-up background okay now let me add here one button okay so here on the click of close button I am just going to close the pop-up so for closing pop-up you can use this accent um close pop-up okay now let me read the application okay so now here on the close pop-up it is going to close the pop-up and here also another property that you can use is a margin so if you want to set margin from left side like when you set to UI like a horizontally fill and expand so in that case you can set here margin also like left and right margin so it's going to just add margin okay so uh that's uh all for today I hope you like this video and thank you so much for watching it

Channel: Programming With Pragnesh

Views: 5,960

Keywords: Plugin.Maui.Popup, Popup Page in .NET MAUI, Popup, .NET MAUI, .maui, c#, MAUI, .net maui, net maui, maui c#, maui tutorial, maui .net, maui, C# maui, dotnet maui tutorial, blazor tutorial, blazor crud, .net maui app

Id: YBSlP5t3860

Length: 8min 48sec (528 seconds)

Published: Tue Sep 20 2022