Any way to get old Popup?

[emayevski]

The new popup implementation is missing the Anchor property and has other quirks that make it impossible to use as a replacement of the old popup class, and this is a huge problem for my application.

The question is - as I don't care about 30+ issues in the old popup closed with the new one, can I combine the old popup with the new version of CommunityToolkit.MAUI? Did anybody do this successfully?

[bijington]

No you can't. The new Popup is your only option. What are the quirks?

[emayevski]

The lack of Anchor is enough. There were other compiler errors, which were not immediately addressable (maybe they can be addressed, but maybe not). In any case, without an Anchor, I won't take a second look at this new popup.

[emayevski]

We have a migration guide to cover the majority of scenarios which would help with the compiler errors.

If the anchor feature is important then we do accept PRs

I read the guide. It does not explain why the old “Page.ShowPopupAsync” is suddenly not available, and frankly speaking, this is the last thing I would like to spend time on during the weekend. The guide equally does not explain what to do when the ContentView, described in XAML, is inherited from Popup (I accidentally found this information elsewhere).

As for a PR — as I am looking at 25 pull requests, I very much doubt that the effort would not be in vain.

Yes, I realize that this is open-source, "take it or leave it." It's just that I am used to caring about customers if we are to make breaking changes in our component products.

[bijington]

There's a very good chance we missed things on the guide so if there specific issues you could share then that would be helpful for the wider community.

The team works for free in their evenings and weekends to provide this toolkit so I do hope that does not come across as not caring about our 'customers'.

Contributions are always welcomed and very rarely in vain. If you have thoughts on how to achieve the anchor feature then I'd be happy to discuss it

[pictos]

If you have thoughts on how to achieve the anchor feature then I'd be happy to discuss it

Changing the PopupLayout from Grid to AbsoluteLayout would do the trick. Then it will be a matter of calculate the right position for X and Y

[stephenquan]

Wouldn't it be a matter of reading the VisualElement's Bounds property?

[pictos]

@stephenquan you can get the X and Y from Bounds property or the control itself (View exposes X, Y as properties), but to place an element using those coordinates an AbsoluteLayout is needed. Yeah, you can do TranslateX/Y but that's way harder to do because that translation is relative to initial control's position.

BTW I did a POC changing it to AbsoluteLayout and kind works. The hard part is to calculate the offset

[stephenquan]

The question is - as I don't care about 30+ issues in the old popup closed with the new one, can I combine the old popup with the new version of CommunityToolkit.MAUI? Did anybody do this successfully?

If you want to use CommunityToolkit.Maui 12.x and CommunityToolkit.Maui 11.x at the same time, I suppose you could fork the CommunityToolkit.Maui 11.x code and change the namespace, to, say, CommunityToolkit11.Maui then you should be able to use both code bases at the same time.

[bijington]

I don't think this will work because the old Popup used internals from MAUI which are exposed to CommunityToolkit.Maui, plus they are being removed in .NET 10.0 support anyway

[stephenquan]

Here is a basic PopupCompatible and PopupCompatibleExtensions class that mimics MCT v11 popup. If it's useful, I can wrap it up in a NuGet package. This may be enough to help run your existing code whilst migrating to MCT v12.

using Microsoft.Maui.Controls.Shapes;
using SQuan.Helpers.Maui.Mvvm;

public partial class PopupCompatible : ContentView
{
    [BindableProperty] public partial VisualElement? Anchor { get; set; }
    [BindableProperty] public partial Color Color { get; set; } = Colors.Transparent;
    [BindableProperty] public partial bool CanBeDismissedByTappingOutsideOfPopup { get; set; } = true;

    ContentPage? page;
    Grid? outsideOfPopupContainer;
    BoxView? scrim;
    Grid? popupContainer;
    TaskCompletionSource<object?> tcs = new();

    public async Task CloseAsync(object? result = null)
    {
        if (page is not null && page.Content is Grid pageGrid && pageGrid is not null && outsideOfPopupContainer is not null)
        {
            await pageGrid.Dispatcher.DispatchAsync(async () =>
            {
                if (popupContainer is not null)
                {
                    await popupContainer.ScaleTo(0, 100, Easing.CubicIn);
                }
                pageGrid.Remove(outsideOfPopupContainer);
                outsideOfPopupContainer = null;
            });
            tcs.SetResult(result);
        }
    }

