如何为每个ProductViewModel对应的按钮实现跳转不同页面的功能

步骤1：修改XAML按钮代码，绑定传递当前Product上下文 #

给按钮添加CommandParameter属性，绑定当前项的数据源，这样点击时就能拿到对应的ProductViewModel实例：

注：如果你的按钮是放在CollectionView、ListView等列表控件的ItemTemplate内，{Binding .}默认代表当前列表项对应的ProductViewModel实例，不需要额外调整上下文。

<Button x:Name="ClickButton" 
        BackgroundColor="#FB9B63" 
        CornerRadius="10" 
        HeightRequest="60" 
        FontSize="20" 
        HorizontalOptions="Center"
        Text="Entrer" 
        TextColor="White" 
        VerticalOptions="Center" 
        Clicked="AddToCartButton_Clicked"
        CommandParameter="{Binding .}" />

步骤2：修改点击事件逻辑，根据Product判断跳转页面 #

在AddToCartButton_Clicked方法里先获取传递的Product参数，再根据唯一标识（比如Name、自定义标识字段）判断跳转目标：

private void AddToCartButton_Clicked(object sender, EventArgs e)
{
    // 获取点击的按钮实例
    var button = sender as Button;
    // 获取绑定的对应ProductViewModel实例
    var currentProduct = button?.CommandParameter as ProductViewModel;
    if (currentProduct == null) return;

    // 根据Product的唯一标识判断跳转页面
    switch (currentProduct.Name)
    {
        case "Manager":
            Navigation.PushAsync(new ManagerPage());
            break;
        case "Yellow Sun":
            Navigation.PushAsync(new YellowSunPage());
            break;
        // 其他产品对应页面继续添加case即可
        default:
            // 可补充默认跳转逻辑
            break;
    }
}

可选优化：避免硬编码判断 #

可以提前在ProductViewModel中添加跳转目标页面的类型字段，减少后续维护成本：

1. 首先修改ProductViewModel类，新增目标页面类型属性：

public class ProductViewModel
{
    // 原有属性保持不变
    public string HeroColor { get; set; }
    public string Name { get; set; }
    public string ImageUrl { get; set; }
    public bool IsFeatured { get; set; }
    public string Description { get; set; }
    // 新增目标页面类型属性
    public Type TargetPageType { get; set; }
}

2. 修改MainViewModel中初始化Product的代码，指定对应跳转页面：

public MainViewModel()
{
    Products = new ObservableRangeCollection<ProductViewModel>()
    {
        new ProductViewModel()
        {
            HeroColor = "#95C9F7",
            Name="Manager",
            ImageUrl = "QRM",
            IsFeatured = true,
            Description = "Contained in a glass polygonal florarium",
            TargetPageType = typeof(ManagerPage) // 指定跳转页面
        },
        new ProductViewModel()
        {
            HeroColor = "#FFCA81",
            Name="Yellow Sun",
            ImageUrl = "yellow_moss",
            IsFeatured = true,
            Description = "Contained in a yellow glass polygonal florarium",
            TargetPageType = typeof(YellowSunPage) // 指定跳转页面
        }
    };
}

3. 点击事件可简化为：

private void AddToCartButton_Clicked(object sender, EventArgs e)
{
    var button = sender as Button;
    var currentProduct = button?.CommandParameter as ProductViewModel;
    if (currentProduct?.TargetPageType == null) return;
    
    // 直接创建对应页面实例跳转
    var targetPage = Activator.CreateInstance(currentProduct.TargetPageType) as Page;
    Navigation.PushAsync(targetPage);
}

内容的提问来源于stack exchange，提问作者Amine Bougrine