Create PopUp in .Net MAUI

Popup in .net Maui

Please, support my blog by clicking on our sponsors ad!

Popups are an integral part of user interface design, allowing developers to convey information and interact with users in a more engaging manner. In .NET MAUI, there are three main types of popups available: DisplayAlert, DisplayPrompt, and Plugin.Maui.Popup. In this blog post, we will dive into each of these popup types, explore their functionalities, and provide code examples to demonstrate their usage.

DisplayAlert: Simple and Informative Popups

DisplayAlert is a built-in feature in .NET MAUI that provides a straightforward way to display alert popups to users. These popups typically present important messages, notifications, or warnings that require user acknowledgement. Here's an example of how to use DisplayAlert in your .NET MAUI application:

DisplayAlert("Display Alert", "Welcome to DotNet Maui", "OK","Cancel",FlowDirection.RightToLeft);

In the code above, we use the DisplayAlert method to show an alert popup.

• The first parameter is the title of the popup.
• The second parameter is the message to display.
• The third parameter is the text for the confirmation button.
• The Fourth parameter is the text to cancle the alert.
• The Fifth parameter is the to the flow direction.

DisplayPrompt: Gathering User Input with Ease

DisplayPrompt extends the popup functionality in .NET MAUI by allowing you to gather user input. This type of popup includes an input field along with confirmation and cancel buttons. It's useful for scenarios where you need to collect data from the user. Take a look at the code snippet below to see how to utilize DisplayPrompt:

string data = await DisplayPromptAsync("Display Prompt", "Welcome to DotNet Maui", "OK", "Cancel", 
			"Enter your favorite Number", 1, Keyboard.Numeric, "0");

In this example, we use the DisplayPromptAsync method to show a prompt popup.

• The first parameter is the title.
• The second parameter is the message.
• The third and fourth parameters are the confirmation and cancel button texts, respectively.
• The Fifth parameters is the placeholder text.
• The Sixth parameter is the maxlenth of the user input.
• The Seventh parameter is the Keyboard type.
• The Eight parameter is the default value.
• The method returns the input entered by the user.

Plugin.Maui.Popup: Extending Popups with Customization

Plugin.Maui.Popup is a third-party library that extends the popup capabilities in .NET MAUI, offering more customization options and flexibility. To use Plugin.Maui.Popup, you first need to install the NuGet package. Here's an example of how to create a custom popup using Plugin.Maui.Popup:

Create a custom design by using below code

  <popup:BasePopupPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PopupUI.MauiPopup"
             xmlns:popup="clr-namespace:MauiPopup.Views;assembly=MauiPopup"
                     IsCloseOnBackgroundClick="False"
             Title="MauiPopup"
                     HorizontalOptions="Fill"
                     Padding="10">
    <StackLayout BackgroundColor="White" Spacing="20" Padding="10">
        <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />

        <Label
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />
        
        <Button x:Name="btnClose" Clicked="btnClose_Clicked" Text="Close" ></Button>
    </StackLayout>
</popup:BasePopupPage>  

To call this popup use below code:

 PopupAction.DisplayPopup(new MauiPopup());  

To close this popup use below code:

 PopupAction.ClosePopup(); 

Conclusion:

In this blog post, we explored the three types of popups available in .NET MAUI: DisplayAlert, DisplayPrompt, and Plugin.Maui.Popup. Each type offers unique functionalities and can be used to enhance user interactions in your .NET MAUI applications. By understanding how to use these popups and leveraging their capabilities, you can create more engaging and user-friendly experiences. Experiment with these popups in your own projects to provide informative alerts, gather user input, and customize your popups to match your application's specific requirements.