Create different types of Popup in dotnet MAUI

foreign [Music] about pop-up uh how to display a pop-up in the dotnet model so uh I have created example of three types of pop-up uh one is display alert another is display prompt and uh third one is plugin dot Maui dot popup so the third one is an uh one of the uh nugget uh I have installed to show the pop-up so there are many nuggets like sync fusion and uh uh and another also you can use uh whichever you prefer but uh I uh I preferring this this is very good and easy to use so I'm using a plugin dot now dot pop-up so let's let's start so this is the application I have created for demo and I create a click on display alert it open the display alert uh I will uh this is from uh right to left because I have set as a setting another is display prompt here is a text box where user you have to input okay so I have kept the max length of 1 and the keyboard numeric so it is showing only numeric keyboard and the max length is one so it will not allow to enter another input okay another is plugin so it is customized uh pop-up you can design as you want in the pop-up so this is the pop-up and background will be transparent page okay so let's begin with the code uh this is so uh this is also using xamarin so it is same as in Germany um so the for the display alert I have used a display alert function which is provided by the Maui here is a title and then the message okay uh okay this is the title this is a message this is the two buttons and the right to left Direction so it is showing the letter right to the left Direction okay another is display prompt it will get a input from the user this is called a display prompt okay uh this is the title this is the message do you want to uh what you want to show these two are button for the confirmation and the canceling and the another is a uh um this placeholder okay so you can see that this is a placeholder this is max length and the keyboard type and the default value okay uh when I open this it will show default value of 0 okay and uh if you want this text box value in a variable so you simply have to write the way into the variable name and equal to the equal another is a plugin my pop-up for this you have to install a nugget uh you have to install nugget called plugin my pop-up okay so you after installing the Nugget you have to create a new page I can insert a Maui content page first you have to use content page then add a name space here okay so whatever you give the name here will be used and colon than the best pop-up page for example I am using pop-up so it is showing error when I replace the name it will it will directly show the best pop-up page in intelligence so first you have to create a namespace or with the help of namespace you can create a parent grab parent external tag okay this is a is close background clip okay so what this is mean when I click here and here it is not closing when it is true when I click anywhere outside the dialog box it will close the dialog box if you want this type of action then set this value as a true this is the a horizontal field yeah so it is taking a full uh full area in the horizontal okay and the padding 20s is the padding 10 okay ah after that you have to use you have to write the uh you have to create a design okay so design whatever you want you can put a text box or image or a button and the same you have to code like if you are quoting in Maui and another thing it should be not inherited from the content page it should be inherited from the best pop-up page okay now how to open this uh this plugin pop-up to open this plugin pop-up I'll write this code pop-up action dot display pop-up and new boy and and the new and the name of the uh page okay and for closing the dialog box you have to use pop-up Dot close up pop-up so uh this is the uh this is the way you can create a pop-up uh by using a default method if you want to show only a message then you can use display alert if you want to get input only one input from the user you can use this platform or you can if you want customized dialog then you can use a plugin okay all code is written in this block you can go through this block I have explained each and every detail okay each and every parameter I have explained here so you can go through this block and uh and I hope you understand this pop-up video and if you have any question then please ask me in the comment section okay thank you bye

Channel: Kirti Yadav

Views: 771

Keywords: UIDesign, Design, UI, xamarin, csharp, tutorial, xamarin form, xamarin developer, csharpdeveloper, csharpdotnet, mobile developer, mobile, t mobile, learning, maui, popup, dialog

Id: Cxr0jDXij_w

Length: 8min 53sec (533 seconds)

Published: Tue May 30 2023