0x01 前言

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

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

0x02 简单的MVVM(mvvmcross) Demo

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

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

 1 using MvvmCross.Core.ViewModels;
 2 namespace Catcher.MVVMDemo.Day01CrossCore.ViewModels
 3 {
 4     public class MainViewModel : MvxViewModel
 5     {
 6         public MainViewModel() { }
 7         private string _input;
 8         public string Input
 9         {
10             get
11             {
12                 return _input;
13             }
14             set
15             {
16                 _input = value;
17                 RaisePropertyChanged(() => Input);
18             }
19         }
20     }
21 }

这里的ViewModel继承的是MvxViewModel。

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

 1 using Catcher.MVVMDemo.Day01CrossCore.ViewModels;
 2 using MvvmCross.Core.ViewModels;
 3 namespace Catcher.MVVMDemo.Day01CrossCore
 4 {
 5     public class App : MvxApplication
 6     {
 7         public override void Initialize()
 8         {
 9             RegisterAppStart<MainViewModel>();
10         }
11     }
12 }

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

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

第一个例子(Xamarin.Android)：

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

在根目录添加一个Setup.cs

 1 using Android.Content;
 2 using MvvmCross.Core.ViewModels;
 3 using MvvmCross.Droid.Platform;
 4 using Catcher.MVVMDemo.Day01CrossCore;
 5 namespace Catcher.MVVMDemo.Day01DroidByMvvmCross
 6 {
 7     public class Setup : MvxAndroidSetup
 8     {
 9         public Setup(Context applicationContext)
10             : base(applicationContext)
11         {
12         }
13         protected override IMvxApplication CreateApp()
14         {
15             return new App();
16         }
17     }
18 }

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

然后修改我们的Main.axml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:local="http://schemas.android.com/apk/res-auto"
 4     android:orientation="vertical"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent">
 7     <EditText
 8         android:layout_width="match_parent"
 9         android:layout_height="wrap_content"
10         local:MvxBind="Text Input" />
11     <TextView
12         android:layout_width="match_parent"
13         android:layout_height="wrap_content"
14         local:MvxBind="Text Input" />
15 </LinearLayout>

通过local:MvxBind来实现绑定。

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

 1 using Android.App;
 2 using MvvmCross.Droid.Views;
 3 namespace Catcher.MVVMDemo.Day01DroidByMvvmCross.Activities
 4 {
 5     [Activity(Label = "MvvmCross", MainLauncher = true)]
 6     public class MainActivity : MvxActivity
 7     {
 8         protected override void OnViewModelSet()
 9         {
10             SetContentView(Resource.Layout.Main);
11         }
12     }
13 }

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

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

第二个例子(UWP)：

步骤基本与Xamarin.Android一致！

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

添加一个Setup.cs

 1 using MvvmCross.Core.ViewModels;
 2 using MvvmCross.WindowsUWP.Platform;
 3 using Windows.UI.Xaml.Controls;
 4 namespace Catcher.MVVMDemo.Day01UWPByMvvmCross
 5 {
 6     public class Setup : MvxWindowsSetup
 7     {
 8         public Setup(Frame rootFrame) : base(rootFrame)
 9         {
10         }
11         protected override IMvxApplication CreateApp()
12         {
13             return new Day01CrossCore.App();
14         }
15     }
16 }

注意与Android的区别！！

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

 1           if (e.PrelaunchActivated == false)
 2             {
 3                 if (rootFrame.Content == null)
 4                 {
 5
 6                     //rootFrame.Navigate(typeof(MainPage), e.Arguments);
 7                     var setup = new Setup(rootFrame);
 8                     setup.Initialize();
 9                     var start = Mvx.Resolve<IMvxAppStart>();
10                     start.Start();
11                 }
12                 Window.Current.Activate();
13             }

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

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

 1 <views:MvxWindowsPage
 2     x:Class="Catcher.MVVMDemo.Day01UWPByMvvmCross.Views.MainPage"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:Catcher.MVVMDemo.Day01UWPByMvvmCross.Views"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8         xmlns:views="using:MvvmCross.WindowsUWP.Views"
 9     mc:Ignorable="d">
