Xamarin Forms - 如何在 2 网格布局中显示产品

Question

我有一个以 ListView 格式正确列出产品的产品页面，并且工作正常。

但是我想改变这一点，以便它在 2 个网格中列出产品，以便您可以在屏幕上看到更多产品。

我在网上尝试了不同的解决方案，但它总是会破坏我的布局。

我该怎么做呢？

这是我的代码：

产品页面 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="xxx.ProductPage"
             Title="Deals"
             BackgroundColor="Black">
    <ContentPage.Content>
        <StackLayout>
            <Image Source="xxxx.png" WidthRequest="600" HeightRequest="50"/>
                <ListView x:Name="productsListView"
                      HasUnevenRows="True"                       
                      VerticalOptions="FillAndExpand"
                      SeparatorVisibility="None"
                      ItemSelected="OnItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Frame HasShadow="True" Padding="20" Margin="20">
                                    <StackLayout>
                                        <Image Source="{Binding featured_src}"/>
                                        <Label x:Name="labelProductTitle" Text="{Binding title}" FontSize="Medium" />
                                        <Frame BackgroundColor="Red" Padding="5" HorizontalOptions="Center" WidthRequest="80" HeightRequest="20" CornerRadius="00">
                                            <Label WidthRequest="40" Text="{Binding price , StringFormat='${0:F2}'}" TextColor="White" HorizontalTextAlignment="Center"></Label>
                                        </Frame>
                                    </StackLayout>
                                </Frame>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

产品页面 CS

public List<Product> FinalProducts { get; set; }

        public ProductPage()
        {
            InitializeComponent();
            Task task = InitAsync();

            productsListView.ItemSelected += (object sender, SelectedItemChangedEventArgs e) =>
            {
                var foo = e.SelectedItem as Product;
                if (foo == null)
                    return;
                Navigation.PushAsync(new ProductDetailPage(foo));
            };

        }

        private async Task InitAsync()
        {
            var api = new WoocommerceAPI();
            var AllProducts = await api.GetAllProducts();
            FinalProducts = AllProducts.products.ToList();
            productsListView.ItemsSource = FinalProducts;
        }

Answer 1

您需要像 Jason 提到的那样替换 List With Collection 视图。 你应该得到这样的结果：

<CollectionView x:Name="productsListView">
<CollectionView.ItemsLayout>
    <GridItemsLayout Orientation="Vertical"
                    Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <ViewCell.View>
                <Frame HasShadow="True" Padding="20" Margin="20">
                    <StackLayout>
                        <Image Source="{Binding featured_src}"/>
                        <Label x:Name="labelProductTitle" Text="{Binding title}" FontSize="Medium" />
                        <Frame BackgroundColor="Red" Padding="5" HorizontalOptions="Center" WidthRequest="80" HeightRequest="20" CornerRadius="00">
                            <Label WidthRequest="40" Text="{Binding price , StringFormat='${0:F2}'}" TextColor="White" HorizontalTextAlignment="Center"></Label>
                        </Frame>
                    </StackLayout>
                </Frame>
            </ViewCell.View>
        </ViewCell>
    </DataTemplate>
</CollectionView.ItemTemplate>