Is an overlay page like this image possible with .NET MAUI?-CodePudding

You can drag it down and it will dismiss the view.

CodePudding user response：

The keyword you are looking for is "modal". Afaik these modals can be closed natively on ios by dragging (at least last time I checked.) but couldn't find a native way to do it on maui.

But here is a solution you can build up for your need:

Navigate to your page like this using Shell.

Shell.Current.GoToAsync("/modalpage");

ModalPage.xaml

<ContentPage
    x:Class="MauiApp.ModalPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Modal Page"
    BackgroundColor="Transparent"
    Shell.PresentationMode="Modal">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0">
            <Grid.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
            </Grid.GestureRecognizers>
        </Grid>

        <VerticalStackLayout Grid.Row="1" BackgroundColor="LightGray">

        <VerticalStackLayout.GestureRecognizers>
            <SwipeGestureRecognizer Direction="Down" Swiped="SwipeGestureRecognizer_Swiped" />
        </VerticalStackLayout.GestureRecognizers>

            <Label
                HorizontalOptions="Center"
                Text="Welcome to .NET MAUI!"
                VerticalOptions="Center" />
        </VerticalStackLayout>
    </Grid>

</ContentPage>

Set your ContentPage background to Transparent and Shell.PresentationMode="Modal"

I've created a grid with 2 rows, so I can catch the tap gestures on the first row, which in this case a fully transparent row where I can see my previous page.

You can do a swipe-to-close action too. But this time you are swiping the bottom layout, so the VerticalStackLayout gets the SwipeGestureRecognizer

ModalPage.cs

 private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
 {
     Shell.Current.GoToAsync("..");
 }

 private void SwipeGestureRecognizer_Swiped(object sender, SwipedEventArgs e)
 {
     Shell.Current.GoToAsync("..");
 }