takataka430’s blog

.NET系を中心に勉強したことのまとめを書きます

【Xamarin.Forms】ページ間での値の受け渡し方法を考えてみた(その2)

以前、ページ間の値の受け渡しをコードビハインドに記述してやってみるという記事を投稿しました。

takataka430.hatenablog.com

今回は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; }
    }
}

動きを確認すると以下の方な感じです。

f:id:takataka430:20190316211321g:plain

一応画面上ではできているようですが、こんな感じでいいのかな・・?

気になる事

この場合だと逆のパターン、つまり2ページ目に値を入力した後、ナビゲーションバーで1ページ目に戻りそこで2ページ目に入力した値を表示する場合はどうすればいいですかね?今回の方法だとできなさそうなので気になりました。ちょっと調べてみようと思います。