How to display PopupPage In .NET MAUI / Xamarin (PushModalAsync)

 

Youtube: https://youtu.be/ZPZIn1arCTY

Create a BasePopupPage Control In Your .NET MAUI Project.

BasePopupPage: these controls have default UI and one bindable property called PopupContent that you can use on any Page. I designed BasePopupPage UI as per my requirement you can modify it as per your usage.

BasePopupPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.Controls.BasePopupPage"
             x:Name="this"
             Title="BasePopupPage" >
    <ContentPage.Content>
        <StackLayout   VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Frame VerticalOptions="EndAndExpand" CornerRadius="20" BackgroundColor="White">
                <StackLayout Padding="5,0,5,50"  >
                    <StackLayout  Padding="0,0,0,15">
                        <BoxView  BackgroundColor="LightGray" CornerRadius="5" WidthRequest="100" HeightRequest="10" />
                        <StackLayout.GestureRecognizers>
                            <SwipeGestureRecognizer  Command="{Binding Source={x:Reference this},Path=PopModelCommand}" Threshold="15" Direction="Down" />
                        </StackLayout.GestureRecognizers>
                    </StackLayout>
                    <ContentView   x:Name="ContentView"  />
                </StackLayout>
            </Frame>
            <StackLayout.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding Source={x:Reference this},Path=PopModelCommand}" />
            </StackLayout.GestureRecognizers>
        </StackLayout>
    </ContentPage.Content>
 
</ContentPage>
 

BasePopupPage.xaml.cs

using System.Windows.Input;
 
namespace MauiApp1.Controls;
 
public partial class BasePopupPage : ContentPage
{
    public BasePopupPage()
    {
        InitializeComponent();
        this.BackgroundColor = Color.FromArgb("#80000000");
    }
 
    public static  readonly BindableProperty PopupContentProperty = BindableProperty.Create(
        propertyName: nameof(PopupContent),
        returnType: typeof(View),
        declaringType: typeof(BasePopupPage),
        defaultValue: null,
        defaultBindingMode: BindingMode.OneWay,
        propertyChanged: PopupContentPropertyChanged);
 
    private static void PopupContentPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var controls = (BasePopupPage)bindable;
        if (newValue != null)
            controls.ContentView.Content = (View)newValue;
    }
 
    public  View PopupContent
    {
        get => (View)GetValue(PopupContentProperty);
        set { SetValue(PopupContentProperty, value); }
    }
 
    public ICommand PopModelCommand => new Command(async() =>
    {
        await App.Current.MainPage.Navigation.PopModalAsync();
    });
}

How To Use BasePopupPage.

PopupPage1.xaml

<?xml version="1.0" encoding="utf-8" ?>
<controls:BasePopupPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:controls="clr-namespace:MauiApp1.Controls"
    x:Class="MauiApp1.Views.PopupPage1">
    <controls:BasePopupPage.PopupContent>
        <StackLayout Spacing="15">
                <Label Text="Select An Option" FontSize="16" FontAttributes="Bold"   TextColor="Black"/>
 
                <Label Text="Navigate To Other Popup Page" >
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_NavigateToPoupPage1" />
                    </Label.GestureRecognizers>
                </Label>
                <BoxView BackgroundColor="Black" HeightRequest="1" />
                <Label Text="Navigate to Page" >
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_NavigateToNormalPage" />
                    </Label.GestureRecognizers>
                </Label>
                <BoxView BackgroundColor="Black" HeightRequest="1" />
            </StackLayout>
        </controls:BasePopupPage.PopupContent>
 </controls:BasePopupPage>
 

PopupPage.xaml.cs

using MauiApp1.Controls;
 
namespace MauiApp1.Views;
 
public partial class PopupPage1 : BasePopupPage
{
    public PopupPage1()
    {
        InitializeComponent();
    }
 
    private async void TapGestureRecognizer_Tapped_NavigateToPoupPage1(object sender, EventArgs e)
    {
        await App.Current.MainPage.Navigation.PushModalAsync(new PopupPage2());
    }
 
    private async void TapGestureRecognizer_Tapped_NavigateToNormalPage(object sender, EventArgs e)
    {
        await App.Current.MainPage.Navigation.PopModalAsync();
        await App.Current.MainPage.Navigation.PushAsync(new NewPage1());
    }
 
}

PopupPage2.xaml

<?xml version="1.0" encoding="utf-8" ?>
<controls:BasePopupPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:controls="clr-namespace:MauiApp1.Controls"
    x:Class="MauiApp1.Views.PopupPage2" >
    <controls:BasePopupPage.PopupContent>
        <StackLayout Spacing="15">
            <Label Text="Display Content Here" FontSize="16" FontAttributes="Bold"   TextColor="Black"/>
 
        </StackLayout>
    </controls:BasePopupPage.PopupContent>
</controls:BasePopupPage>
 

PopupPage2.xaml.cs

using MauiApp1.Controls;
 
namespace MauiApp1.Views;
 
public partial class PopupPage2 : BasePopupPage
{
    public PopupPage2()
    {
        InitializeComponent();
    }
}

Navigate To Main Page On App Start.

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage" Title="Main Page">
 
    <StackLayout 
            Spacing="25" 
            VerticalOptions="Center">
 
        <Button Text="Display PoupPage"
                Clicked="Button_Clicked" HorizontalOptions="Center" />
 
    </StackLayout>
 
</ContentPage>
 

MainPage.xaml.cs

using MauiApp1.Views;
 
namespace MauiApp1;
 
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
 
    private async void Button_Clicked(object sender, EventArgs e)
    {
        await App.Current.MainPage.Navigation.PushModalAsync(new PopupPage1());
    }
}