CODEWITHSUNDEEP
c#.netmaui
HPe
HPe

Reputation: 101

How to change the black transparent backdrop of a .NET MAUI Community Toolkit Popup?

when calling a Popup-Element from the .NET MAUI Community Toolkit with the .ShowPopup() method, the View is presented in front of a black transparent backdrop. How can I change the color of said backdrop (preferable to clear transparent)?

As far as I can tell, there are no properties of the Popup-Element itself that allows me this kind of change. My best guess is, that this behavior is controlled by iOS/Android platform code. If so, how can I implement this change?

Thank you in advance for your replies.

Upvotes: 1

Views: 2160

Answers (2)

Swarup
Swarup

Reputation: 21

If you are serching for BackgroundColor, you need to look for Color proprety Of the toolkit:Popup control

Color="Transparent"

Upvotes: 0

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10148

I believe there should have existed a property like BackgroundColor of Popup so it can allow us to easily change it. However, according to Properties, these properties are all related with the Popup rather than the backdrop area that we want to customize.

As an alternative workaround for now, you can use Mopups enabling you to create highly customizable popups inside of your .NET MAUI apps. You can easily change the color of said backdrop via BackgroundColor, I set it to #F4FAFC which is clear transparent.


<?xml version="1.0" encoding="utf-8" ?> 
<mopups:PopupPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppPopups.MyPopupPage"
             xmlns:mopups="clr-namespace:Mopups.Pages;assembly=Mopups"
                  
             BackgroundColor="#F4FAFC"

             CloseWhenBackgroundIsClicked="True"
                  
             Title="MyPopupPage">
    <VerticalStackLayout WidthRequest="250" HeightRequest="500" VerticalOptions="CenterAndExpand" BackgroundColor="Yellow">
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
    
</mopups:PopupPage>

For more details, you can refer to Popups For MAUI.

Upvotes: 1

Related Questions