More than 5 years have passed since last update.

2017年冬から始める ReactiveProperty + Xamarin.Forms

Last updated at 2017-11-22Posted at 2017-11-21

つい最近まで PCL な Xamarin.Forms では、 ReactiveProperty の 2.x 系しか使えないと思っていたのですが、いろいろな方の協力で使える方法が分かったので示しておきます。

今から ReactiveProperty を（Xamarin で）使ってみたいぞ、という人向けのクイックスタートも兼ねて。

1. ソリューションを作る

Visual Studio for Mac で行きます。

新しいソリューションから、アプリ - 空白フォームのアプリを選んで、適当な名前で作成します。ここでは「ReactivePropertySample」としますね。

2. PCL のプロファイルを "44" に変える

ソリューションが作成できたら、３つあるプロジェクトの中のコアプロジェクト(.Droid や .iOS のついてないもの)を選択して右クリック → 「オプション」を開きます。

ダイアログから、「ビルド」 → 「全般」を選択して、Target Framework の「.NET ポータブル」の横にある「変更」を押し、プロファイルを 「PCL 4.6 - Profile44」 に変更して OK を押します。対応プラットフォームから Windows Phone のチェックが外れますが まったく問題ありません 。

3. System.Runtime.InteropServices.RuntimeInformation の nuget パッケージを追加する

@yamachu さんが書かれた、

XamarinなどのPCLプロジェクトにSystem.Reactiveを導入しようとすると失敗することへの対策 - 窓を作っては壊していた人のブログ

の通りです。ReactiveProperty 3.x が依存している System.Reactive をインストールするには、まず
System.Runtime.InteropServices.RuntimeInformation を入れる必要があります。

コアプロジェクトを選択して、メニュー → プロジェクト → Nuget パッケージの追加とし、右上検索ボックスに "System.Runtime.InteropServices.RuntimeInformation" をタイプして絞り込みます。

見つかったら、右下の追加ボタンでインストールします。現在の最新バージョンは 4.3.0 です。

4. System.Reactive の nuget パッケージを追加する

次に、ReactiveProperty 3.x が依存している System.Reactive をインストールします（いきなり ReactiveProperty を入れてもよいのかもだけど、まあ順番にやってみましょう）。

方法は 3. と同じです。 nuget のダイアログボックスで System.Reactive とタイプして、結果から選択して追加します（雑になってきたｗ）。

5. ReactiveProperty の nuget パッケージを追加する

ついに ReactiveProperty のインストールです。 3. 4. と同じ方法で追加しましょう（雑）。

バージョン 3.x 系をついにいれる事ができました。現在の最新stableは 3.6.0 です。

できてしまえば簡単ですが、この方法に辿りつくまでに多くの労力と時間とご協力をいただきました。みなさまありがとうございました。

うーん，なんというか微妙なハックですけど，System.Runtime.InteropServices.RuntimeInformation 4.0.0(Reactive 3.1.1が依存しているバージョン)の依存にMicrosoft.NETCore.Platformsが含まれていて，そのせいでPCLのでの展開が出来ないんじゃないかなぁと睨んでいます．
— 留まり奈緒 (@y_chu5) 2017年11月18日

PCL Profile111 が Windows Phone を含んでるならそのせいですね
— かずき@66.8kg (@okazuki) 2017年11月21日

ReactiveProperty を使ってみよう

せっかくいれたのでちゃちゃっと使ってみましょう。
ぜんぶコアプロジェクトでやります。

I. MainViewModel を作る

MainViewModel というクラスを作って、次のように書きます。

using System;
using System.Reactive.Linq;
using Reactive.Bindings;

namespace ReactivePropertySample
{
    public class MainViewModel
    {
        public ReactiveProperty<long> Counter { get; }

        public MainViewModel()
        {
            Counter = Observable.Interval(TimeSpan.FromSeconds(1)).ToReactiveProperty();
        }
    }
}

Counter という変更通知プロパティを ReactiveProperty を使ってつくります。
Reactive Extensions の機能を使って、「１秒おきに１ずつカウントアップ」していきます。

II. 画面(Page)とバインドする

プロジェクトを作った時に ReactivePropertySamplePage.xaml という画面ができていると思うので、それを編集します。 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:ReactivePropertySample" 
    x:Class="ReactivePropertySample.ReactivePropertySamplePage">

    <ContentPage.BindingContext>
        <local:MainViewModel />
    </ContentPage.BindingContext>
    
    <Label Text="{Binding Counter.Value}" 
        VerticalOptions="Center" 
        HorizontalOptions="Center" />
    
</ContentPage>

<ContentPage.BindingContext> で、 MainViewModel をバインド対象としています。
そして、ラベルの Text に "{Binding Counter.Value}" と書くことで、 Counter 値をデータバインドしています。 .Value を付けるのを忘れずに！（と言っても忘れるんだよ、分かる。みんなやってる。）