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