c# - 使用 XAML 制作列表视图数据模板

Question

我正在尝试使用 Xamarin 中的 XAML 为我的餐厅应用程序创建一个列表视图，如下所示：

问题是我是 XAML 的新手，只能让它看起来像这样：

如果可以的话，请帮助我:)

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App_Name.View.BarPage"
             xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView" >

    <ContentPage.Content>

        <flv:FlowListView x:Name="FlowListViewHk" FlowColumnCount="{Binding ColumnCount}"
                           SeparatorVisibility="Default" HasUnevenRows="True"
                           FlowTappedBackgroundColor="Black" IsGroupingEnabled="True"
                           ItemSelected="UpdateStatus" GroupDisplayBinding="{Binding TableNumber}"
                           FlowItemTapped="UpdateStatus"
                           FlowItemsSource="{Binding Items}" FlowColumnMinWidth="220">

            <flv:FlowListView.GroupHeaderTemplate>
                <DataTemplate>
                    <ViewCell Height="40">
                        <StackLayout VerticalOptions="CenterAndExpand"
                       Padding="5"
                       BackgroundColor="Red">
                            <Label Text="{Binding TBlNo}" TextColor="Black" VerticalOptions="Center" FontSize="Large" HorizontalOptions="CenterAndExpand"/>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </flv:FlowListView.GroupHeaderTemplate>


            <flv:FlowListView.FlowColumnTemplate>
                <DataTemplate>
                    <Grid x:Name="listx">
                        <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"/>
                                <!--<Button Text="{Binding Status}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" TextColor="Black" BackgroundColor="White" Clicked="btnClicked"/>-->
                                <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>
                    </Grid>
                </DataTemplate>
            </flv:FlowListView.FlowColumnTemplate>
        </flv:FlowListView>
    </ContentPage.Content>
</ContentPage>

以上是我的 Xaml 的代码以及我如何实现我不想要的结果。

标签： c#xamlxamarin