How to get a MAUI Community Toolkit Popup to show at app start?

Question

I'm trying to get a MAUI Community Toolkit Popup page to show after the main page of my app is fully loaded and shown. I want to show a first time setup deal, or tips.

I tried calling it under protected override void OnAppearing() but that didn't work. When I step through the code, it immediately steps out of the DisplayPopup() method after calling var result = await this.ShowPopupAsync(popup); and doesn't execute the if(result is bool boolResult) statement.

I'm pretty sure I've got everything set up correctly. I'm just trying to follow the documentation.

XAML for the popup page:

<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="MyApp.View.StartupPopup">

    <VerticalStackLayout>
        <Label Text="This is a very important message! Do you agree?" />
        <Button Text="Yes" 
                Clicked="OnYesButtonClicked" />
        <Button Text="No"
                Clicked="OnNoButtonClicked" />
    </VerticalStackLayout>

</toolkit:Popup>

Main page code:

using CommunityToolkit.Maui.Views;

namespace MyApp.View;

public partial class MyViewPage : ContentPage
{
    public MyViewPage()
    {
        InitializeComponent();
    }

    protected override void OnAppearing()
    {
        DisplayPopup();
    }

    public async Task DisplayPopup()
    {
        var popup = new StartupPopup();

        //After calling this, it just exits the method
        var result = await this.ShowPopupAsync(popup);

        if(result is bool boolResult)
        {
            if(boolResult)
            {
                // Yes was tapped
            }
            else
            {
                // No was tapped
            }
        }
    }

Popup Code:

using CommunityToolkit.Maui.Views;

namespace MyApp.View;

public partial class StartupPopup : Popup
{
    public StartupPopup()
    {
        InitializeComponent();

        bool FirstTime = false;
        bool ShowTips = true;

        if(FirstTime)
        {
            //Show initial setup
        }
        else if(ShowTips)
        {
            //Show some tips
        }
    }
    void OnYesButtonClicked(object? sender, EventArgs e) => Close(true);

    void OnNoButtonClicked(object? sender, EventArgs e) => Close(false);
}

Any ideas? When I step through the code, the main page hasn't actually shown up completely. It's still showing the splash screen. I'm wondering if that has something to do with it.

This however does work when I navigate away from, then back to, the main page.

Answer 1

You can Subscribe to Loaded event of the ContentPage and show the popup from the from the event handler.

 protected override void OnNavigatedTo(NavigatedToEventArgs args)
    {
        this.Loaded += MainPage_Loaded;
    }

    protected override void OnNavigatedFrom(NavigatedFromEventArgs args)
    {
        this.Loaded -= MainPage_Loaded;
    }

    private async void MainPage_Loaded(object sender, EventArgs e)
    {
       StartupPopup popup = new StartupPopup();
        var result=  await  this.ShowPopupAsync(popup);  
    }

UPDATE

As per the Original Poster's comment below the popup can be displayed by overriding the OnNavigatedTo method. No need to subscribe to the Loaded event.

 protected override void OnNavigatedTo(NavigatedToEventArgs args)
        {
            StartupPopup popup = new StartupPopup();
            var result=  await  this.ShowPopupAsync(popup); 
        }