I have been trying to create different kind of pop-ups to test how everything is working. I have went through documentation (

I have tried to create custom layout this way, but there are many open questions how to template it to look as default one. Maybe there is a better way to do it?

NewAppointment.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="App.Controls.Popups.NewAppointmentPage"
             Title="NewAppointmentPage">
  <ContentPage.Content>
    <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
      <Frame VerticalOptions="Center" CornerRadius="20" BackgroundColor="White">
        <StackLayout Padding="50,50,50,50">
          <ContentView x:Name="ContentView"/>
          <StackLayout Orientation="Horizontal">
            <Button Text="Confirm"></Button>
            <Button Text="Cancel"></Button>
          </StackLayout>
        </StackLayout>
      </Frame>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

NewAppointment.xaml.cs:

using System.Windows.Input;

namespace App.Controls.Popups;

public partial class NewAppointmentPage : ContentPage
{
  public NewAppointmentPage()
  {
    InitializeComponent();
    this.BackgroundColor = Color.FromArgb("#80000000");
  }

  public static readonly BindableProperty PopupContentProperty = BindableProperty.Create(
      propertyName: nameof(PopupContent),
      returnType: typeof(View),
      declaringType: typeof(NewAppointmentPage),
      defaultValue: null,
      defaultBindingMode: BindingMode.OneWay,
      propertyChanged: PopupContentPropertyChanged);

  private static void PopupContentPropertyChanged(BindableObject bindable, object oldValue, object newValue)
  {
    NewAppointmentPage controls = (NewAppointmentPage)bindable;
    if (newValue != null)
      controls.ContentView.Content = (View)newValue;
  }

  private bool IsVisible;

  public View PopupContent
  {
    get => (View)GetValue(PopupContentProperty);
    set { SetValue(PopupContentProperty, value); }
  }

  public ICommand PopModelCommand => new Command(async () =>
  {
    await App.Current.MainPage.Navigation.PopModalAsync();
  });
}

Then in HomeViewModel.cs:

private async void AddNewRecord()
{
  await App.Current.MainPage.Navigation.PushModalAsync(new NewAppointmentPage());
}

CodePudding user response：

Custom popups are not supported out of the box from MAUI, but you can use the Popup from MAUI community toolkit package which is using native platforms popup, lot of options are already implemented.

CodePudding user response：

Using MAUI community toolkit you can create "custom popups"

Here is an example (Pago_OK.xaml):

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="AppRipsaPagosMAUI.Pages.Helpers.Pago_OK"
             CanBeDismissedByTappingOutsideOfPopup ="False">
    <VerticalStackLayout>
        <Label 
            Text="Payment finished"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        <Label 
            Text="Insert your mail to get a ticket"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        <Entry Placeholder="Insert your Mail"
               x:Name="entryEmail" />
        <Button ImageSource="mail.png"
                Clicked="OnEmailButtonClicked" /> 
        <Button Text="Finalizar" 
                Clicked="OnYesButtonClicked" />
    </VerticalStackLayout>
</toolkit:Popup>

Pago_OK.xaml.cs

public partial class Pago_OK 
{
    

    public Pago_OK(DataToSend dataToSend)
    {
        InitializeComponent();
        /*some logic*/
        _pagosService = new PagosService(new HttpClient());     
    }

    async void OnEmailButtonClicked(object? sender, EventArgs e)
    {
        if (_cls_DevolucionPagos != null)
        {
            if (Email.Default.IsComposeSupported)
            {
                string recipient = entryEmail.Text;

                await _pagosService.SendEmail();
            }
        }     
        this.Close();
        await Shell.Current.Navigation.PopToRootAsync();
    }

    async void OnYesButtonClicked(object? sender, EventArgs e) => await Shell.Current.Navigation.PopToRootAsync();

}

And you call the popup like this:

await Shell.Current.ShowPopupAsync(new Pago_OK(dataToSend));

Remember that you can have a PopupViewModel inside it, and you can edit the popup as a custom page. Hope it helps!