FlexLayout.Grow="1" not respecting Frame WidthRequest for Frames with images inside them.

[mikeysouthwell]

Description

Example:

<FlexLayout     x:Name="TopNavigationLayout" 
                         Direction="Row" 
                        JustifyContent="SpaceBetween" 
                        Wrap="NoWrap" BackgroundColor="Green" Margin="24,24,24,12">

     <Frame  x:Name="LogoFrame" 
                   HeightRequest="48" 
                   WidthRequest="120" 
                   BackgroundColor="Red">

          <Image  Source="logo.png" HeightRequest="24" WidthRequest="120" \>

     </Frame>

     <Frame FlexLayout.Grow="1" 
                  BackgroundColor="Transparent" 
                  BorderColor="Transparent" />

     <FlexLayout	Direction="Row" 
                                FlexLayout.Grow="1">


          <Frame  x:Name="SearchIconFrame" 
                        HeightRequest="48" 
                        WidthRequest="48" 
                       BackgroundColor="Red">

               <Image  Source="search_icon.png" 
                              HeightRequest="24" 
                              WidthRequest="24" />

         </Frame>

          <Frame  x:Name="ImageIconFrame" 
                        HeightRequest="48" 
                        WidthRequest="48" 
                        BackgroundColor="Yellow">

               <Image  Source="image_icon.png" 
                             HeightRequest="24" 
                             WidthRequest="24" />

         </Frame>

          <Frame  x:Name="NotificationsIconFrame" 
                        HeightRequest="48" 
                        WidthRequest="48" 
                        BackgroundColor="Blue">

               <Image  Source="notifications_icon.png" 
                             HeightRequest="24" 
                             WidthRequest="24" />

         </Frame>

     </FlexLayout>

</FlexLayout>

Steps to Reproduce

I've blurred out the logo, but it doesn't matter as the issue is with the icons on the right.

Each of the Frames is aligned with the icon to its left, rather than the frame around the icon.

The icon images are set to 24 height and 24 width and the frames are set to 48 height and 48 width. FlexLayout.Grow=1 should align each of the frames inside the FlexLayout with each other, not align each of the frames with the image (icon) inside the frame next to it.

Unless I'm doing it wrong?

The only way I have seen to fix this is by using FlexLayout.Basis="144"
Which is 48x3=144, but I don't want to have to manually enter a fixed width for the FlexLayout. I want it to "hug" the contents, like an Auto Layout in Figma.

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

Affected platform versions

Android 34.0.43

Did you find any workaround?

No response

Relevant log output

No response

[ghost]

Hi @mikeysouthwell. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

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.

[PureWeen]

Does it work if you use Border instead?

[mikeysouthwell]

MSFTBOT there is a sample of code above in the original post description that you can use to reproduce the issue.

[mikeysouthwell]

Does it work if you use Border instead?

@PureWeen same issue using Border instead of Frame unfortunately :(

[mikeysouthwell]

This issue is still tagged as "needs repro". I have the code required to reproduce the issue in the post. Please let me know if you are unable to reproduce this.

[RoiChen001]

Can repro this issue at Android platform on the latest 17.10 Preview 7(8.0.3&8.0.21).