【Xamarin】Prismを使ってデータバインド(MVVM)する方法

こんにちは！
なかむぅです。

ついにアプリ開発に足を踏み入れることになりました。

使用するのはPrismを使用したXamarin.Formsです。

Web開発でも取り入れているデータバインドも使用しているのですが

といった感じだったので、具体的にどういったものか調べてみました。

Prismを使ったXmarin.Formsで行われるデータバインドの仕組み

Xamarin.Formsのデータバインドは、Prismでプロジェクトを新規追加した時にはすでに実装されています。

生成されているMainPage.xamlを見てみると、ContentPageタグ内にTitleプロパティがあり、これが画面のタイトル部分です。

プロジェクト作成時には{Binding Title}と入っていますが、直書きすると代入文字列に変更されるはずなので試してみてください。

そしてTitleプロパティにセットされている{Binding Title}が、データバインドの一部の実装です。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MobileLab.Views.MainPage"
             Title="{Binding Title}">

    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" />
    </StackLayout>

</ContentPage>

この{Binding Title}は、MainPageViewModelのコンストラクタで代入されているTitleと紐づいていて、このTitleにセットする値が変更されると画面のタイトルも変更されます。

namespace MobileLab.ViewModels
{
    public class MainPageViewModel : ViewModelBase
    {
        public MainPageViewModel(INavigationService navigationService)
            : base(navigationService)
        {
            Title = "Main Page";
        }
    }
}

"Main Page"を"Hoge Page"に変更するとタイトルが変わるのが確認できるので試してみてください。

namespace MobileLab.ViewModels
{
    public class MainPageViewModel : ViewModelBase
    {
        public MainPageViewModel(INavigationService navigationService)
            : base(navigationService)
        {
            // Title = "Main Page";
            Title = "Hoge Page";
        }
    }
}

では、どのようにしてタイトルが変更されるのでしょうか。

{Binding Title}のTitleは、MainPageViewModelが継承しているViewModelBaseのプロパティです。

このTitleプロパティに値がセットされるとき、SetPropertyが呼ばれます。

namespace MobileLab.ViewModels
{
    public class ViewModelBase : BindableBase, IInitialize, INavigationAware, IDestructible
    {
        protected INavigationService NavigationService { get; private set; }

        private string _title;
        public string Title ← コイツ
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }
        ・
        ・
        ・
    }
}

SetPropertyはViewModelBaseが継承しているBindableBaseにあり、SetPropertyが呼ばれると

といった順番で呼ばれて、最終的にPropertyChangedEventHandlerのPropertyChangedが呼ばれてイベントが発生します。

このPropertyChangedイベントが発生することで、{Binding Title}で指定されている値が変更される仕組みですね。

protected virtual bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
{
    if (EqualityComparer<T>.Default.Equals(storage, value)) return false;

    storage = value;
    RaisePropertyChanged(propertyName);

    return true;
}

protected void RaisePropertyChanged([CallerMemberName] string propertyName = null)
{
    OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
}

protected virtual void OnPropertyChanged(PropertyChangedEventArgs args)
{
    PropertyChanged?.Invoke(this, args);
}

public event PropertyChangedEventHandler PropertyChanged;

LabelとEntryをバインディングしてみる

タイトルだとイメージしづらいので、試しにHogeプロパティを作成してLabelタグとEntryタグをバインドさせみます。

namespace MobileLab.ViewModels
{
    public class MainPageViewModel : ViewModelBase
    {
        public MainPageViewModel(INavigationService navigationService)
            : base(navigationService)
        {
            Title = "Hoge Page";
        }

        private string _hoge;

        public string Hoge
        {
            get { return _hoge; }
            set { SetProperty(ref _hoge , value); }
        }
    }
}

MainPage.xamlにはLabelタグとEntryタグのそれぞれに同じプロパティを指定しましょう。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MobileLab.Views.MainPage"
             Title="{Binding Title}">

    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" />
        <Label Text="{Binding Hoge}"></Label>
        <Entry Text="{Binding Hoge}"></Entry>
    </StackLayout>

</ContentPage>

すると、Entryタグ内の文字が変更されると同時にLabelの値も変更されるようになっていると思います。

これはHogeプロパティのSetPropertyが呼ばれてPropertyChangedイベントが発火しているため、LabelタグとEntryタグの内容がバインディングされているようになっているんですね。

まとめ

結構、ボタンを使用したバインディング方法を紹介している記事が多いですが、ボタンを押してからしかイベントが発生しないので

って感じで個人的にはいまいちよくわかりませんでした笑

この方法だとリアルタイムでLabelタグの文字が変更されているので、イメージしやすかったです。

以上、Prismを使ったXamarinのデータバインド方法についてでした！

と思った方はコメントいただけると嬉しいです。

最後までお読みいただきありがとうございました！