Wrapping one of two stacked FlexLayouts

Question

I have a horizontal StackLayout that contains two FlexLayouts. The StackLayout is aligned at the top right of the screen. Now I would like the left FlexLayout (here called LeftStack, see code below) to be able to grow horizontally and once there are too many items for a single row; to wrap to a new line. I tried two things

Setting the Wrap property to Wrap but the left FlexLayout then wraps each item immediately instead of expanding the FlexLayout horizontally and I get a column of items :(
Setting Direction to RowReverse which results in all items of the left FlexLayout to vanish. Well, that is unexpected :(

How do you get the left FlexLayout to wrap once there are too may items for a single row? The first wrapped item should show up underneath the dark green BoxView. The screenshot shows what I would like to achieve (and not the result of the posted code). Any ideas how to make the left FlexLayout wrap?

)

<Grid VerticalOptions="Start">
        <StackLayout
            HorizontalOptions="End"
            Margin="0,50,0,0"
            Orientation="Horizontal"
            BackgroundColor="White">
            
            <FlexLayout x:Name="LeftStack" 
                        Direction="Row"
                        Wrap="Wrap">
                <BoxView BackgroundColor="DarkRed" WidthRequest="100" HeightRequest="60" FlexLayout.Grow="1"/>
                <BoxView BackgroundColor="DarkGray" WidthRequest="100" HeightRequest="60" FlexLayout.Grow="1"/>
            </FlexLayout>

            <FlexLayout x:Name="RightStack"
                        Direction="Row">
                <BoxView BackgroundColor="LightCoral" WidthRequest="60" HeightRequest="60" FlexLayout.Grow="1"/>
                <BoxView BackgroundColor="LightGreen" WidthRequest="60" HeightRequest="60" FlexLayout.Grow="1"/>
        </FlexLayout>
    </StackLayout>
</Grid>

Hi ,sorry for not too much understanding what your wants , could you share another image to explain the needed effect ? — Junior Jiang
@JuniorJiang-MSFT I changed my question so it get clearer what I want to achieve — Mouse On Mars

Junior Jiang Junior Jiang · Accepted Answer · 2020-07-27T08:38:25

If set WidthRequest of LeftStack , then will be able to grow horizontally . And need to remove FlexLayout.Grow of each BoxView.

...
<FlexLayout x:Name="LeftStack"
            JustifyContent="End"
            WidthRequest="300"
            Wrap="Wrap">
    <BoxView BackgroundColor="DarkRed"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="DarkGray"
                WidthRequest="100"
                HeightRequest="60"/>
    <BoxView BackgroundColor="DarkGreen"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="DarkKhaki"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="DarkMagenta"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="Firebrick"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="DarkCyan"
                WidthRequest="100"
                HeightRequest="60"/>
    <BoxView BackgroundColor="DarkSlateGray"
                WidthRequest="100"
                HeightRequest="60" />
</FlexLayout>
...

The effect :

Note : If need to make grow direction from right to left , need to set JustifyContent="End" .Otherwise , default is from left to right .

===================================Update================================

Also can use FlexLayout as root layout , then will no need to set width .

<FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="End" BackgroundColor="AntiqueWhite">

    <FlexLayout x:Name="LeftStack"
                FlexLayout.Grow="3"
                JustifyContent="End"
                Wrap="Wrap">
        <BoxView BackgroundColor="DarkRed"
                    WidthRequest="100"
                    HeightRequest="60" />
        <BoxView BackgroundColor="DarkGray"
                    WidthRequest="100"
                    HeightRequest="60"/>
        <BoxView BackgroundColor="DarkGreen"
                    WidthRequest="100"
                    HeightRequest="60" />
        <BoxView BackgroundColor="DarkKhaki"
                    WidthRequest="100"
                    HeightRequest="60" />
        <BoxView BackgroundColor="DarkMagenta"
                    WidthRequest="100"
                    HeightRequest="60" />
        <BoxView BackgroundColor="Firebrick"
                    WidthRequest="100"
                    HeightRequest="60" />
        <BoxView BackgroundColor="DarkCyan"
                    WidthRequest="100"
                    HeightRequest="60"/>
        <BoxView BackgroundColor="DarkSlateGray"
                    WidthRequest="100"
                    HeightRequest="60" />

</FlexLayout>

    <FlexLayout x:Name="RightStack" FlexLayout.Grow="1" Margin="10,0,0,0"
                Direction="Row">
        <BoxView BackgroundColor="LightCoral"
                    WidthRequest="60"
                    HeightRequest="60"
                    FlexLayout.Grow="1" />
        <BoxView BackgroundColor="LightGreen"
                    WidthRequest="60"
                    HeightRequest="60"
                    FlexLayout.Grow="1" />
    </FlexLayout>
</FlexLayout>

Now the effect :

Wrapping one of two stacked FlexLayouts

1 Answers