CODEWITHSUNDEEP
xamllayoutmaui
Holunk
Holunk

Reputation: 149

Itemspacing in Maui felxlayout

My app contains a Flexlayout inside a scrollview. This flexlayout is used as a bindablelayout and contains some items. When there are enough items to fill the screen the vertical itemspacing is nicely done:

enter image description here

However, if the list gets smaller, and less items are visible, the vertical spacing becomes weird (I suspect the items want to fill out the whole available space, but I'm not sure of that):

enter image description here

I want the items to always have the same space between rows. Is this possible?

Xaml:

        <ScrollView Margin="10" Grid.Row="1" x:Name="UserActionScrollView">
            <FlexLayout x:Name="UserActionFlexLayout" BindableLayout.ItemsSource="{Binding DisplayedUserActions}" JustifyContent="Start" Wrap="Wrap" Direction="Row">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                       -- Datatemplate --
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </FlexLayout>
        </ScrollView>

Upvotes: 0

Views: 1424

Answers (1)

Liqun Shen-MSFT
Liqun Shen-MSFT

Reputation: 8055

Based on your code, the main axis is horizontal direction with multiple lines. So you could set the alignment of cross axis(vertical direction) using AlignContent.

You could set like this:

<FlexLayout x:Name="UserActionFlexLayout" ... AlignContent="Start">

By the way, i think you could use CollectionView instead for this case. You could customize the layout you want. For example, you could use ItemsLayout property:

<CollectionView ItemsSource="{Binding DisplayedUserActions}">

        <!--set 3 columns, and itemspacing for each direction-->

        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical"
                    Span="3" VerticalItemSpacing="20"  HorizontalItemSpacing="20"/>
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                ...
            </DataTemplate>
        </CollectionView.ItemTemplate>
</CollectionView>

Also, you don't have to put it in a ScrollView as CollectionView can scroll itself.

For more info, you could refer to FlexLayout and Specify CollectionView layout

Hope it works for you.

Upvotes: 1

Related Questions