如何使用Xamarin表单选择产品时显示产品详细信息

Question

我目前正在使用Xamarin Forms构建一个移动应用程序，这是我第一次这样做。

它基本上是一个电子商务购物车，我使用REST API提取数据，它显示产品列表，然后用户可以添加到购物车中。

当用户单击列表中的产品时，我需要帮助以最佳方式显示单个产品的详细信息。

例如，当我点击产品类别时，它会显示一个产品列表。

选择产品时，如何在另一个页面上显示单个产品的详细信息？

如有任何帮助，我们将不胜感激！

这是我的productpage.xaml，它可以正确显示所有产品。

<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 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}'}" TextColor="White" HorizontalTextAlignment="Center"></Label>
</Frame>
</StackLayout>
</Frame>

</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

我只需要弄清楚如何展示单个产品。

Answer 1

当我选择产品？

首先，您的应用程序应该以NavigationPage:开始

public App()
{
InitializeComponent();
MainPage = new NavigationPage(new MainPage());
}

您可以推送到另一个具有特定产品dataModel的页面，以OnItemSelected方式显示所选产品的详细信息：

private void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
dataModel selectedProductModel = e.SelectedItem as dataModel;
Navigation.PushAsync(new ProductDetail(selectedProductModel));
}

您应该有一个ProductDetail页面来显示详细信息：

public partial class ProductDetail : ContentPage
{
public ProductDetail()
{
InitializeComponent();
}
public ProductDetail(dataModel model)
{
InitializeComponent();
//get the produce info from model and show it in this page
}
}