CODEWITHSUNDEEP
mauimaui-community-toolkit
Mars
Mars

Reputation: 339

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

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:

Android Popup

iOS:

iOS Popup

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!

Upvotes: 3

Views: 6179

Answers (3)

Mars
Mars

Reputation: 339

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

Upvotes: 1

paketman
paketman

Reputation: 309

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

Got it working on android

Upvotes: 4

Zack
Zack

Reputation: 1629

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

Upvotes: 0

Related Questions