CODEWITHSUNDEEP
c#windowsmaui
thutek
thutek

Reputation: 73

.NET MAUI display a popup from a popup

I'm trying to use the community toolkit to display a popup from another Popup. From what I can tell, popups can only be displayed from a Page (which you can't convert a Popup to as far as I can tell). Does anyone know of a way to display a Popup or modal dialog from a popup? If anyone has an alternative solution I'm open to any suggestions as well.

I've tried to create an explicit operator to convert a Popup to a Page for the ShowPopupAsync method but I don't fully understand what I'm doing and it doesn't work.

Upvotes: 2

Views: 5297

Answers (2)

thutek
thutek

Reputation: 73

After some searching I have found an answer that doesn't involve the community toolkit. Mopups (a spiritual successor of RgPopup) allows you to display a popup from another popup. https://github.com/LuckyDucko/Mopups

I found out about Mopups from Gerald Versluis's Youtube channel. Here's his video on Mopups: https://www.youtube.com/watch?v=OGWhgASmSto&ab_channel=GeraldVersluis

.xaml file:

    <?xml version="1.0" encoding="utf-8" ?>
<mopups:PopupPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mopups="clr-namespace:Mopups.Pages;assembly=Mopups"
             x:Class="mopupsTest.MopupPopup1"
             Title="MopupPopup1"
                  BackgroundColor="#80000000">
    <VerticalStackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
        <Label 
            Text="This Is A Popup Page"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        <Button Text="Open New Popup"
                Clicked="Button_Clicked"/>
    </VerticalStackLayout>
</mopups:PopupPage>

xaml.cs file:

    using Mopups.Services;

namespace mopupsTest;

public partial class MopupPopup1
{
    public MopupPopup1()
    {
        InitializeComponent();
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        MopupService.Instance.PushAsync(new MopupPopup2());
    }
}

With the code above I'm able to launch a second popup page (MopupPopup2) from my first popup page (MopupPopup1).

Upvotes: 3

Jessie Zhang -MSFT
Jessie Zhang -MSFT

Reputation: 13879

You can use Popup to simulate the first popup and add another popup on the first one.

Please refer to the following code:

private void Button_Clicked(object sender, EventArgs e) 
{  //pop up the first Popup
    var popup = new SimplePopup();

    this.ShowPopup(popup);
}

SimplePopup.xaml.cs

public partial class SimplePopup : Popup 
{
      public SimplePopup()
      {
            InitializeComponent();
      }

 // pop up the second one   
      private async  void Button_Clicked(object sender, EventArgs e)
      {
        CancellationTokenSource cancellationTokenSource = new CancellationTokenSource();

        string text = "This is a Toast";
        ToastDuration duration = ToastDuration.Short;
        double fontSize = 14;

        var toast = Toast.Make(text, duration, fontSize);

        await toast.Show(cancellationTokenSource.Token);
    }
}

SimplePopup.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"
             x:Class="MauiPickerApp1121.SimplePopup"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
            >
    <VerticalStackLayout Padding="10">
        <Label Text="This is a test message!" />

        <Button  Text="inner pop up"  Clicked="Button_Clicked"  Margin="20"/>
    </VerticalStackLayout>
</toolkit:Popup>

Upvotes: 0

Related Questions