maui

maui copied to clipboard

Description

Setting the background color on a contentpage to transparent initially shows correctly then changes to white for light and black for dark mode, this is working correctly on Android.

Steps to Reproduce

1. create new maui app
2. add a new content page
3. set the backgroundcolor in Xaml or C# to transparent

Version with bug

6.0.400 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

IOS 15.5

Did you find any workaround?

No

Relevant log output

No response

Android is correctly showing the contentpage behind the view

IOS is showing a black screen behind the view

I'm not really clear on what you expect to happen and what actually happens? Could you maybe elaborate a bit more or ideally create a little reproduction project and upload that to GitHub for us to look at? Thank you!

Hi @SteveJML. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

Hi , im trying to create a base popup page like you see in many IOS apps, i want the top half to be transparent so that you can still partially see the calling view. The pictures i previously uploaded didnt amplify exactly what was happening, ive attached 2 pictures, the Android picture is how i want it to look like, ive set the background colour to Transparent and this is what i expected, when i have the same view on IOS, initially the top half is transparent, then after a second or so it turns either black if i have dark mode set or white for light mode.

I created a new Maui project, i added a contentpage, created a routing to that page, then on the bot click for the counter increase im calling that content page, the results are exactly the same as my project

Here is the android picture, this is what i was expecting to see IOS, after approx 1 second the background turns black, im expecting to see part of the view underneath like the android version

Ive added the view that lies underneath so you can see what im trying to achieve.

Hope my objectives are clearer

I can verified this. on IOS, set ContentPage BackgroundColor="Transparent", the color can't be changed with the light and black for dark mode.

Trying to do the exact same thing and have the same problem on iOS.

Update:

Using the following code instead of BackgroundColor="Transparent" is working for me as a workaround.

    <ContentPage.BackgroundColor>
               <Color x:FactoryMethod="FromRgba">
                   <x:Arguments>
                       <x:Int32>0</x:Int32>
                       <x:Int32>0</x:Int32>
                       <x:Int32>0</x:Int32>
                       <x:Int32>1</x:Int32>
                   </x:Arguments>
               </Color>
    </ContentPage.BackgroundColor>

Make sure that the Value for Alpha is <x:Int32>1</x:Int32> or it behaves just like BackgroundColor="Transparent"

As of this writing setting background to Transparent on a ContentPage does not work on WinUI either. The background of the ContentPage is still white or black.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="....."
             Background="Transparent"
             >

However, setting background to transparent correctly works on macCatalyst - allowing the content that is underneath to show through.