c# - Xamarin Forms - 如何在 2 网格布局中显示产品
问题描述
我有一个产品页面,可以正确列出 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;
}
解决方案
正如 Jason 提到的,您需要将 List 替换为 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>
推荐阅读
- r - Rstudio - 导入 Excel 数据集 - 允许用户输入的源代码/功能
- javascript - 使用 splice() 删除项目
- elasticsearch - 根据 Elastic Search 中的术语查找文档中的属性进行过滤和排序
- python - 未能在 tflite 中分配张量
- vba - 在 Excel 中使用 VBA 更改粘贴到 PP 中的对象中的文本字体(PP 中的表格)
- c++ - std::unique_ptr 构造函数行为
- javascript - 如何在 Electron 应用退出时关闭 React 应用
- javascript - Material-UI 嵌套复选框选择不会将更改呈现给 DOM 中的父级
- spring-boot - 无法在jenkins中执行spring boot项目
- angular - 我可以使用 MatTable 按选定的行排序吗?