[BUG] Popup V2 how to implement Anchor equally

[MayueCif]

Is there an existing issue for this?

• I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

I think upgrading Popup to V2 was a terrible experience as it didn't achieve compatibility，Too many destructive modifications

Expected Behavior

Are all the pop ups now centered? I need it to be displayed with a certain component as the anchor point

Steps To Reproduce

using v2 of Popups

Link to public reproduction project repository

a/n

Environment

- .NET MAUI CommunityToolkit: 12.0.0
- OS: windows
- .NET MAUI: 9.0.80

Anything else?

No response

[VladislavAntonyuk]

You need to get your elect absolute position and set the value to Popup location

[daltzctr]

I'm also not sure what you mean by this? What's the substitute for Anchor?

I've tried using an AbsoluteLayout as the child of my popup with limited success. This results in any buttons that are behind the popup not being interactable because the view is "masking" the page behind.

[bijington]

At the moment there isn't an alternative. At least out of the box. I've got a busy week or so but I'm happy to take a look into this following that

[stephenquan]

I attempted a TranslationX/TranslationY workaround to shift the popup to (280, 140) and that got me "nearly there" ...

var popup = new Popup();
popup.HorizontalOptions = LayoutOptions.Start;
popup.VerticalOptions = LayoutOptions.Start;
popup.TranslationX = 280;
popup.TranslationY = 140;
popup.Content = new Border
{
    Padding = new Thickness(10),
    BackgroundColor = Colors.Green,
    Content = new VerticalStackLayout
    {
        Padding = new Thickness(10),
        BackgroundColor = Colors.Orange,
        Children =
        {
            new Button { Text = "Close", Command = new Command(async () => { await popup.CloseAsync(); }) }
        }
    }
};

So, I tried harder with the help of Margins and ended with the workaround:

var popup = new Popup();
popup.HorizontalOptions = LayoutOptions.Start;
popup.VerticalOptions = LayoutOptions.Start;
popup.Margin = new Thickness(280, 140, -280, -140);
popup.Content = new Border
{
    TranslationX = -280,
    TranslationY = -140,
    Padding = new Thickness(10),
    BackgroundColor = Colors.Green,
    Content = new VerticalStackLayout
    {
        Padding = new Thickness(10),
        BackgroundColor = Colors.Orange,
        Children =
        {
            new Button { Text = "Close", Command = new Command(async () => { await popup.CloseAsync(); }) }
        }
    }
};

[MayueCif]

I think this is the wrong direction. It should provide corresponding coordinate-dependent elements like a relative layout. The original anchor is reasonable.

[daltzctr]

@stephenquan I tried this but I found that touch points (buttons, gesture recognizers, etc) retained their original non-transformed locations, which made it a non-starter.