Continued: Popup V2 does not allow any way of passing data to a popup anymore if you are not using Shell

[LeoJHarris]

Continuing discussions off the back of this issue #2693 since it was closed but feel like there is some confusion around the new V2 Popups, at least for me.

So prior to the new V2 Popups I was previously doing something like this:

popupService.ShowPopup<ProgressPopupViewModel>(onPresenting: async progressViewModel =>
 {
     // Sets a BindableProperty for the progress popup's label
     progressViewModel.ProgressText = localizationResourceManager.GetValue("LoggingInText");

     // My Long running Task here when the Progress Popup is showing

     // Closes the Popup when Task is completed above
     progressViewModel.CloseCommand.Execute(default); 
 });

Having spent time now looking at how to migrate the above to V2 Popups I don't see a way that the plugin supports it very well in the same manner as before since overload methods for ShowPopupAsync require Shell when providing shellParameters.

That being said however I've introduced a property called ProgressFunc that I would like to assigned at the time I push the popup i.e.

public partial class ProgressPopupViewModel : ObservableObject
{
    public Func<Task>? ProgressFunc;

    [ObservableProperty]
    private string _progressText = string.Empty;
}

Follows this example: https://github.com/CommunityToolkit/Maui/blob/main/samples/CommunityToolkit.Maui.Sample/Views/Popups/UpdatingPopup.xaml.cs for how I call it.

Opened += async (_, _) =>
{
    if (progressPopupViewModel.ProgressFunc is not null)
    {
        await progressPopupViewModel.ProgressFunc().ConfigureAwait(false);
    }
};

Ideally if I can set ProgressFunc at the time the Popup is pushed then I could call the Func when the Popup is opened which would behave fairly similar to how it this did in V1 Popups.

I suppose the question for me becomes, assuming I have the right approach, what will the following look like so ProgressFunc and ProgressText can be assigned at the time the Popup is showing? Since the ViewModel is not immediately available anymore like it once was:

IPopupResult popupResult = await popupService.ShowPopupAsync<ProgressPopupViewModel>().ConfigureAwait(true);

Since this is not a Shell App the IQueryAttributable is not available and V2 seems like a step backwards for apps for following MVVM patterns like our is.

Would be nice to get some further guidance on these breaking changes for use cases like ours as we try navigate around these changes. Thanks!

[stephenquan]

Because Popup inherits from View you can now set BindingContext on the Popup. e.g.

using CommunityToolkit.Maui.Extensions;
using CommunityToolkit.Maui.Markup;
using CommunityToolkit.Maui.Views;
using CommunityToolkit.Mvvm.ComponentModel;

// ...

public async Task ShowPopup()
{
    var popup = new Popup();
    popup.BindingContext = new ProgressPopupViewModel() { ProgressText = $"LoggingInText" };
    popup.BackgroundColor = Colors.Green;
    popup.Content = new VerticalStackLayout
    {
        Children =
        {
            new Label { TextColor = Colors.White }.Bind(Label.TextProperty, static (ProgressPopupViewModel ctx) => ctx.ProgressText),
            new Button { Text = "Close", Command = new Command(async () => { await popup.CloseAsync(); }) }
        }
    };
    popup.Opened += Popup_Opened;
    await this.ShowPopupAsync(popup);
}

private async void Popup_Opened(object? sender, EventArgs e)
{
    await Task.Delay(1000); // simulate a progress delay
    if (sender is Popup popup && popup.BindingContext is ProgressPopupViewModel viewModel)
    {
        viewModel.ProgressText = "Opened";
    }
}

N.B. I noticed you're still using the older MVVM syntax. Check out the blog https://devblogs.microsoft.com/dotnet/announcing-the-dotnet-community-toolkit-840/ and the corresponding new syntax (which has compiled-bindings, xmldoc advantages):

[ObservableProperty]
public string ProgressText { get; set; } = string.Empty;

[LeoJHarris]

Hi @stephenquan thanks for you input but I already have Popup xaml files which I would prefer reusing, although you possibly identified race condition that I am not addressing:

 popup.Opened += Popup_Opened;
 await this.ShowPopupAsync(popup);

In the mean time I made this implementation for the reason that I have quite a few places:

onPresenting: viewModel =>
{
}

so therefore wanted to retain that ideally with extension methods wrapping the underlying Popup API's