10     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
11         <StackPanel Margin="20">
12             <TextBlock FontSize="14" HorizontalAlignment="Center" Text="MvvmCross UWP Demo" />
13             <TextBox
14                 x:Name="txtInput"
15                 />
16             <TextBlock Text="{Binding ElementName=txtInput,Path=Text}" />
17         </StackPanel>
18     </Grid>
19 </views:MvxWindowsPage>

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

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

 1 using MvvmCross.WindowsUWP.Views;
 2 namespace Catcher.MVVMDemo.Day01UWPByMvvmCross.Views
 3 {
 4     public sealed partial class MainPage : MvxWindowsPage
 5     {
 6         public MainPage()
 7         {
 8             this.InitializeComponent();
 9         }
10     }
11 }

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

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

0x03 MVVM(mvvmcross) 登陆Demo

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

1 namespace Catcher.MVVMDemo.Day01CrossCore
2 {
3     public interface IDialogService
4     {
5         void Alert(string message, string title, string okbtnText);
6     }
7 }

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

 1 using MvvmCross.Core.ViewModels;
 2 namespace Catcher.MVVMDemo.Day01CrossCore.ViewModels
 3 {
 4     public class LoginViewModel : MvxViewModel
 5     {
 6         private readonly IDialogService _dialogService;
 7         public LoginViewModel(IDialogService dialogService)
 8         {
 9             _dialogService = dialogService;
10         }
11         private string _Name;
12         public string Name
13         {
14             get
15             {
16                 return _Name;
17             }
18             set
19             {
20                 _Name = value;
21                 RaisePropertyChanged(()=>Name);
22             }
23         }
24         private string _password;
25         public string Password
26         {
27             get
28             {
29                 return _password;
30             }
31             set
32             {
33                 _password = value;
34                 RaisePropertyChanged(()=>Password);
35             }
36         }
37         private IMvxCommand _loginCommand;
38         public virtual IMvxCommand LoginCommand
39         {
40             get
41             {
42                 _loginCommand = _loginCommand ?? new MvxCommand(Login);
43                 return _loginCommand;
44             }
45         }
46         private void Login()
47         {
48             if (Name=="catcher"&&Password=="123")
49             {
50                 ShowViewModel<MainViewModel>();
51             }
52             else
53             {
54                 _dialogService.Alert("check your name and password", "Infomation", "OK");
55             }
56         }
57     }
58 }

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

修改我们的App.cs

 1 using Catcher.MVVMDemo.Day01CrossCore.ViewModels;
 2 using MvvmCross.Core.ViewModels;
 3 using MvvmCross.Platform;
 4 using MvvmCross.Platform.IoC;
 5 namespace Catcher.MVVMDemo.Day01CrossCore
 6 {
 7     public class App : MvxApplication
 8     {
 9         public override void Initialize()
10         {
11             CreatableTypes()
12             .EndingWith("Service")
13             .AsInterfaces()
14             .RegisterAsLazySingleton();
15
16             RegisterAppStart<LoginViewModel>();
17             //demo 1
18             //RegisterAppStart<MainViewModel>();
19         }
20     }
21 }

第三个例子(Xamarin.Android)：

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

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

 1 using Android.App;
 2 using MvvmCross.Platform;
 3 using Catcher.MVVMDemo.Day01CrossCore;
 4 using MvvmCross.Platform.Droid.Platform;
 5 namespace Catcher.MVVMDemo.Day01DroidByMvvmCross.Services
 6 {
 7     public class DialogService : IDialogService
 8     {
 9         /// <summary>
10         /// show the alert dialog
11         /// </summary>
12         /// <param name="message">the message of the dialog</param>
13         /// <param name="title">the title of the dialog</param>
14         /// <param name="okbtnText">the text of the button</param>
15         public void Alert(string message, string title, string okbtnText)
16         {
17             //activity
18             var topActivity = Mvx.Resolve<IMvxAndroidCurrentTopActivity>();
19             var context = topActivity.Activity;
20             //alert dialog
21             var adb = new AlertDialog.Builder(context);
22             adb.SetTitle(title);
23             adb.SetMessage(message);
24             adb.SetPositiveButton(okbtnText, (sender, args) => { });
25             adb.Create().Show();
26         }
27     }
28 }

