以前、ページ間の値の受け渡しをコードビハインドに記述してやってみるという記事を投稿しました。
今回はMVVMっぽく、ViewModelとModelを使ってやる方法を考えてみました。
1ページ目と2ページ目それぞれのVidwModelを作り、それぞれがModelを参照・更新するというような感じです。
環境
Visual Studio Community 2017 for Mac
Xamarin.Forms (3.4.0.1008975)
手順
まずは以下のようなStaticなPersonクラスを作ります。これで複数のクラスから参照することができます。
namespace XF_NavigationMVVM.Models { public static class Person { public static string Name { get; set; } } }
1ページ目の画面、コードビハインド、ビューモデルは以下のようになります。Entryに値が入力されるとビューモデルのNameプロパティと、PersonクラスのNameプロパティに値が設定されます。
画面
<?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="XF_NavigationMVVM.Views.FirstPage"> <ContentPage.Content> <StackLayout VerticalOptions="Center"> <Entry Text="{Binding Name}" Placeholder="名前を入力してください"/> <Button Text="次のページへ" Clicked="ToSecondPage"/> </StackLayout> </ContentPage.Content> </ContentPage>
コードビハインド
using System; using Xamarin.Forms; using XF_NavigationMVVM.ViewModels; namespace XF_NavigationMVVM.Views { public partial class FirstPage : ContentPage { public FirstPage() { InitializeComponent(); BindingContext = new FirstPageViewModel(); } void ToSecondPage(object sender, EventArgs e) { Navigation.PushAsync(new SecondPage()); } } }
ビューモデル
namespace XF_NavigationMVVM.ViewModels { public class FirstPageViewModel { private string name; public string Name { get { return name; } set { name = value; Models.Person.Name = name; } } } }
2ページ目の画面、コードビハインド、ビューモデルは以下のようになります。ビューモデルのコンストラクタでPersonクラスのNameプロパティを受け取り画面に表示します。
画面
<?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="XF_NavigationMVVM.Views.SecondPage"> <ContentPage.Content> <StackLayout VerticalOptions="Center"> <Label Text="{Binding Name}"/> </StackLayout> </ContentPage.Content> </ContentPage>
コードビハインド
using Xamarin.Forms; using XF_NavigationMVVM.ViewModels; namespace XF_NavigationMVVM.Views { public partial class SecondPage : ContentPage { public SecondPage() { InitializeComponent(); BindingContext = new SecondPageViewModel(); } } }
ビューモデル
namespace XF_NavigationMVVM.ViewModels { public class SecondPageViewModel { public SecondPageViewModel() { this.Name = Models.Person.Name; } public string Name { get; set; } } }
動きを確認すると以下の方な感じです。
一応画面上ではできているようですが、こんな感じでいいのかな・・?
気になる事
この場合だと逆のパターン、つまり2ページ目に値を入力した後、ナビゲーションバーで1ページ目に戻りそこで2ページ目に入力した値を表示する場合はどうすればいいですかね?今回の方法だとできなさそうなので気になりました。ちょっと調べてみようと思います。