Xamarin.Android和UWP之MVVM的简单使用(二)

0x01 前言

前面一篇，Xamarin.Android和UWP之MVVM的简单使用(一)，主要讲了MvvmLight的简单使用

这篇主要讲讲MvvmCross的简单使用，例子的话，还是和上篇的一样。直接进正题吧，不废话了。

0x02 简单的MVVM(mvvmcross) Demo

新建一个类库项目：Catcher.MVVMDemo.Day01CrossCore

添加一个ViewModels文件夹，同时添加一个MainViewModel

 using MvvmCross.Core.ViewModels;
 namespace Catcher.MVVMDemo.Day01CrossCore.ViewModels
 {
     public class MainViewModel : MvxViewModel
     {
         public MainViewModel() { }
         private string _input;
         public string Input
         {
             get
             {
                 return _input;
             }
             set
             {
                 _input = value;
                 RaisePropertyChanged(() => Input);
             }
         }
     }
 }

这里的ViewModel继承的是MvxViewModel。

在项目根路径添加一个App.cs

 using Catcher.MVVMDemo.Day01CrossCore.ViewModels;
 using MvvmCross.Core.ViewModels;
 namespace Catcher.MVVMDemo.Day01CrossCore
 {
     public class App : MvxApplication
     {
         public override void Initialize()
         {
             RegisterAppStart<MainViewModel>();
         }
     }
 }

注册MainViewModel为启动的第一个视图模型

到这里，Xamarin.Android和UWP的公共部分已经完成了。

第一个例子(Xamarin.Android)：

新建一个Android项目:Catcher.MVVMDemo.Day01DroidByMvvmCross

在根目录添加一个Setup.cs

 using Android.Content;
 using MvvmCross.Core.ViewModels;
 using MvvmCross.Droid.Platform;
 using Catcher.MVVMDemo.Day01CrossCore;
 namespace Catcher.MVVMDemo.Day01DroidByMvvmCross
 {
     public class Setup : MvxAndroidSetup
     {
         public Setup(Context applicationContext)
             : base(applicationContext)
         {
         }
         protected override IMvxApplication CreateApp()
         {
             return new App();
         }
     }
 }

在Setup中，主要是返回了我们在Core里面编写的App.cs

然后修改我们的Main.axml

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:local="http://schemas.android.com/apk/res-auto"
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <EditText
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         local:MvxBind="Text Input" />
     <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         local:MvxBind="Text Input" />
 </LinearLayout>

通过local:MvxBind来实现绑定。

新建一个文件夹Activities，同时添加一个MainActivity

 using Android.App;
 using MvvmCross.Droid.Views;
 namespace Catcher.MVVMDemo.Day01DroidByMvvmCross.Activities
 {
     [Activity(Label = "MvvmCross", MainLauncher = true)]
     public class MainActivity : MvxActivity
     {
         protected override void OnViewModelSet()
         {
             SetContentView(Resource.Layout.Main);
         }
     }
 }

Activity的代码很简单，就是指定视图。

到这里已经可以成功运行了，效果如下:

第二个例子(UWP)：

步骤基本与Xamarin.Android一致！

新建一个UWP项目:Catcher.MVVMDemo.Day01UWPByMvvmCross

添加一个Setup.cs

 using MvvmCross.Core.ViewModels;
 using MvvmCross.WindowsUWP.Platform;
 using Windows.UI.Xaml.Controls;
 namespace Catcher.MVVMDemo.Day01UWPByMvvmCross
 {
     public class Setup : MvxWindowsSetup
     {
         public Setup(Frame rootFrame) : base(rootFrame)
         {
         }
         protected override IMvxApplication CreateApp()
         {
             return new Day01CrossCore.App();
         }
     }
 }

注意与Android的区别！！

修改App.xaml.cs，将设置启动页注释掉，换成我们刚才的Setup.cs，具体如下:

           if (e.PrelaunchActivated == false)
             {
                 if (rootFrame.Content == null)
                 {

                     //rootFrame.Navigate(typeof(MainPage), e.Arguments);
                     var setup = new Setup(rootFrame);
                     setup.Initialize();
                     var start = Mvx.Resolve<IMvxAppStart>();
                     start.Start();
                 }
                 Window.Current.Activate();
             }

把新建项目生成的MainPage干掉，同时在根目录添加一个Views文件夹，用来存放我们的Page

