Search code examples
xamlxamarinxamarin.forms

How to reduce space between content in Flex layout, if content is placed in row direction?

My questions are:

  1. How to reduce space between two rows?
  2. How to reduce space between items, if number of items are less than privous row items?

My xaml code:

 <FlexLayout Wrap="Wrap" AlignItems="Start" Direction="Row" JustifyContent="SpaceAround"  HorizontalOptions="StartAndExpand">
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
</FlexLayout>

Output:
enter image description here

What I want is:
enter image description here

Solution

  • I ran into this issue and eventually I found out the reason.

    The reason why it will look like this is that the flex layout will expand itself to the maximum in default like what a Grid does, regardless of the children.

    The spacing is based on the area left after allocating all the children. You got a lot of area left vertically so the space between rows got larger. If you use Xamarin.UWP or Xamarin.WPF and resize the app window you can see the space between rows is changing.

    So, HorizontalOptions="StartAndExpand" is unnecessary.

    Add VerticalOptions="Start" to the flex layout (Or sometimes if you wrap the flex layout inside another auto-expand control like ScrollView, then add this to the parent ScrollView) and the problem is solved, at least in my case.

    When it comes to the third line, I just added JustifyContent="Start" AlignItems="Start".

    Edit: Apply Margin property to each item, to get space between items.