แสดงข้อมูลในคอลัมน์ Listview แทน Xamarin.Forms ของแถว

วิธีแก้ปัญหา:

ฉันเขียนโค้ด xaml ง่ายๆ เพื่อให้ได้เค้าโครงในรูปภาพของคุณ ฉันใช้ 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> 

และฉันตั้งค่า ContentPage เป็น BackgroundColor="Black" เพื่อให้ดูเหมือนว่ามีเส้นสีดำอยู่ระหว่าง Grids

คุณสามารถปรับแต่งเค้าโครงของคุณเองได้ด้วย changing ส่วนควบคุมในโค้ดของฉัน

นี่คือ Screen Shot:

คุณสามารถอ้างอิง: grid

สวัสดีผู้ชายขอบคุณสำหรับทุกคำตอบ ฉันได้เค้าโครงโดยใช้ปลั๊กอิน 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

        }