Question

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

Answer 1

解决方案：

我编写了一个简单的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的{{1}}设置为看起来BackgroundColor="Black"之间有黑线。

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

这里是changing：

您可以参考：grid

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

        }

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

2 个答案: