C# Xamarin表单-如何在2个网格布局中显示产品

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

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

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

我该怎么做

这是我的密码：

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

ProductPage 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;
        }

公共列表最终产品{get；set；}
公共产品页（）
{
初始化组件（）；
任务Task=InitAsync（）；
productsListView.ItemSelected+=（对象发送者，SelectedItemChangedEventArgs e）=>
{
var foo=e.选择editem作为产品；
if（foo==null）
返回；
PushAsync（新产品详细信息页面（foo））；
};
}
专用异步任务InitAsync（）
{
var api=新的WoocommerceAPI（）；
var AllProducts=await api.GetAllProducts（）；
FinalProducts=AllProducts.products.ToList（）；
productsListView.ItemsSource=最终产品；
}

如Jason所述，您需要将列表替换为集合视图。 你应该以这样的方式结束：

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

CollectionView就可以了this@Khoa您好，如果问题已经解决，记得在有时间时标记答案，这将帮助其他有类似问题的人。Thank@Demon当前的“productListView.ItemSelected”还有其他选择吗要处理在“收藏”视图中单击项目的操作？选择更改不确定您要查找的备选方案应描述您需要了解的有关在“收藏”视图中选择的所有信息@Jason还提到了简单的解决方案（链接中也提到）。