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

debugcn 发表于 Dev

学院

我目前正在使用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>

我只需要弄清楚如何显示各个产品。

杰克华-MSFT

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

首先，您的应用应以开头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
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。