Popup: new OverlayColor property.

[ArmandoJR008]

As per this discussion #824, that was closed a long time ago, I see value in being able to change the color of the shown overlay when a Popup appears. Here an example of the "overlay":

No popup:

Popup shown:

What I mean by "overlay" is the white tinge that appears all over the screen.

The reason why I'd want this feature is that I'd been trying to create a "Context menu" for a MAUI mobile focused App, that opens up when I click a button. As shown here, when I click the 3 dotted button:

The best native implementation I've found for this is to create a Popup with a transparent color property (I'm not allowed to create Hybrid implementations for this particular project). For some reason this works like I want when testing in Android API 34 Platform Version, but when I test in API 31 or lower versions (haven't tried exactly all versions) it does create the "overlay tinge". As shown here:

Because of this I've had to try other implementations that don't use the CommunityToolkit.Maui Popup object, which is what I'd prefer to use.

As a side note if anyone knows of a good way to implement the controler I've described, I'd appreciate tips on that. Thanks.

[ArmandoJR008]

I learned how to do it (at least for Android).

If anyone needs to do this aswell, I created a custom handler so it would remove the "Overlay", which I now know is actually called Dim.

public class CustomPopupHandler : PopupHandler
{
    public CustomPopupHandler() : base()
    {            
    }
    protected override MauiPopup CreatePlatformElement()
    {

        var popup = base.CreatePlatformElement();
        popup.Window?.SetDimAmount(0);

        return popup;
    }
}

This has completely removed any Dim from any popups for all Android versions.

[RuddyOne]

I am surprised this wasn't done when the control was created.

I am trying to change the background color of the overlay for popups on Windows at the moment because it based it on the Windows theme color? I think.

So I have a popup that has a white background (due to company branding) and now it clashes with the overlay. Any workarounds for Windows? I have tried forcing the the app to dark mode but seems to make no difference.

[CliffAgius]

not sure if this is being looked at @bijington can advise.

[bijington]

I've not looked at it to be honest. I can't tell if the original post is suggesting it is a bug due to inconsistencies across different Android versions or it is a feature request?

[ArmandoJR008]

Hi. The intent of the post is to propose a new feature. I do see it as an inconsistency, but rather than normalizing one solution, I'd prefer if we were able to set any Overlay color for a given Popup.

For example, If I'd want it to be Dark but a bit transparent for a certain popup, I'd just use an RGBA tint of Gray that has a little transparency, but If I want a Light Color, I'd take that same Gray and increase the transparency value.

Also, I could for example not use transparency at all and use a solid gray, or a blue tint, or a green solid, on the same application with multiple different popups, without the need of creating multiple handlers just to change color.

[RuddyOne]

Agreed. I think this should be worked on, it adds so much for so little. :)

[bijington]

Would either of you be willing to work on this?

[ArmandoJR008]

I'd love to but as far as I've tried I haven't been able to come up with a proper solution.

[stephenquan]

You can take full control of the screen with:

• Popup.HorizontalOptions="Fill"
• Popup.VerticalOptions="Fill"
• Popup.Color="Transparent"

Then, you can control/tinge the color of the entire screen and size your content at the center of the screen:

<toolkit:Popup HorizontalOptions="Fill" VerticalOptions="Fill" Color="Transparent">
    <Grid>
        <BoxView x:Name="tinge" BackgroundColor="SkyBlue" Opacity="0.1" />
        <Grid Width="200" Height="200">
            <!-- Your content here -->
        </Grid>
    </Grid>
</toolkit:Popup>

[ArmandoJR008]

I love this and I think it's great.

However I'm using dynamic positioning to render the popup, and I believe that this nullifies the conventional use of the "Anchor" property that renders my popup closest to a given View.

I particularly enjoy using this method because it allows me to render popups near objects within a CollectionView, where their positions are dynamic.

If there were a way to implement anchoring to the grid with the content, as you've created, it would solve the issue. But as far as I've tried, I haven't found an elegant way to render the popup in a dynamic position without relying on the Anchor property.

Thank you kindly.