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=="123")
{
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