Xamarin.Forms - Custom size modal - xaml

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