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