为同一个 ViewModel 绑定两个不同的视图

Question

这看起来类似于MVVMCross - Bind the same ViewModel to 2 different Views

但是在那之后我没有得到答案，如何为 ViewModel 选择一个视图，而在另一次为同一 ViewModel 选择第二个视图。

例如，我想要一个 ViewModel - LoginViewModel 和两个 View：PhoneLoginPage & TabletLoginPage。

根据来自Xamarin.Forms.Device.Idiom 的信息，当它是电话时，我想显示PhoneLoginPage，但当它是平板电脑时 - TabletLoginPage 但绑定了相同的LoginViewModel。

我怎样才能正确地实现它？意思是，没有任何肮脏的把戏......

谢谢

Answer 1

使用 MvvmCross 这是不可能的，在运行时，如果我们为同一个 ViewModel 创建两个视图，我们会得到一个异常。

接下来是我的解决方案：

<ProjectFolder>
    => Pages
        => Mobile
            XMobilePage.xaml
            YMobilePage.xaml
        => Tablets
            XTabletPage.xaml
            YTabletPage.xaml
    => PageModels
        => Mobile
            XMobilePageModel.cs
            YMobilePageModel.cs
        => Tablets
            XTabletPageModel.cs
            YTabletPageModel.cs

class XMobilePage: MvxContentPage<XMobilePageModel> {...}

class XTabletPage: MvxContentPage<XTabletPageModel> {...}

abstract SharedXPageModel
{
    //All Shared Commands and Comand Logic and other shared initialization
    abstract Task NavigateToYPageModel();
}

class XMobilePageModel : SharedXPageModel
{
    Task NavigateToYPageModel() => _mvxNavigationService.Navigate<YMobilePageModel>();
}

class XTabletPageModel : SharedXPageModel
{
    Task NavigateToYPageModel() => _mvxNavigationService.Navigate<YTabletPageModel>();
}

Answer 2

注意：我也支持只有一页。

但我会这样处理两页：

如果您使用某种导航服务：

只需根据设备的习惯在应用启动时注册不同的页面。

大致如下：

if(Device.Idiom == TargetIdiom.Tablet)
{
    SomeNavigationService.Register<LoginViewModel, TabletLoginPage>();
}
else
{
    SomeNavigationService.Register<LoginViewModel, PhoneLoginPage>();
}

如果您在页面代码隐藏中进行导航

在那里根据设备的习语选择页面...

if(Device.Idiom == TargetIdiom.Tablet)
{
    await Navigation.PushAsync(new TabletLoginPage(viewModel));
}
else
{
    await Navigation.PushAsync(new PhoneLoginPage(viewModel));
}