public static class PopupServiceExtensions
{
    /// <summary>
    /// DI-FRIENDLY: Shows a popup after synchronously configuring its ViewModel. The ViewModel is
    /// resolved from the service provider, fully supporting dependency injection.
    /// </summary>
    public static void ShowPopup<TViewModel>(
        this IPopupService popupService,
        INavigation navigation,
        Action<TViewModel?> onPresenting,
        PopupOptions? popupOptions = null) where TViewModel : class
    {
        if (navigation is null)
        {
            throw new ArgumentNullException(nameof(navigation));
        }

        if (onPresenting is null)
        {
            throw new ArgumentNullException(nameof(onPresenting));
        }

        // 1. Call the real service method. This triggers the DI container to create the ViewModel
        // and the hosting PopupPage, and pushes it to the navigation stack.
        popupService.ShowPopup<TViewModel>(navigation, popupOptions);

        // 2. Run the user's configuration code. We find the PopupPage that was just pushed and get
        // its BindingContext.
        // NOTE: This relies on the UI thread updating synchronously. While this generally works, it
        // can be sensitive to timing.
        Page? popupPage = navigation.ModalStack.LastOrDefault();

        ViewModelLocator.SetAutowireViewModel(popupPage, ViewModelLocatorBehavior.Forced);

        onPresenting(popupPage?.BindingContext as TViewModel);
    }

    /// <summary>
    /// DI-FRIENDLY: Shows a popup, configures its ViewModel, and asynchronously returns a result.
    /// The ViewModel is resolved from the service provider, fully supporting dependency injection.
    /// The onPresenting action is called after the underlying toolkit Popup's Opened event has fired.
    /// </summary>
    public static async Task<TResult?> ShowPopupAsync<TViewModel, TResult>(
        this IPopupService popupService,
        INavigation navigation,
        Action<TViewModel?> onPresenting,
        PopupOptions? popupOptions = null,
        CancellationToken token = default) where TViewModel : class
    {
        if (navigation is null)
        {
            throw new ArgumentNullException(nameof(navigation));
        }

        if (onPresenting is null)
        {
            throw new ArgumentNullException(nameof(onPresenting));
        }

        token.ThrowIfCancellationRequested();

        // 1. Call the real service method to initiate showing the popup.
        popupService.ShowPopup<TViewModel>(navigation, popupOptions);

        // Yield to allow the UI thread to process the popup display and update the ModalStack.
        await Task.Yield();
        token.ThrowIfCancellationRequested();

        // 2. Get the hosting Page from the ModalStack.
        Page? hostingPage = navigation.ModalStack.LastOrDefault();
        if (hostingPage == null)
        {
            // Hosting page not found, invoke onPresenting with null ViewModel as a fallback.
            onPresenting(null);
            return default;
        }

        TViewModel? viewModel = hostingPage.BindingContext as TViewModel;

        // 3. Attempt to get the actual CommunityToolkit.Maui.Views.Popup instance. Assuming the
        // IPopupService wraps the toolkit:Popup (defined in XAML) in a ContentPage.
        Popup? actualToolkitPopup = hostingPage.Parent as CommunityToolkit.Maui.Views.Popup;

        ViewModelLocator.SetAutowireViewModel(actualToolkitPopup, ViewModelLocatorBehavior.Forced);

        if (actualToolkitPopup != null)
        {
            // If the toolkit popup is found, wait for its Opened event.
            await using System.Runtime.CompilerServices.ConfiguredAsyncDisposable cancellationTokenRegistration = token.Register(() => new TaskCompletionSource<bool>(TaskCreationOptions.RunContinuationsAsynchronously).TrySetCanceled(token)).ConfigureAwait(true);

            EventHandler? openedEventHandler = (sender, args) =>
            {
                actualToolkitPopup.Opened -= null;
                if (!token.IsCancellationRequested)
                {
                    onPresenting(viewModel);
                    _ = new TaskCompletionSource<bool>(TaskCreationOptions.RunContinuationsAsynchronously).TrySetResult(true);
                }
                else
                {
                    _ = new TaskCompletionSource<bool>(TaskCreationOptions.RunContinuationsAsynchronously).TrySetCanceled(token); // Ensure TCS is cancelled if token fired before onPresenting
                }
            };

            // Check if the popup might have already opened rapidly.
            // Note: CommunityToolkit.Maui.Views.Popup does not have a public IsOpened property.
            // Subscribing is generally safe. If it already opened and the event was missed, this
            // specific TCS-based await might hang if not handled. However, given Task.Yield and
            // typical UI timings, this is less likely for 'Opened'. For robustness in extreme edge
            // cases, a timeout could be added to openedTcs.Task.
            actualToolkitPopup.Opened += openedEventHandler;

            // Ensure that if the popup is already closed or never opens, we don't hang
            // indefinitely. A Closed event handler could also be used to cancel/fail the TCS. For
            // now, relying on cancellation token and typical flow.

            try
            {
                await new TaskCompletionSource<bool>(TaskCreationOptions.RunContinuationsAsynchronously).Task.ConfigureAwait(false);
            }
            catch (OperationCanceledException)
            {
                // Ensure the handler is removed if cancellation occurred before Opened fired
                actualToolkitPopup.Opened -= openedEventHandler;
                throw; // Re-throw cancellation
            }
        }
        else
        {
            // Fallback: Toolkit popup not found, invoke onPresenting directly. This might happen if
            // the popup structure is different than assumed.
            onPresenting(viewModel);
        }

        // As per the original design, this method does not inherently return a result from the
        // popup itself.
        return default;
    }
}