読者です 読者をやめる 読者になる 読者になる

Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

Xamarin.Forms で Mvvm のサンプルを作ってみました

こんにちは。エクセルソフトの田淵です。

@amay077さんXamarin - マルチプラットフォーム MVVMフレームワーク「MvvmCross」を使う - Qiita を Xamarin.Forms で出来ないかな?と思ってやってみました。

サンプルを GitHub にアップしました。

Xamarin の Data Binding については

Part 5. From Data Bindings to MVVM - Xamarin

Interactive_MVVM

の部分を見ていただくのが良いかと思います。

View

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:XF_MvvmSample.View;assembly=XF_MvvmSample"
             x:Class="XF_MvvmSample.View.XamlPage">
  <StackLayout>
    <Editor Text="{Binding FirstName}" HorizontalOptions="FillAndExpand" />
    <Editor Text="{Binding LastName}" HorizontalOptions="FillAndExpand" />
    <Label Text="{Binding FullName}" FontSize="36" HorizontalOptions="FillAndExpand" />
  </StackLayout>
</ContentPage>

xmlns:local="clr-namespace:XF_MvvmSample.View;assembly=XF_MvvmSample" と namespace と アセンブリ名を書く必要があるようです。FirstName、LastName、FullName にそれぞれ Binding を設定します。

コードビハインドには this.BindingContext = new XF_MvvmSample.ViewModel.XamlPageViewModel(); と ViewModel だけ指定します。

ViewModel

ここはサンプルをそのまま写経しました。

public event PropertyChangedEventHandler PropertyChanged;イベントハンドラを宣言したり、Binding するプロパティを設定したりします。

public string FirstName
{
    get { return _firstName; }
    set
    {
        if (_firstName != value)
        {
            _firstName = value;
            OnPropertyChanged("FirstName");
            SetFullName();
            OnPropertyChanged("FullName");
        }
    }
}

public string FullName
{
    get { return _fullName; }
    set { }
}

void SetFullName()
{
    _fullName = string.Format("{0} {1}", _firstName, _lastName);
}

protected virtual void OnPropertyChanged(string propertyName)
{
    if (PropertyChanged != null)
    {
        PropertyChanged(this,
            new PropertyChangedEventArgs(propertyName));
    }
}

例えば FirstName に value がセットされると、_firstName に value を入れて、FirstName のプロパティが変更されたことを通知します(書き方合ってますかね?)。ここで、FullName が Label で set の時に色々試しましたが、PropertyChanged のイベントがどうしても発生しないので、FirstName、LastName に value がセットされた時に OnPropertyChanged("FullName"); も呼んでしまってます。

このやり方が合っているのかさっぱり分からないので、詳しい方は教えていただけると嬉しいです。

一応動いてます。

http://f.st-hatena.com/images/fotolife/y/ytabuchi/20150422/20150422020509.gif?1429636285

Mvvm の機能もあってすっきりコードが書ける Xamarin.Forms を是非試してみてください。

Xamarin 気になった方は

是非 ダウンロード(直接) / ダウンロード(弊社経由) して触ってみてください。 学習用リソースJXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

以上です。