Display data in Listview columns instead of row's Xamarin.Forms

Question

Hi guys I'm trying to display data in a column format using a listview like the picture below.How would I achieve this in Xamarin.Forms or Xamarin.Android.

Column Display

Answer 1

Solution:

I write a simple xaml code to achieve the layout in your picture. I use Grid :

<ContentPage.Content>
        <Grid x:Name="controlGrid" RowSpacing="2" ColumnSpacing="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <StackLayout Orientation="Vertical"  Grid.Row="0" Grid.Column="0" BackgroundColor="White">
                <StackLayout Orientation="Horizontal">
                    <Label Text="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand" HeightRequest="40" />
                    <Label Text="TEXT" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Blue" WidthRequest="50" HeightRequest="40"/>
                </StackLayout>
                <BoxView  BackgroundColor="Gray" VerticalOptions="FillAndExpand"/>
            </StackLayout>

            <StackLayout Orientation="Vertical"  Grid.Row="0" Grid.Column="1" BackgroundColor="White">
                <StackLayout Orientation="Horizontal">
                    <Label Text="2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand"  HeightRequest="40" />
                    <Label Text="TEXT" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Blue" WidthRequest="50" HeightRequest="40"/>
                </StackLayout>
                <BoxView   BackgroundColor="Orange" VerticalOptions="FillAndExpand" />
            </StackLayout>

            <StackLayout Orientation="Vertical"  Grid.Row="0" Grid.Column="2" BackgroundColor="White">
                <BoxView   BackgroundColor="Green"  />
                <BoxView   BackgroundColor="Pink" VerticalOptions="FillAndExpand"/>
            </StackLayout>

            <StackLayout Orientation="Vertical"  Grid.Row="0" Grid.Column="3" BackgroundColor="White">
                <BoxView   BackgroundColor="Green" />
                <BoxView   BackgroundColor="Yellow" VerticalOptions="FillAndExpand" />
            </StackLayout>


            <StackLayout Orientation="Vertical"  Grid.Row="1" Grid.Column="0" BackgroundColor="White">
                <StackLayout Orientation="Horizontal">
                    <Label Text="5" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand"  HeightRequest="40" />
                    <Label Text="TEXT" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Blue" WidthRequest="50" HeightRequest="40"/>
                </StackLayout>
                <BoxView  BackgroundColor="Gray" VerticalOptions="FillAndExpand"/>
            </StackLayout>

            <StackLayout Orientation="Vertical"  Grid.Row="1" Grid.Column="1"  BackgroundColor="White">
                <BoxView   BackgroundColor="Green" />
                <BoxView   BackgroundColor="Pink" VerticalOptions="FillAndExpand" />
            </StackLayout>

            <StackLayout Orientation="Vertical"  Grid.Row="1" Grid.Column="2" BackgroundColor="White" >
                <Label  Text="777" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Green" HeightRequest="40"/>
                <BoxView   BackgroundColor="Orange" VerticalOptions="FillAndExpand" />
            </StackLayout>

            <StackLayout Orientation="Vertical"  Grid.Row="1" Grid.Column="3" BackgroundColor="White">
                <StackLayout Orientation="Horizontal">
                    <Label Text="8" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand"  HeightRequest="40" />
                    <Label Text="TEXT" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Blue" WidthRequest="50" HeightRequest="40"/>
                </StackLayout>
                <BoxView   BackgroundColor="Gold" VerticalOptions="FillAndExpand" />
            </StackLayout>

        </Grid>
    </ContentPage.Content> 

And I set ContentPage 's BackgroundColor="Black" to make it looks like there are black lines between Grids .

You can customize your own layout by changing the controls in my codes.

Here is the Screen Shot :

You can refer: grid

Answer 2

Hi guy's thanks for all the replies. I achieved the layout by using the plugin DLToolkit.Forms.Controls.FlowListView

Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

         BackgroundColor="Black"
         xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView" >



    <ContentPage.Content>
    <flv:FlowListView x:Name="FlowListViewH" FlowColumnCount="{Binding ColumnCount}" SeparatorVisibility="Default" HasUnevenRows="True"
        FlowItemTappedCommand="{Binding ItemTappedCommand}" FlowLastTappedItem="{Binding LastTappedItem}"
        FlowItemsSource="{Binding Items}" FlowColumnMinWidth="220" >

        <flv:FlowListView.FlowColumnTemplate>
            <DataTemplate>

                <StackLayout Margin="5" BackgroundColor="Red" >
                    <Grid x:Name="controlGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="25*" />
                            <RowDefinition Height="25*" />
                            <RowDefinition Height="25*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50*" />
                            <ColumnDefinition Width="50*" />
                        </Grid.ColumnDefinitions>
                        <Label HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="Red" TextColor="Black"
                            Text="{Binding TableNumber}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" FontSize="Large"/>
                        <Label HorizontalOptions="Fill" VerticalOptions="Fill" 
                            XAlign="Center" YAlign="Center" Text="{Binding ItemName}"  Grid.Row="1" Grid.Column="0" TextColor="Black"/>
                        <Label HorizontalOptions="FillAndExpand" VerticalOptions="Fill" 
                            XAlign="Center" YAlign="Center" Text="{Binding OrderedQuantity}"  Grid.Row="1" Grid.Column="1" TextColor="Black"/>
                        <Label HorizontalOptions="FillAndExpand" VerticalOptions="Fill" 
                            XAlign="Center" YAlign="Center" Text="{Binding Status}"  Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" TextColor="Black" BackgroundColor="White"/>
                    </Grid>
                </StackLayout>
            </DataTemplate>
        </flv:FlowListView.FlowColumnTemplate>

    </flv:FlowListView>
</ContentPage.Content>

xaml.cs

public  Page ()
        {
            NavigationPage.SetHasNavigationBar(this, false); //remove nav bar
            InitializeComponent ();
            LoadOrders();//populates Observable collection
           FlowListViewH.FlowItemsSource = OrdersForKitchenPage;//sets source to Observable collection

        }