新建一个MainPage.xaml，修改布局如下：

 <views:MvxWindowsPage
     x:Class="Catcher.MVVMDemo.Day01UWPByMvvmCross.Views.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Catcher.MVVMDemo.Day01UWPByMvvmCross.Views"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:views="using:MvvmCross.WindowsUWP.Views"
     mc:Ignorable="d">
     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <StackPanel Margin="20">
             <TextBlock FontSize="14" HorizontalAlignment="Center" Text="MvvmCross UWP Demo" />
             <TextBox
                 x:Name="txtInput"
                 />
             <TextBlock Text="{Binding ElementName=txtInput,Path=Text}" />
         </StackPanel>
     </Grid>
 </views:MvxWindowsPage>

要注意的是，用的是MvvmCross的布局MvxWindosPage

并且，MainPage.xaml.cs也要修改！！

 using MvvmCross.WindowsUWP.Views;
 namespace Catcher.MVVMDemo.Day01UWPByMvvmCross.Views
 {
     public sealed partial class MainPage : MvxWindowsPage
     {
         public MainPage()
         {
             this.InitializeComponent();
         }
     }
 }

都是用MvvmCross自己的东西！如果忘记修改，运行效果是一片黑。

到这里已经OK了，效果如下

0x03 MVVM(mvvmcross) 登陆Demo

登陆失败时要有个对话框提示，我们要先新建一个IDialogService

 namespace Catcher.MVVMDemo.Day01CrossCore
 {
     public interface IDialogService
     {
         void Alert(string message, string title, string okbtnText);
     }
 }

在刚才的类库项目中添加一个LoginViewModel

 using MvvmCross.Core.ViewModels;
 namespace Catcher.MVVMDemo.Day01CrossCore.ViewModels
 {
     public class LoginViewModel : MvxViewModel
     {
         private readonly IDialogService _dialogService;
         public LoginViewModel(IDialogService dialogService)
         {
             _dialogService = dialogService;
         }
         private string _Name;
         public string Name
         {
             get
             {
                 return _Name;
             }
             set
             {
                 _Name = value;
                 RaisePropertyChanged(()=>Name);
             }
         }
         private string _password;
         public string Password
         {
             get
             {
                 return _password;
             }
             set
             {
                 _password = value;
                 RaisePropertyChanged(()=>Password);
             }
         }
         private IMvxCommand _loginCommand;
         public virtual IMvxCommand LoginCommand
         {
             get
             {
                 _loginCommand = _loginCommand ?? new MvxCommand(Login);
                 return _loginCommand;
             }
         }
         private void Login()
         {
             if (Name=="catcher"&&Password=="")
             {
                 ShowViewModel<MainViewModel>();
             }
             else
             {
                 _dialogService.Alert("check your name and password", "Infomation", "OK");
             }
         }
     }
 }

登陆的逻辑处理还是和上一篇一样。

修改我们的App.cs

 using Catcher.MVVMDemo.Day01CrossCore.ViewModels;
 using MvvmCross.Core.ViewModels;
 using MvvmCross.Platform;
 using MvvmCross.Platform.IoC;
 namespace Catcher.MVVMDemo.Day01CrossCore
 {
     public class App : MvxApplication
     {
         public override void Initialize()
         {
             CreatableTypes()
             .EndingWith("Service")
             .AsInterfaces()
             .RegisterAsLazySingleton();

             RegisterAppStart<LoginViewModel>();
             //demo 1
             //RegisterAppStart<MainViewModel>();
         }
     }
 }

第三个例子(Xamarin.Android)：

在Catcher.MVVMDemo.Day01DroidByMvvmCross中添加一个Services文件夹

同时添加一个DialogService去实现我们刚才定义的IDialogService接口。

 using Android.App;
 using MvvmCross.Platform;
 using Catcher.MVVMDemo.Day01CrossCore;
 using MvvmCross.Platform.Droid.Platform;
 namespace Catcher.MVVMDemo.Day01DroidByMvvmCross.Services
 {
     public class DialogService : IDialogService
     {
         /// <summary>
         /// show the alert dialog
         /// </summary>
         /// <param name="message">the message of the dialog</param>
         /// <param name="title">the title of the dialog</param>
         /// <param name="okbtnText">the text of the button</param>
         public void Alert(string message, string title, string okbtnText)
         {
             //activity
             var topActivity = Mvx.Resolve<IMvxAndroidCurrentTopActivity>();
             var context = topActivity.Activity;
             //alert dialog
             var adb = new AlertDialog.Builder(context);
             adb.SetTitle(title);
             adb.SetMessage(message);
             adb.SetPositiveButton(okbtnText, (sender, args) => { });
             adb.Create().Show();
         }
     }
 }

