MAUI: Pop up page is not loading on Button click (Android Platform)

Question

I am using RGPopup.Maui-Version=1.0.2 NuGet Package to show the pop up pages on the UI and now I am facing a weird issue on a project.

When I tap on a button I need to load a pop up page but it is not loading. The same page I am able to load from another page but on a particular page I am not able to load.

I am using below code to load the pop up page:

await PopupNavigation.Instance.PushAsync(new UploadImagePopupPage("imagepath"), true);

There is no error or exception but the page it not visible on the UI.

Below is the code of my pop up page:

<pages:PopupPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:rgAnimations="clr-namespace:RGPopup.Maui.Animations;assembly=RGPopup.Maui" 
    xmlns:pages="clr-namespace:RGPopup.Maui.Pages;assembly=RGPopup.Maui"
    xmlns:local="clr-namespace:Demo"
    x:Class="Demo.Pages.UploadImagePopupPage">
    
        <StackLayout  
            Orientation="Vertical"
            Margin="10"
            BackgroundColor="White"
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand">
            
            <Label 
                x:Name="desc_label"
                Text="Enter caption"
                HorizontalOptions="CenterAndExpand"
                Margin="5"
                HorizontalTextAlignment="Center"
                FontFamily="Italic"
                TextColor="Black">
                <Label.FontSize>
                    <OnIdiom x:TypeArguments="x:Double">
                        <OnIdiom.Phone>15</OnIdiom.Phone>
                        <OnIdiom.Tablet>22</OnIdiom.Tablet>
                        <OnIdiom.Desktop>15</OnIdiom.Desktop>
                    </OnIdiom>
                </Label.FontSize>
            </Label>
            
            //other views
            
            </StackLayout>
</pages:PopupPage>

But only with a reproducible demo project we can check this issue. So I have created a demo and uploaded here for the reference.

I tried setting HeightRequest="600" and WidthRequest="400" for the popup page parent stack, but no luck.

Answer 1

Hello,

This issue is related to the RGPopup.Maui, after selecting the image from the gallery, then you cannot pop up a page. I tried with pop up a page without any other parameters. it still cannot pop up as well.

But if you do not select image from the gallery, you can pop up it successfully without any other parameters. You can report this issue in this RGPopup.Maui github repo.

You installed .NET MAUI Community Toolkit, you can use Popup directly, I tested in your demo, it is working. But you need to make some changes for your UploadImagePopupPage.

Firstly open your UploadImagePopupPage.xaml, change the popup type to toolkit:Popup.

<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="Listpm.Pages.UploadImagePopupPage">

Then, open your UploadImagePopupPage.xaml.cs, change the popup type and set the image source directly in the constructor. As note: Popup do not have onappearing method and cannot displayAlert directly.

using CommunityToolkit.Maui.Views;


namespace Listpm.Pages
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class UploadImagePopupPage : Popup
    {
        string picturepath;
        public UploadImagePopupPage(string path)
        {
            InitializeComponent();
            picturepath = path;
            popupimage.Source = ImageSource.FromFile(picturepath);
        }
     }
}

In the end, you can popup this page by this.ShowPopup.

public async void UploadButtonClicked(object sender, EventArgs e)
{
     this.ShowPopup((new UploadImagePopupPage(attachmentList[0].path)));
}

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.