在 Listview 列中显示数据，而不是行的 Xamarin.Forms 中显示数据

Question

嗨，伙计们，我正在尝试使用如下图所示的列表视图以列格式显示数据。我如何在Xamarin.Forms或Xamarin.Android中实现这一目标。列显示

Answer 1

溶液：

我写了一个简单的代码来实现你图片中的布局。我使用 ：xamlGrid

<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> 

我设置了 's，让它看起来像之间有黑线。ContentPageBackgroundColor="Black"Grids

您可以通过我的代码中的控件自定义自己的布局。changing

这是：Screen Shot

Answer 2

我通过使用插件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

        }