这里用到了AlertDialog。

在Setup.cs中注册一下这个Service，重写InitializeFirstChance 方法

       protected override void InitializeFirstChance()
         {
             base.InitializeFirstChance();
             Mvx.RegisterSingleton<IDialogService>(() => new DialogService());
         }

添加一个login.axml

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:local="http://schemas.android.com/apk/res-auto"
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <EditText
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:hint="enter your name"
         local:MvxBind="Text Name" />
     <EditText
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:inputType="textPassword"
         android:hint="enter your password"
         local:MvxBind="Text Password" />
     <Button
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="Login"
         local:MvxBind="Click LoginCommand" />
 </LinearLayout>

在Activities文件夹添加一个LoginActivity

 using Android.App;
 using MvvmCross.Droid.Views;
 namespace Catcher.MVVMDemo.Day01DroidByMvvmCross.Activities
 {
     [Activity(Label = "MvvmCross", MainLauncher = true)]
     public class LoginActivity : MvxActivity
     {
         protected override void OnViewModelSet()
         {
             SetContentView(Resource.Layout.login);
         }
     }
 }

去掉，MainActivity中的Mainlauncher=true

OK，效果如下：

第四个例子(UWP)：

在Catcher.MVVMDemo.Day01UWPByMvvmCross中添加一个Services文件夹

同时添加一个DialogService去实现我们刚才定义的IDialogService接口。

 using Catcher.MVVMDemo.Day01CrossCore;
 using System;
 using Windows.UI.Xaml.Controls;
 namespace Catcher.MVVMDemo.Day01UWPByMvvmCross.Services
 {
     public class DialogService : IDialogService
     {
         public async void Alert(string message, string title, string okbtnText)
         {
             var dialog = new ContentDialog()
             {
                 Content = message,
                 Title= title,
                 PrimaryButtonText = okbtnText
             };
             dialog.PrimaryButtonClick += (s, e) => { };
             await dialog.ShowAsync();
         }
     }
 }

这里用ContentDialog去实现这个提示。

在Setup.cs中注册一下这个Service，重写InitializeFirstChance 方法

       protected override void InitializeFirstChance()
         {
             base.InitializeFirstChance();
             Mvx.RegisterSingleton<IDialogService>(() => new DialogService());
         }

在Views文件夹添加一个LoginPage.xaml

 <views:MvxWindowsPage
     x:Class="Catcher.MVVMDemo.Day01UWPByMvvmCross.Views.LoginPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Catcher.MVVMDemo.Day01UWPByMvvmCross.Views"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:views="using:MvvmCross.WindowsUWP.Views"
     mc:Ignorable="d">
     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <Grid.RowDefinitions>
             <RowDefinition Height="*"></RowDefinition>
             <RowDefinition Height="*"></RowDefinition>
             <RowDefinition Height="*"></RowDefinition>
             <RowDefinition Height="*"></RowDefinition>
             <RowDefinition Height="5*"></RowDefinition>
         </Grid.RowDefinitions>
         <TextBox Grid.Row="1" Margin="15" Height="20" Text="{Binding Name,Mode=TwoWay}" PlaceholderText="enter you name" />
         <PasswordBox Grid.Row="2" Margin="15" Height="20" Password="{Binding Password,Mode=TwoWay}" PasswordChar="*" PlaceholderText="enter your password" />
         <Button Grid.Row="3" Margin="15,10" Content="Login" Command="{Binding LoginCommand}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"   />
     </Grid>
 </views:MvxWindowsPage>

LoginPage.xaml.cs

 using Catcher.MVVMDemo.Day01CrossCore.ViewModels;
 using MvvmCross.WindowsUWP.Views;
 namespace Catcher.MVVMDemo.Day01UWPByMvvmCross.Views
 {
     public sealed partial class LoginPage :MvxWindowsPage
     {
         public new LoginViewModel ViewModel
         {
             get { return (LoginViewModel)base.ViewModel; }
             set { base.ViewModel = value; }
         }
         public LoginPage()
         {
             this.InitializeComponent();
         }
     }
 }

OK，效果如下 ：

0x04 简单总结

MvvmCross用起来跟MvvmLight基本是一样

ViewModel这一块与MvvmLight的ViewModel基本没有太大的差别

其他方面，复杂一点的时候，工作量基本差不多，各有各的好，使用的话，都是看个人的兴趣爱好。

MvvmCross也在不断更新，昨天是4.1.5版本，今天就4.1.6了。

官网：https://mvvmcross.com/

Github:https://github.com/MvvmCross