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

Question

My questions are:
How to reduce space between two rows?
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:
What I want is:

Answer 1

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.

Answer 2

Set
AlignContent="Start"
in FlexLayout.
By setting this property, the child elements are aligned without row space.
http://tecsack.com/xamarin-forms-flex-layout/

Answer 3

I've never used FlexLayout in Xamarin, but from my HTML/CSS days I would suggest that your issue is with JustifyContent="SpaceAround". Try to change SpaceAround to FlexStart

Answer 4

By default FlexLayout doesn't have RowSpacing or other parameter. What you need to do is define column nubers eg. 4, then dived your FlexLayout width by your column number and programmatically add elements to your FlexLayout. You can use OnSizeChanged event to do that and start adding child items to FlexLayout. Then you should set:
Direction: Row
Wrap: Wrap
FlowDirection: LeftToRight
JustifyContent: Start
AlignItems: Start
Some Example of code could be:
private void FlexGallery_SizeChanged(object sender, EventArgs e)
{
//imageDimension = Math.Round(FlexGallery.Width / 4) ..round it with desired method
foreach (var it in documents.OrderBy(a => a.DateCreated))
{
if (Path.GetExtension(it.Url) == ".png" || Path.GetExtension(it.Url) == ".jpg")
{
Image img = new Image
{
HeightRequest = imageDimension,
WidthRequest = imageDimension,
Margin = new Thickness(5, 5, 5, 5),
Source = ImageSource.FromUri(new Uri(it.Url))
};
FlexGallery.Children.Add(img);
}
else
{
}
}
}
Where imageDimension is your FlexLayout divided by desired numbers of columns, and rounded with Math.Round.
Approach by adding it programmatically is different from approach where number of items is alerady known and defined in xaml.
This approach is only for items with scale factor 1:1 .
You should get something like this (this is tabbed view so ignore white line at center):