Add Transparent Background Color to Popup Page for MAUI using Community Toolkit in iOS

Question

I started working with .NET MAUI. Installed Community Toolkit to display Popup. Popup UI doesn't show transparent background color in iOS where as in Android it works perfectly fine.

Android:

iOS:

Added XAML File for Popup: Popup:

<?xml version="1.0" encoding="utf-8" ?>
<mct:Popup
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="testpopup.PopupPage"
             xmlns:mct="clr-namespace:CommunityToolkit.Maui.Views;assembly=CommunityToolkit.Maui"
             >
    <VerticalStackLayout BackgroundColor="Transparent">
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</mct:Popup>

I just modified the button on MainPage to display the popup:

private void OnCounterClicked(object sender, EventArgs e)
    {
        this.ShowPopup(new PopupPage());
    }

Any help is appreciated!

Can you also add `BackgroundColor="Transparent"` to the Popup itself? In the top few lines, near `x:Class`? If that doesn't help (or is rejected by compiler as invalid property), then its probably a bug. Add issue at https://github.com/CommunityToolkit/Maui/issues. I also notice that the text is not centering vertically, which seems like another bug. — ToolmakerSteve, Nov 17 '22 at 20:22

score 1 · Answer 1 · answered Jan 04 '23 at 15:04

1

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit" Color="Transparent"

Got it working on android

answered Jan 04 '23 at 15:04

paketman

169
1
3

score 1 · Accepted Answer · answered Jan 26 '23 at 17:34

1

This issue has been resolved in latest version of CommunityToolkit.Maui 4.0.0

answered Jan 26 '23 at 17:34

Mars

269
1
3
22

score 0 · Answer 3 · answered Nov 18 '22 at 03:16

There is the same problem in GitHub issue, and as the answerer said, this is normal behavior for iOS. In iOS, the hierarchy is managed by the view controller. Each page has a separate view controller. A page consists of a window, a root view, and a subview. You cannot see the layout of the previous page by setting the background color to be transparent.

For more details, you can refer to the following documents:

User interface | Microsoft

The View Controller Hierarchy | Apple

Add Transparent Background Color to Popup Page for MAUI using Community Toolkit in iOS

3 Answers3