Using Plugin.Maui.Popup to Create Eye-Catching Popups in Apps

Plugin.Maui.Popup is a powerful tool that allows developers to easily create and display popups in their applications. In this article, we will walk you through the process of using Plugin.Maui.Popup to display a popup in your Xamarin.Forms app.

Installing the plugin MAUI popup package

First, you will need to install the Plugin.Maui.Popup package in your project. You can do this by running the following command in your NuGet Package Manager Console.

Install-Package Plugin.Maui.Popup

Or by managing the NuGet Project.

Creating a custom popup page

Now make your own custom popup page.

<?xml version="1.0" encoding="utf-8" ?>
<mauiPopup:BasePopupPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mauiPopup="clr-namespace:MauiPopup.Views;assembly=MauiPopup"
             x:Class="CustomPickerControl.CustomControls.PickerControlView"
             Margin="10,0,10,0"
             VerticalOptions="Center"      
             Title="PickerControlView">
    <Grid Padding="15,5,15,0" x:Name="grv">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>   
        <Label Grid.Row="0" Text="Select Item" FontSize="22" FontAttributes="Bold" />
        <CollectionView Grid.Row="1" 
                         x:Name="clPickerView"
                         VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                         SelectionMode="Single"
                         SelectionChanged="clPickerView_SelectionChanged">
        </CollectionView>
    </Grid>   
</mauiPopup:BasePopupPage>

Calling the popup from the code behind

Call the popup from the code behind here I'm using the main page

private async void dropdownControl_OpenPickerEvent(object sender, EventArgs e)
{
    dropdownControl.IsLoading = true;
    // response return from api
    var items = new List<TitleValue>();
    items.Add(new TitleValue { Title = "Title 1" });
    items.Add(new TitleValue { Title = "Title 2" });
    items.Add(new TitleValue { Title = "Title 3" });
    items.Add(new TitleValue { Title = "Title 4" });
    items.Add(new TitleValue { Title = "Title 5" });
    items.Add(new TitleValue { Title = "Title 6" });
    items.Add(new TitleValue { Title = "Title 7" });
    dropdownControl.ItemSource = items;
    await Task.Delay(1000);
    dropdownControl.IsLoading = false;
    dropdownControl.IsDisplayPickerControl = true;
}

Output

Conclusion

Plugin.Maui.Popup is a versatile and easy-to-use tool for creating and displaying popups in your Xamarin.Forms app. With its customizable options and smooth animations, you can enhance the user experience of your app by adding popups to important messages or prompts.