这里用到了AlertDialog。

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

1       protected override void InitializeFirstChance()
2         {
3             base.InitializeFirstChance();
4             Mvx.RegisterSingleton<IDialogService>(() => new DialogService());
5         }

添加一个login.axml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:local="http://schemas.android.com/apk/res-auto"
 4     android:orientation="vertical"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent">
 7     <EditText
 8         android:layout_width="match_parent"
 9         android:layout_height="wrap_content"
10         android:hint="enter your name"
11         local:MvxBind="Text Name" />
12     <EditText
13         android:layout_width="match_parent"
14         android:layout_height="wrap_content"
15         android:inputType="textPassword"
16         android:hint="enter your password"
17         local:MvxBind="Text Password" />
18     <Button
19         android:layout_width="match_parent"
20         android:layout_height="wrap_content"
21         android:text="Login"
22         local:MvxBind="Click LoginCommand" />
23 </LinearLayout>

在Activities文件夹添加一个LoginActivity

 1 using Android.App;
 2 using MvvmCross.Droid.Views;
 3 namespace Catcher.MVVMDemo.Day01DroidByMvvmCross.Activities
 4 {
 5     [Activity(Label = "MvvmCross", MainLauncher = true)]
 6     public class LoginActivity : MvxActivity
 7     {
 8         protected override void OnViewModelSet()
 9         {
10             SetContentView(Resource.Layout.login);
11         }
12     }
13 }

去掉，MainActivity中的Mainlauncher=true

OK，效果如下：

第四个例子(UWP)：

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

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

 1 using Catcher.MVVMDemo.Day01CrossCore;
 2 using System;
 3 using Windows.UI.Xaml.Controls;
 4 namespace Catcher.MVVMDemo.Day01UWPByMvvmCross.Services
 5 {
 6     public class DialogService : IDialogService
 7     {
 8         public async void Alert(string message, string title, string okbtnText)
 9         {
10             var dialog = new ContentDialog()
11             {
12                 Content = message,
13                 Title= title,
14                 PrimaryButtonText = okbtnText
15             };
16             dialog.PrimaryButtonClick += (s, e) => { };
17             await dialog.ShowAsync();
18         }
19     }
20 }

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

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

1       protected override void InitializeFirstChance()
2         {
3             base.InitializeFirstChance();
4             Mvx.RegisterSingleton<IDialogService>(() => new DialogService());
5         }

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

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

LoginPage.xaml.cs

 1 using Catcher.MVVMDemo.Day01CrossCore.ViewModels;
 2 using MvvmCross.WindowsUWP.Views;
 3 namespace Catcher.MVVMDemo.Day01UWPByMvvmCross.Views
 4 {
 5     public sealed partial class LoginPage :MvxWindowsPage
 6     {
 7         public new LoginViewModel ViewModel
 8         {
 9             get { return (LoginViewModel)base.ViewModel; }
10             set { base.ViewModel = value; }
11         }
12         public LoginPage()
13         {
14             this.InitializeComponent();
15         }
16     }
17 }

OK，效果如下 ：

0x04 简单总结

MvvmCross用起来跟MvvmLight基本是一样

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

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

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

官网：https://mvvmcross.com/

Github:https://github.com/MvvmCross

转载于:https://www.cnblogs.com/catcher1994/p/5526961.html

