maui
maui copied to clipboard
dotnet
Nested FlexLayouts don't show BackgroundColor
Description
If I have FlexLayouts inside each other, none of the child FlexLayouts show their background colors. Only the parent FlexLayout works.
I am using the following versions:
Installed Workload Id Manifest Version Installation Source
maui-windows 8.0.3/8.0.100 VS 17.8.34525.116 maccatalyst 17.2.8004/8.0.100 VS 17.8.34525.116 android 34.0.43/8.0.100 VS 17.8.34525.116 ios 17.2.8004/8.0.100 VS 17.8.34525.116
Steps to Reproduce
<FlexLayout Direction="Row" BackgroundColor="Black" HeightRequest="48" AlignItems="Start" JustifyContent="Start" HorizontalOptions="Start" VerticalOptions="Start">
<!-- Child FlexLayout on the left with a 24x24 pixel Rectangle inside -->
<FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Start" BackgroundColor="LightBlue" FlexLayout.Basis="48" FlexLayout.Grow="1" Margin="6,0,0,0">
<Rectangle WidthRequest="24" HeightRequest="24" Fill="Blue" />
</FlexLayout>
<!-- Child FlexLayout on the right with 3 FlexLayouts inside it -->
<FlexLayout Direction="Row" VerticalOptions="Start" AlignItems="Start" JustifyContent="SpaceBetween" BackgroundColor="Grey" FlexLayout.Basis="144">
<!-- Each of these FlexLayouts has a 24x24 pixel Rectangle inside -->
<FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Center" BackgroundColor="Pink" FlexLayout.Basis="48">
<Rectangle WidthRequest="24" HeightRequest="24" Fill="Red" />
</FlexLayout>
<FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Center" BackgroundColor="LightGreen" FlexLayout.Basis="48">
<Rectangle WidthRequest="24" HeightRequest="24" Fill="Green" />
</FlexLayout>
<FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Center" BackgroundColor="LightYellow" FlexLayout.Basis="48">
<Rectangle WidthRequest="24" HeightRequest="24" Fill="Yellow" />
</FlexLayout>
</FlexLayout>
</FlexLayout>
Link to public reproduction project repository
No response
Version with bug
8.0.3
Is this a regression from previous behavior?
Not sure, did not test other versions
Last version that worked well
Unknown/Other
Affected platforms
Android, I was not able test on other platforms
Affected platform versions
Android 34.0.43
Did you find any workaround?
No response
Relevant log output
No response
Verified this on VS 17.10.0 Preview 2.0(8.0.7). Repro on Windows 11, Android 14.0-API34, iOS 17.2 and MacCatalyst with below Project: MauiApp8.zip
Any update on this? Without backgrounds working it makes FlexLayout pretty useless. This is holding up our migration from Xamarin to MAUI. Can this please be fixed!
