Xamarin.FormsでMVVM Light ToolkitとReactivePropertyを使ってみた

Prism.Mvvmのほうが好みなんですが、こいつがSilverlight for Windows Phone 8をサポートしないので、SL for WP8もサポートしてる（すごいよね…）MVVM Light Toolkitを試してみました。

ViewModelLocatorの作成

SimpleIoCというDIコンテナがついてるけど、個人的にUnity推しなので、Unity使うようにしてViewModelLocatorを作りました。こんな感じで。

using App13.ViewModels;
using Microsoft.Practices.ServiceLocation;
using Microsoft.Practices.Unity;

namespace App13
{
    publicstaticclass ViewModelLocator
    {
        static ViewModelLocator()
        {
            var c = new UnityContainer();
            ServiceLocator.SetLocatorProvider(new ServiceLocatorProvider(() => new UnityServiceLocator(c)));
        }

        publicstatic MainViewModel Main
        {
            get { return ServiceLocator.Current.GetInstance<MainViewModel>(); }
        }
    }
}

ViewModelの作成

コマンド押したらダイアログが出るイメージです。

using Codeplex.Reactive;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Messaging;
using System;

namespace App13.ViewModels
{
    publicclass MainViewModel : ViewModelBase
    {
        public ReactiveProperty<string> Label { get; private set; }

        public ReactiveCommand AlertCommand { get; private set; }

        public MainViewModel()
        {
            this.Label = new ReactiveProperty<string>("Hello world");

            this.AlertCommand = new ReactiveCommand();
            this.AlertCommand.Subscribe(_ => this.MessengerInstance.Send(new NotificationMessage("こんにちは！")));
        }
    }
}

ダイアログ表示用ビヘイビアの作成

これでいいのか自信がないけどつくってみました。

using GalaSoft.MvvmLight.Messaging;
using Xamarin.Forms;

namespace App13.Services
{
    publicclass DialogBehavior : Behavior<Page>
    {
        private Page page;
        protectedoverridevoid OnAttachedTo(Page bindable)
        {
            base.OnAttachedTo(bindable);
            this.page = bindable;
            Messenger.Default.Register<NotificationMessage>(this, this.Alert);
        }

        publicvoid Alert(NotificationMessage message)
        {
            this.page.DisplayAlert("メッセージ", message.Notification, "OK");
        }

        protectedoverridevoid OnDetachingFrom(Page bindable)
        {
            base.OnDetachingFrom(bindable);
            Messenger.Default.Unregister<NotificationMessage>(this);
        }
    }
}

Viewの作成

XAMLでさくっとね。

<?xml version="1.0" encoding="utf-8"?><ContentPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:local="clr-namespace:App13;assembly=App13"xmlns:services="clr-namespace:App13.Services;assembly=App13"x:Class="App13.Views.MainPage"BindingContext="{x:Static local:ViewModelLocator.Main}"><ContentPage.Padding><OnPlatform x:TypeArguments="Thickness"iOS="0, 20, 0, 0" /></ContentPage.Padding><ContentPage.Behaviors><services:DialogBehavior /></ContentPage.Behaviors><StackLayout><Label Text="{Binding Label.Value}" /><Button Text="こんにちは"Command="{Binding AlertCommand}" /></StackLayout></ContentPage>

App.csの書き換え

App.csのMainPageの設定を上で作ったページに書き換えます。これは忘れがち。

using App13.Views;
using Xamarin.Forms;

namespace App13
{
    publicclass App : Application
    {
        public App()
        {
            // The root page of your application
            MainPage = new MainPage();
        }

        protectedoverridevoid OnStart()
        {
            // Handle when your app starts
        }

        protectedoverridevoid OnSleep()
        {
            // Handle when your app sleeps
        }

        protectedoverridevoid OnResume()
        {
            // Handle when your app resumes
        }
    }
}

実行して動作確認

実行してボタンを押すとダイアログが出た！

ソースコード

runceel/Xamarin.Forms-MVVMLight-RxProp-HelloWorld · GitHub