Xamarin.Forms - Custom size modal

Question

I'm new to Xamarin.Forms and I'm showing a page as a modal by using:

await Navigator.PushModalAsync(modalPage);

Modal.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="SandboxApp.Modal"
    xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
    ios:Page.ModalPresentationStyle="FullScreen">

    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">            
                <Label Text="This will have some data"></Label>
                <Button x:Name="closeModal" Text="Close modal" VerticalOptions="Start" HorizontalOptions="FillAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

I understand you can set the modal size to things like:

• FormSheet
• FullScreen
• OverFullScreen

etc

But is it possible to set the size of a modal page to a custom size?

Ideally, I'd like it to be almost full screen but with a bit of a gap around the modal so you can still see the page underneath if that makes sense?

Answer 1

Maybe a solution to make it work. BackgroundColor="Transparent" and work with a Frame in a Grid with a Margin

In this example i use a ListView, the Gif at the bottom to show how it looks is a bit small but you see what it looks like.

MainPage.xaml

<ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness">
        <On Platform="iOS" Value="0,40,0,0" />
    </OnPlatform>
</ContentPage.Padding>
<ContentPage.Content>
    <StackLayout>
   
        <ListView x:Name="listView" ItemSelected="OnItemSelected" />
    </StackLayout>

</ContentPage.Content>

MainPage.xaml.cs

async void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if (listView.SelectedItem != null)
            {
                var detailPage = new Page1();
                detailPage.BindingContext = e.SelectedItem as Contact;
                listView.SelectedItem = null;
                await Navigation.PushModalAsync(detailPage);
            }
        }

In Page1.xaml BackgroundColor="Transparent" and a Margin in the Grid

<ContentPage
    x:Class="ModalStackO.Page1"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    BackgroundColor="Transparent">
    <ContentPage.Content>
        <Grid Margin="5,20,0,0">
            <Frame BackgroundColor="#1975ce" CornerRadius="15" BorderColor="Black" />
            <Frame
                Margin="0,35,0,0"
                BackgroundColor="White"
                BorderColor="Black"
                CornerRadius="5"
                HeightRequest="450"
                WidthRequest="280">
                <StackLayout
                    BackgroundColor="White"
                    HeightRequest="350"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    WidthRequest="280">
                    <StackLayout Orientation="Horizontal">
                        <Label
                            FontSize="Medium"
                            HorizontalOptions="FillAndExpand"
                            Text="Name:" />
                        <Label
                            FontAttributes="Bold"
                            FontSize="Medium"
                            Text="{Binding Name}" />
                    </StackLayout>
                    <StackLayout Orientation="Horizontal">
                        <Label
                            FontSize="Medium"
                            HorizontalOptions="FillAndExpand"
                            Text="Age:" />
                        <Label
                            FontAttributes="Bold"
                            FontSize="Medium"
                            Text="{Binding Age}" />
                    </StackLayout>
                    <StackLayout Orientation="Horizontal">
                        <Label
                            FontSize="Medium"
                            HorizontalOptions="FillAndExpand"
                            Text="Occupation:" />
                        <Label
                            FontAttributes="Bold"
                            FontSize="Medium"
                            Text="{Binding Occupation}" />
                    </StackLayout>
                    <StackLayout Orientation="Horizontal">
                        <Label
                            FontSize="Medium"
                            HorizontalOptions="FillAndExpand"
                            Text="Country:" />
                        <Label
                            FontAttributes="Bold"
                            FontSize="Medium"
                            Text="{Binding Country}" />
                    </StackLayout>
                    <Button
                        x:Name="dismissButton"
                        Clicked="OnDismissButtonClicked"
                        Text="Dismiss" />
                    <Button Text="Next Page" Clicked="Button_Clicked" />
                </StackLayout>
            </Frame>

        </Grid>
    </ContentPage.Content>
</ContentPage>

Page1.xaml.cs

  async void OnDismissButtonClicked(object sender, EventArgs args)
    {
        await Navigation.PopModalAsync();
    }

    private async void Button_Clicked(object sender, EventArgs e)
    {
        var detailPage = new Page2();
     
        await Navigation.PushModalAsync(detailPage);
    }

Then in Page2.xaml BackgroundColor="Transparent" and a bit more Margin in the Grid to show Page1 also

<ContentPage
x:Class="ModalStackO.Page2"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="Transparent">
<ContentPage.Content>
    <Grid Margin="10,50,0,0">
        <Frame BackgroundColor="#1975ce" CornerRadius="15" BorderColor="Black" />
        <Frame
            Margin="0,35,0,0"
            BackgroundColor="White"
            BorderColor="Black"
            CornerRadius="5"
            HeightRequest="450"
            WidthRequest="280">
            <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            Text="Welcome to Page 2"
            VerticalOptions="CenterAndExpand" />
        <Button Text="Back" Clicked="Button_Clicked" />
    </StackLayout>
            </Frame>
        </Grid>
        
</ContentPage.Content>

Page2.xaml.cs to go back

 private async void Button_Clicked(object sender, EventArgs e)
    {
        await Navigation.PopModalAsync();
    }

Answer 2

https://github.com/rotorgames/Rg.Plugins.Popup

This is the plugin I always use to meet the UI look requirement you mentioned (padding - so I can still see the page underneath).

Answer 3

Instead recommended to use Popups you have 3 options, and all are customizable in size and animation

Free 1: https://github.com/rotorgames/Rg.Plugins.Popup

Free 2: https://learn.microsoft.com/en-us/xamarin/community-toolkit/views/popup

Pay or Community Account for Free 3: https://help.syncfusion.com/xamarin/popup/getting-started