CODEWITHSUNDEEP
xamlxamarinxamarin.forms
MShah
MShah

Reputation: 1267

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

Upvotes: 6

Views: 10714

Answers (5)

Matthew Swallow
Matthew Swallow

Reputation: 177

Might be irrelevant but I solved my issue by using a StackLayout or Grid instead where you can define the spacing width

Upvotes: -1

Jimmy Wong
Jimmy Wong

Reputation: 176

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.

Upvotes: 16

Tom_Vel
Tom_Vel

Reputation: 87

Set 

AlignContent="Start"

in FlexLayout.

By setting this property, the child elements are aligned without row space. http://tecsack.com/xamarin-forms-flex-layout/

Upvotes: 4

RandomBoy
RandomBoy

Reputation: 464

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:

  1. Direction: Row
  2. Wrap: Wrap
  3. FlowDirection: LeftToRight
  4. JustifyContent: Start
  5. 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):

enter image description here

Upvotes: 0

uprightbassfan78
uprightbassfan78

Reputation: 352

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

Upvotes: 2

Related Questions