Equivalent to “float:left” of Div in Xamarin forms

Question

Currently I have a task to create a xamarin page with multiple stacklayouts(kind of a box) and fill it up sequentially in horizontal direction once its filled the screen then remaining boxes should start fill in the next line horizontally. Exactly how Div tag in Html works with "Float:left" property. First of all, whether is it possible in Xamarin forms or not? I have tried creating a Grid with isvisible property of Grid cell to false or true, but its not a solution at all for the task that I am working on.

Layout should looks like below image, If I have three boxes(decided based on the objects from back end) then it should fill first row three consecutive cells, if there are 5 objects fetched then 5th object(box) should be filled in second row first cell.

Answer 1

In Xamarin there are many ways to achieve it (because it isn't supported by default):

• Use a custom ListView as FlowListView.

• Use a WrapLayout

Maybe in a future we will have a GridView such as in WPF that is exactly what you are looking for.

I hope this can help you.

Answer 2

Another option is to use a Grid :

You can replace Button Element with anything you prefer, the hight for each button is 110 and Width will automatically resize

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="110" />
                <RowDefinition Height="110" />
                <RowDefinition Height="110" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button Text="1" Grid.Row="0" Grid.Column="0" />
            <Button Text="2" Grid.Row="0" Grid.Column="1" />
            <Button Text="3" Grid.Row="0" Grid.Column="2" />
            <Button Text="4" Grid.Row="1" Grid.Column="0" />
            <Button Text="5" Grid.Row="1" Grid.Column="1" />
            <Button Text="6" Grid.Row="1" Grid.Column="2" />
            <Button Text="6" Grid.Row="2" Grid.Column="0" />
            <Button Text="6" Grid.Row="2" Grid.Column="1" />
            <Button Text="6" Grid.Row="2" Grid.Column="2" />
        </Grid>

Answer 3

Use a flexlayout - checkout the flexlayoutdemo app from xamarin