Блог

У меня есть страница продукта, на которой правильно перечислены продукты в формате 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;
        }
  

Вам нужно будет заменить список на представление коллекции, как упоминал Джейсон. в итоге у вас должно получиться что-то вроде этого:

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