Xamarin.Android和UWP之MVVM的简单使用(二)相关推荐

  1. Xamarin.Android之封装个简单的网络请求类

    http://doc.okbase.net/catcher1994/archive/220195.html Catcher8 2016/4/23 0:28:50 阅读(72) 评论(0) 一.前言 回 ...

  2. Xamarin.Android开发实践（十七）

    Xamarin.Android开发实践(十七) 原文:Xamarin.Android开发实践(十七) Xamarin.Android之定位 一.前言 打开我们手中的应用,可以发现越来越多的应用使用了定 ...

  3. Xamarin Android开发实战（上册）

    Xamarin Android开发实战(上册)大学霸内部资料 试读文档下载地址:http://pan.baidu.com/s/1jGEHhhO 密码:vcfm 介绍: 本教程是国内唯一的Xamarin ...

  4. android aar项目_介绍如何调试Xamarin.Android的binding项目

    背景 Xamarin的开发的一个无法避免的弊端就是在很多Android原生态应用中被普遍用到的库,未必有.NET的实现版本.这个问题就如同当时微软WinPhone失败的原因一样,在另外两个平台中非常普 ...

  5. Xamarin Android 所见即所得问题

    Xamarin Android 所见即所得问题 原文:Xamarin Android 所见即所得问题 运行Xamarin 时出现以下问题. The layout could not be loaded ...

  6. Xamarin.Android开发实践（十四）

    原文:Xamarin.Android开发实践(十四) Xamarin.Android之ListView和Adapter 一.前言 如今不管任何应用都能够看到列表的存在,而本章我们将学习如何使用Xama ...

  7. 大叔也说Xamarin~Android篇~环境部署与破解

    原文:大叔也说Xamarin~Android篇~环境部署与破解 现在移动开发很HOT,以至于很多人都转向了它,大叔也不例外,这次有机制接触一下xamarin这个东西,其实之前也用于xamarin,只是 ...

  8. 张高兴的 Xamarin.Android 学习笔记：（二）“Hello World”

    完成环境配置后开始第一个简单项目.打开 Visual Studio 新建一个 Xamarin.Android 项目 "HelloAndroid".(GitHub:https://g ...

  9. Xamarin Android安装教程（2016最新亲测安装版）

    主要的安装流程如下: 一个完整的安装的环境以及让Xamarin android真正跑起来要一下几个步骤,很复杂吗,只能说不是很简单. 安装好Java的开发环境,也就是装好JDK 安装Xamarin F ...

最新文章

  1. mSystem：西农韦革宏组细菌-真菌互作影响微生物多样性-土壤养分循环关系
  2. 北京实习总结——记住牛人那些话
  3. easyexcel 设置标题_EasyExcel，让 excel 导入导出更加简单
  4. 【BZOJ 1415】 1415: [Noi2005]聪聪和可可 （bfs+记忆化搜索+期望）
  5. WEBSERVICE之JDK开发webservice
  6. 一次服务器CPU占用率高的定位分析
  7. 层 数据仓库_小尝试：基于指标体系的数据仓库搭建和数据可视化
  8. emqx使用webhook数据持久化到mysql
  9. 95后女孩成最年轻“航天人”，团队里女孩占一半，老一辈退休年轻人挑大梁啦...
  10. 数据结构与算法（八）-二叉树（斜二叉树、满二叉树、完全二叉树、线索二叉树）...
  11. 转: Protobuf 的 proto3 与 proto2 的区别
  12. Android 加密
  13. Excel VBA宏编程
  14. stc单片机呼吸灯c语言,用51单片机制作呼吸灯
  15. 电影《妖妖铃》改名为《妖铃铃》
  16. 谷歌宣布Android设备累计激活量突破10亿台
  17. switch语句的执行顺序
  18. D3D11 立方体贴图（天空盒子）
  19. MDX Aggregate函数
  20. linux如何手动kill vnc端口并修改分辨率

热门文章

  1. iOS 流媒体 基本使用 和方法注意
  2. shell编程系列20--文本处理三剑客之awk常用选项
  3. Linux 性能监控 ： CPU 、Memory 、 IO 、Network
  4. android 8种对话框（Dialog）使用方法汇总
  5. server 2008R2 AD域环境中DHCP服务器的授权步骤
  6. OS X 10.11 安装Cocoapods
  7. 设计模式——————观察者模式
  8. 在 MongoDB 上模拟事务操作来实现支付
  9. 寻找kernel32.dll的地址
  10. jQuery遍历not的用法