CODEWITHSUNDEEP
iosuser-interfacexamarin.forms
Ali123
Ali123

Reputation: 797

FlexLayout on Xamarin forms, not filled items behaviour?

I have created a simple page with Flexlayout. As expected, the items are spaced evenly in each row but not equally in the second row if there are empty items in the row. As you can see on this image:

FlexLayout uneven item number issue

Here is the code that i used:

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.1*"/>
        <RowDefinition Height="0.8*"/>
        <RowDefinition Height="0.1*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <StackLayout Grid.Row="0">
        <Label Text="Header Stacklayout Label" HorizontalOptions="Center"/>
    </StackLayout>
    <ScrollView  Grid.Row="1" HorizontalOptions="Start" VerticalOptions="Start">
        <FlexLayout Direction="Row" AlignItems="Start" JustifyContent="SpaceEvenly" Wrap="Wrap" >
            <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
            <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
            <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
            <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
            <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>

        </FlexLayout>
    </ScrollView>
    <StackLayout Grid.Row="2">
        <Label Text="Footer Stacklayout Label" HorizontalOptions="Center"/>
    </StackLayout>
</Grid>

I am expecting the expecting the items to be spaced evenly but also equally between all rows. The last 2 items should be aligned to the left and one empty space for an item should be at the end. I believe this is how it's implemented in Bootstrap and similar systems.

Upvotes: 1

Views: 860

Answers (1)

Lucas Zhang
Lucas Zhang

Reputation: 18861

If you want to achieve the view like following screenshot enter image description here

Just set the value of JustifyContent as Start

<FlexLayout Direction="Row" AlignItems="Start" JustifyContent="Start" Wrap="Wrap" >
  <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
  <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
  <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
  <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
  <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
</FlexLayout>

For more detail about JustifyContent you can access here

Upvotes: 1

Related Questions