    public async Task<object?> ShowPopupAsync(ContentPage page)
    {
        if (page.Content is not Grid pageGrid)
        {
            pageGrid = new Grid();
            if (page.Content is not null)
            {
                pageGrid.Add(page.Content);
            }
            page.Content = pageGrid;
        }
        tcs = new();
        this.page = page;
        outsideOfPopupContainer = new Grid();
        outsideOfPopupContainer.Add(scrim = new BoxView() { BackgroundColor = Colors.Black, Opacity = 0.2 });
        pageGrid.Add(outsideOfPopupContainer);
        if (CanBeDismissedByTappingOutsideOfPopup)
        {
            var outsideOfPopup = new Button()
            {
                BackgroundColor = Colors.Transparent,
                CornerRadius = 0,
                Command = new Command(async () => await CloseAsync())
            };
            outsideOfPopupContainer.Add(outsideOfPopup);
        }
        popupContainer = new Grid()
        {
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center,
        };
        popupContainer.Add(new Border()
        {
            BackgroundColor = Color,
            Stroke = Colors.LightGray,
            StrokeThickness = 1,
            StrokeShape = new RoundRectangle()
            {
                CornerRadius = 10
            }
        });
        popupContainer.Add(new ContentView() { Padding = 20, Content = this });
        popupContainer.Scale = 0;
        Task<bool> scaleToTask = popupContainer.ScaleTo(1, 100, Easing.CubicOut);
        outsideOfPopupContainer.Add(popupContainer);
        if (Anchor is VisualElement anchor && anchor is not null)
        {
            var anchorPoint = GetAbsolutePosition(anchor);
            popupContainer.HorizontalOptions = LayoutOptions.Start;
            popupContainer.VerticalOptions = LayoutOptions.Start;
            popupContainer.TranslationX = anchorPoint.X + anchor.Width / 2 - popupContainer.Width / 2;
            bool anchorAtBottom = anchorPoint.Y + anchor.Height + 10 + popupContainer.Height < page.Height;
            if (anchorAtBottom)
            {
                popupContainer.TranslationY = anchorPoint.Y + anchor.Height + 10;
            }
            else
            {
                popupContainer.TranslationY = anchorPoint.Y - 10 - popupContainer.Height;
            }
            anchor.PropertyChanged += (s, e) =>
            {
                if (e.PropertyName == nameof(VisualElement.Width))
                {
                    anchorPoint = GetAbsolutePosition(anchor);
                    popupContainer.TranslationX = anchorPoint.X + anchor.Width / 2 - popupContainer.Width / 2;
                }
            };
            popupContainer.PropertyChanged += (s, e) =>
            {
                switch (e.PropertyName)
                {
                    case nameof(PopupCompatible.Width):
                        anchorPoint = GetAbsolutePosition(anchor);
                        popupContainer.TranslationX = anchorPoint.X + anchor.Width / 2 - popupContainer.Width / 2;
                        break;
                    case nameof(PopupCompatible.Height):
                        anchorPoint = GetAbsolutePosition(anchor);
                        anchorAtBottom = anchorPoint.Y + anchor.Height + 10 + popupContainer.Height < page.Height;
                        if (anchorAtBottom)
                        {
                            popupContainer.TranslationY = anchorPoint.Y + anchor.Height + 10;
                        }
                        else
                        {
                            popupContainer.TranslationY = anchorPoint.Y - 10 - popupContainer.Height;
                        }
                        break;
                }
            };
        }
        await scaleToTask;
        return await tcs.Task;
    }

    public static Point GetAbsolutePosition(VisualElement visualElement)
    {
        var pos = new Point();
        while (visualElement is not null)
        {
            pos.X += visualElement.X;
            pos.Y += visualElement.Y;
            if (visualElement is ScrollView scrollView)
            {
                pos.X -= scrollView.ScrollX;
                pos.Y -= scrollView.ScrollY;
            }
            if (visualElement.Parent is VisualElement parent)
            {
                visualElement = parent;
                continue;
            }
            break;
        }
        return pos;
    }
}

public static class PopupCompatibleExtensions
{
    public static async Task<object?> ShowPopupAsync(this ContentPage page, PopupCompatible popup)
    {
        return await popup.ShowPopupAsync(page);
    }
}

Here's a sample usage where I can invoke the old style and new style popup in the same source:

using CommunityToolkit.Maui.Extensions;
using CommunityToolkit.Maui.Views;

public partial class MainPage : ContentPage
{
    int count = 0;

    public MainPage()
    {
        InitializeComponent();
    }

    async void OnCounterClicked(object? sender, EventArgs e)
    {
        count++;

        if (count == 1)
            CounterBtn.Text = $"Clicked {count} time";
        else
            CounterBtn.Text = $"Clicked {count} times";

        SemanticScreenReader.Announce(CounterBtn.Text);

        await Task.Delay(1);

        #region Demo of old PopupCompatible
        var oldPopup = new PopupCompatible()
        {
            Anchor = CounterBtn,
            Color = Colors.SkyBlue,
            CanBeDismissedByTappingOutsideOfPopup = true,
        };
        oldPopup.Content = new Button
        {
            Text = "Close from PopupCompatible",
            Command = new Command(async () => await oldPopup.CloseAsync("close"))
        };
        object? result = await this.ShowPopupAsync(oldPopup);
        System.Diagnostics.Debug.WriteLine($"Popup result: {result}");
        #endregion

        #region Demo of new CommunityToolkit.Maui Popup
        var newPopup = new Popup<string>()
        {
            BackgroundColor = Colors.SkyBlue,
            CanBeDismissedByTappingOutsideOfPopup = true,
        };
        newPopup.Content = new Button
        {
            Text = "Close from CommunityToolkit.Maui v 12",
            Command = new Command(async () => await newPopup.CloseAsync("close"))
        };
        var r = await this.ShowPopupAsync<string>(newPopup);
        System.Diagnostics.Debug.WriteLine($"Popup result: {r.Result} WasDismissedByTappingOutsideOfPopup={r.WasDismissedByTappingOutsideOfPopup}");
        #endregion
    }
}

