BoxView is rendered always with a black background

[holecekp]

Description

Background and BackgroundColor properties of BoxView do not work. They are ignored completely and the BoxView has always a black background instead. This has already been reported a few months ago, but the issue has been closed for inactivity (despite the fact that it got some reactions): https://github.com/dotnet/maui/issues/9292

I am reporting the same issue and I have created a repro project to make the reproduction of the bug as simple as possible: https://github.com/holecekp/MauiBoxViewBug

The repro project contains a VerticalStackLayout with a BoxView, Frame, and Rectangle.

<VerticalStackLayout Spacing="0">

   <BoxView HeightRequest="10" Background="Red" />
   <Frame HeightRequest="10" Background="Green" CornerRadius="0" />
   <Rectangle HeightRequest="10" Background="Blue" />

</VerticalStackLayout>

The result should be a red, green, and blue rectangle with the same height. You can see in the screenshots that the result is very far from what is expected. The BoxView is not red but black instead. You can see two other bugs in this very simple example: the height of the controls is incorrect (the Frame is too big on Android, and the Rectangle is too small on Windows), and the zero spacing set for the VerticalStackLayout is ignored for Windows.

Screenshot for Windows - notice the black box instead of the red one (and other bugs)

Screenshot for Android - notice the black box instead of the red one

Steps to Reproduce

1. Clone the repro project: https://github.com/holecekp/MauiBoxViewBug
2. Run it on Windows. You can see that BoxView color is broken and that it is rendered in black instead of the red color. By the way, you can see also other bugs on the same page.
3. You can run it on Android to check that it is also broken.

Link to public reproduction project repository

https://github.com/holecekp/MauiBoxViewBug

Version with bug

6.0.486 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, Windows, I was not able test on other platforms

Affected platform versions

Windows 10, Android 12 but it probably does not work anywhere

Did you find any workaround?

No. In very simple cases (like the one in the repro project), you can try Frame, or Rectangle as a replacement for BoxView, but, it might be impossible to find a workaround in more complex real-life scenarios. I have not been able to find a sufficient replacement for BoxView for my app because Frame and Rectangle have they their own positioning bugs when more complex layouts are used. When you need to use a LinearGradientBrush instead of a solid color, you can expect another differences in the three controls so I found it impossible to workaround the issue in a more complex realistic scenario.

Relevant log output

No response

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[HausBJB]

https://github.com/dotnet/maui/issues/6592#issue-1218388037

[jsuarezruiz]

Tested with current main branch and cannot reproduce the issue. However, have seen the same issue before, could anyone else test the same with the latest version to be 100% sure is already fixed?

[holecekp]

@jsuarezruiz Unfortunately, it has not fixed. I have tried it with MAUI 6.0.547 that has been released a few days ago. I have also upgraded the repro project to .NET 7 a tried it with the latest MAUI 7.0.49. Nothing changed. The color bug is still there. The other bugs that I have mentioned are still there, too.

[BioTurboNick]

~~How do I tell what version of MAUI I'm using?~~ On VS 2022 17.4.0, Targeting .Net 7.0, I'm seeing this too.

Confirmed MAUI 7.0.49

[BioTurboNick]

Workaround, thanks to reading the thread @HausBJB posted: Color works for me. BackgroundColor does not.

[holecekp]

@BioTurboNick Thank you, the workaround works. But it can be used only for a single color. It cannot be used for example for a LinearGradientBrush.

So Background and BackgroundColor does not work, but Color does. What is the difference between Color and BackgroundColor anyway? Why has MAUI two properties for exactly the same thing? This is very confusing.

[BioTurboNick]

My guess is that the default Styles.xaml dictionary, which sets Color on all BoxView objects, is silencing the BackgroundColor property. That other issue says that if Color is set, it will be used instead of BackgroundColor.

<Style TargetType="BoxView">
    <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
</Style>

EDIT: Confimed, if you delete this Styles.xaml entry or change it to BackgroundColor, BackgroundColor works again.