Xamarin.forms How can I show items next each other in a list

Question

I am currently developing an app using Xamarin.Forms with .Net standard sharing strategy. Everything is done in the shared project. (No device specifies designs).

I try to bind a list of objects to a listview. I already show/fill the list with ItemsSource="{Binding Items}" The selected item is bound to the listview as well SelectedItem="{Binding SelectedApp}" . Each listItem is visualized as a frame with an image and a title. By using a datatemplate.

What I try to achieve is make my listview look like a "Google PlayStore-like-List":

showing the items next each other. When there is horizontally no place left, the items next items will show on a next line. The list automatically adapts the items to the available with. This way, the list is better screen responsive when switching from portrait to landscape.

My question is how, can I show the list in this structure? However it would be nice, the Material design card design is not a part of this problem.

This question describe a similar my problem what I try to become. Expect I am developing a Xamarin app and not a Native (java) Android app: How to position CardViews next to each other?

Answer 1

There is a control named FlowListView (see here )

Just add the NuGet package and add the view from your XAML

<flv:FlowListView FlowColumnCount="3" FlowItemsSource="{Binding Items}">
    <flv:FlowListView.FlowColumnTemplate>
        <DataTemplate>
            <StackLayout>
                <Image Source="{Binding Image}" />
                <Label Text="{Binding Type}" />
                <Label Text="{Binding Name}" FontSize="Small" />
                <local:Rating Value="{Binding Rating}" />
            </StackLayout>
        </DataTemplate>
    </flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>

(don't forget to add flv namespace).

Of course this assumes that the items in your FlowListView have the properties Image , Type , Name and Rating . Furthermore I've assumed the existence of a control named Rating to display the rating of the service. Of course you'll have to adapt the actual code to your property names and to your needs, but basically this should do.

I have not tried the control myself, hence I don't know about scolling. You might have to wrap the FlowListView in a ScrollView , but it might as well work out of the box.

EDIT

To adapt the number of columns you can override OnSizeAllocated on your page, then determine the orientation and set the FlowColumnCount accordingly (see here and here ).

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height); // Important!

    if (width != _width || height != _height)
    {
        _width = width;
        _height = height;

        if(width > height)
        {
            FlowListView.FlowColumnCount = 4;
        }
        else
        {
            FlowListView.FlowColumnCount = 2;
        }
    }
}

This assumes that we've added x:Name="FlowListView to out FlowListView . Even better would be to calculate the number of columns based on the actual width, but I think you've got the gist.