System.InvalidCastException转换无效报错及多产品对应页面跳转实现问题

1. 报错原因分析 #

你触发类型转换异常的核心原因是：当前的Button是直接写在页面布局中，没有和MainViewModel的Products列表下的单个ProductViewModel条目绑定，按钮的BindingContext实际继承自页面的全局绑定上下文（也就是MainViewModel实例），强转成ProductViewModel自然会失败。

2. 修复步骤 #

2.1 修改NavigatePage.xaml #

将原来的单个Button替换为集合控件遍历Products列表，这样每个生成的按钮的BindingContext就会自动对应单个ProductViewModel实例，示例代码如下：

<CollectionView ItemsSource="{Binding Products}" Grid.Row="2">
    <CollectionView.ItemsLayout>
        <!-- 和你原来的3列布局对应 -->
        <GridItemsLayout Orientation="Vertical" Span="3" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Button BackgroundColor="#FB9B63" CornerRadius="10" HeightRequest="60" 
                    FontSize="20" HorizontalOptions="Center" Margin="8"
                    Text="Entrer" TextColor="White" VerticalOptions="Center" 
                    Clicked="AddToCartButton_Clicked" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

同时确保NavigatePage的绑定上下文已经正确赋值，可在页面构造函数中添加：

BindingContext = new MainViewModel();

2.2 修改NavigatePage.xaml.cs点击事件 #

用安全转换代替强转，增加空校验避免空引用异常，同时补全所有产品对应的页面跳转分支：

private void AddToCartButton_Clicked(object sender, EventArgs e)
{
    var btn = sender as Button;
    var item = btn?.BindingContext as ProductViewModel;
    // 绑定上下文类型不匹配直接返回
    if (item == null) return;

    ContentPage page = null;
    switch (item.Name)
    {
        case "QR_Manager":
            page = new Views.ManagerPage();
            break;
        case "Yellow Sun":
            page = new Views.YellowSunPage();
            break;
        // 其余产品对应的页面分支按需求自行补充
        default:
            // 未匹配到对应页面时可加提示逻辑，此处直接返回避免空跳转
            return;
    }

    if(page != null)
        Navigation.PushAsync(page);
}

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