RC2 - The BackgroundColor of the BoxView does not work

[HausBJB]

Description

The BoxView BackgroundColor doesn't work, it always stays gray even if you add a different color to it, It happens on Android

`

<VerticalStackLayout>
    <BoxView 
        WidthRequest="200"
        HeightRequest="200"
        BackgroundColor="Blue"/>
</VerticalStackLayout>

`

Repro
Repro

Steps to Reproduce

Cloning the attached repository and running the application on both Windows and Android, the BoxView will not change the BackgroundColor and will always remain gray.

Version with bug

Release Candidate 2 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 12 API 31

Did you find any workaround?

No response

Relevant log output

No response

[XamlTest]

Verified this issue with Visual Studio Enterprise 17.3.0 Preview 1.0 [32427.455.main]. Repro on Windows and Android with above project.

[jsuarezruiz]

Cannot reproduce the issue on main branch

[HausBJB]

Hello jsuarezruiz,

well, as you can see in this ticket, I'm not alone. And that just got closed

#6443 (comment)

[HausBJB]

Hello, I found out that it is due to the VerticalStackLayout

I use the VerticalStackLayout
then I have to set Color
<VerticalStackLayout> <Entry x:Name="testEntry" Text="hallo"></Entry> <Button Text="test" Clicked="OnCounterClicked"></Button> <BoxView WidthRequest="300" HeightRequest="300" Color="Red" BackgroundColor="Aqua"> </BoxView> </VerticalStackLayout>

use StackLayout does this also work with BackgroundColor
<StackLayout> <Entry x:Name="testEntry" Text="hallo"></Entry> <Button Text="test" Clicked="OnCounterClicked"></Button> <BoxView WidthRequest="300" HeightRequest="300" BackgroundColor="Aqua"> </BoxView> </StackLayout>

use StackLayout and Color, then Color overrides BackgroundColor
<StackLayout> <Entry x:Name="testEntry" Text="hallo"></Entry> <Button Text="test" Clicked="OnCounterClicked"></Button> <BoxView WidthRequest="300" HeightRequest="300" Color="Red" BackgroundColor="Aqua"> </BoxView> </StackLayout>

[Redth]

Please try using Border and avoiding BoxView for now.

[Redth]

@PureWeen /cc

[jsuarezruiz]

@PureWeen /cc

Shane, cannot reproduce the issue:

But has been reported more than once, could you try it?

<VerticalStackLayout>
    <StackLayout>
    <Entry x:Name="testEntry1" Text="hallo"></Entry>
    <Button Text="test1" ></Button>
    <BoxView WidthRequest="300" HeightRequest="300" BackgroundColor="Aqua"></BoxView>
</StackLayout>
<StackLayout>
    <Entry x:Name="testEntry2" Text="hallo"></Entry>
    <Button Text="test2"></Button>
    <BoxView WidthRequest="300" HeightRequest="300" Color="Red" BackgroundColor="Aqua"></BoxView>
</StackLayout>
</VerticalStackLayout>

[HausBJB]

Hello
This is how it looks for me as soon as I set the Color property it works.
Background color is ignored

only for me Test1 doesn't work at all

[HausBJB]

Hello, is that correct that the color overwrites the background color in test2? it looks the same to them

[MGohil]

I switched to <Rectangle /> to get this sorted for time being.

[HausBJB]

Thanks, that's exactly what I did. Nobody here seems to care.
I've already opened a ticket twice with the same problem and the new version doesn't work again
#7448

so i gave up

[hartez]

Earlier versions of MAUI.Controls had the "box is always gray" issue, but that should be fixed (if not already in Service Release 1, then definitely in Service Release 2, which should be released in the near future).

BoxView in Xamarin.Forms was weird, because BackgroundColor and Color were effectively the same property.

The BoxView in MAUI.Controls keeps both properties for backward compatibility. The actual implementation of BoxView in MAUI.Controls is literally just a <Rectangle/> under the hood. We recommend using the Rectangle because it doesn't have the confusing extra property.

If you specify only the BackgroundColor (or Background) property, then the Fill for the Rectangle will use that color. If you specify Color, the Color property will determine the Fill for the Rectangle. In other words, Color always wins.