Sample GitHub repo: https://github.com/stephenquan/MauiMCTMigration

[pictos]

@stephenquan your solution is really good, but it only anchor at bottom, the at old implementation you could select where you want. Also if the Window is too small what would be the behavior? Let's say that Height isn't enough to show the anchor at bottom.

[emayevski]

Here is a basic PopupCompatible and PopupCompatibleExtensions class that mimics MCT v11 popup. If it's useful, I can wrap it up in a NuGet package. This may be enough to help run your existing code whilst migrating to MCT v12.

Wonderful, thank you very much. I'll try to test it ASAP.

[emayevski]

Thank you again for the project. I have sort of incorporated it into our project. There are some open issues, about which I will post a question in your repository if I don't manage to address them.

[stephenquan]

@emayevski, thanks for testing it out.

[emayevski]

@stephenquan The popup, when anchored to a control on the right side, goes outside of the screen on the right. I suspect that the same would happen with the left side. I would probably look to fixing this myself and submitting the changes to you, but the unfortunate design discussed below in this topic makes it impossible for us to use these new popups even with your additions. We will have to look for a replacement :(.

[stephenquan]

@pictos I can't remember how the v11 anchoring actually works, but, I patched the code sample above to try to account for anchoring either top or bottom based on available space.

[stephenquan]

@emayevski, here's another solution. This effectively wraps the CommunityToolkit v12 with a v11 compatible API. You see the Anchor is provided as a dummy property (it's not wired up) so that you will not get the compiler errors. The Color property has been brought back so that you don't have to rename Color to BackgroundColor in your source files.

public partial class Popup11 : Popup<object>
{
	[BindableProperty] public partial VisualElement? Anchor { get; set; }
	[BindableProperty] public partial Color Color { get; set; } = Colors.Transparent;
	[BindableProperty] public partial bool CanBeDismissedByTappingOutsideOfPopup { get; set; } = true; // not required in MCT 12.1.0+
	public Popup11()
	{
		this.SetBinding(BackgroundColorProperty, static (Popup11 p) => p.Color, mode: BindingMode.OneWay, source: this);
	}
	public async Task<object?> ShowPopupAsync(ContentPage page)
	{
		PopupOptions popupOptions = new PopupOptions
		{
			CanBeDismissedByTappingOutsideOfPopup = CanBeDismissedByTappingOutsideOfPopup,
		};
		if (await page.ShowPopupAsync<object>(this, popupOptions) is IPopupResult<object> popupResult
				&& !popupResult.WasDismissedByTappingOutsideOfPopup
				&& popupResult.Result is object result)
		{
			return result;
		}
		return null;
	}
}
public static class Popup11Extensions
{
	public static Task<object?> ShowPopupAsync(this ContentPage page, Popup11 popup) => popup.ShowPopupAsync(page);
}

[emayevski]

One more issue with the new popup is that when it is closed, the parent page (the one from which the popup was displayed) is activated, triggering OnAppearing of that page. This means that if the popup is shown from OnAppearing (directly or indirectly), OnAppearing gets called again, leading to a loop. The problem is that a popup can be shown by some library, and the author of the code of OnAppearing won't even know about this behavior. And even knowing about it, one would have to add some quirky workarounds to all pages that do something in OnAppearing. And no need to say that the parent page does not visually disappear when the popup is shown (although it does receive a call to OnDisappearing), so this disappearing/appearing sequence is quite unnatural.

[pictos]

@emayevski yes, it will because that's how maui works today. Our popup is just a Modal Page doing a Modal Navigation. What I said is that you shouldn't add code on OnAppearing/Disappearing.

[emayevski]

@emayevski yes, it will because that's how maui works today. Our popup is just a Modal Page doing a Modal Navigation. What I said is that you shouldn't add code on OnAppearing/Disappearing.

And it's not just a modal page, but a not-so-usable modal page. And this was my original point - many scenarios don't need just a modal page; they need a popup box that is laid over (in) the current window / page. And the previous popup did this job quite well.

[pictos]

Hey @emayevski, I’m bummed to hear the new update didn’t quite hit the mark for you. But hey, just because it doesn’t work for you doesn’t mean it doesn’t work for others!

The awesome thing is that this project is open source, so you can totally jump in and add features that will make it even more useful for you and the whole community.

[emayevski]

@pictos The point is that someone has deliberately decided that existing users should burn time and resources simply because this someone didn't care.

[pictos]

@emayevski I kind of disagree with that. Everything here is built on public. The team has a Community Standup where they share the news and ideas for this project, and anyone can join in discussions. The new popup implementation started on 2024-06-14 and was merged on 2025-05-26, almost 1 year of development. So, you (and other devs) had the chance to try out and share your concerns about the new implementation even before it was merged.