Prism.Unity.Formsで画面遷移先にメッセージ（テキスト）を飛ばす

はじめに 

今回は、Prism.Unity.Formsで画面遷移元のメッセージを画面遷移先に飛ばして表示する方法について記載します。

ベースにするソースコードは、こちらになります。

 

概要は、以下のとおりです。

1. MainPage（画面遷移元）にテキスト入力（Entryタグ）を配置する。
2. 画面遷移ボタンが押下された時、入力されているメッセージをMyContentPage（画面遷移元）に渡す。
3. MyContentPageで受け取ったメッセージをMyContentPage内で表示させるためのLabelタグを配置する。
4. MainPage画面から渡されたメッセージを表示する

MainPage（画面遷移元）にテキスト入力（Entryタグ）を配置する。

MainPage.xamlに、MyContentPageに表示させるメッセージ（Entryタグ）を追加します。

下図は、入力する場所がわかりやすくするためにLabelタグも追加しています。

画面遷移ボタンが押下された時、入力されているメッセージをMyContentPage（画面遷移元）に渡す

MainPageViewModel.csに追加します。

まずは、Entryタグから入力されたテキストを保持するためのプロパティを追加します。

次に画面遷移ボタンが押下イベントにEntryタグのプロパティを渡します。

NavigationParameter型にEntryタグのプロパティを設定し、NavigationService.NavigationAsyncメソッドの第２引数にパラメータを設定します。

MyContentPageで受け取ったメッセージをMyContentPage内で表示させるためのLabelタグを配置する

MyContentPage.xamlに画面遷移元から渡されたメッセージを表示するためのLabelタグを追加します。

MainPage画面から渡されたメッセージを表示する

MyContentPageViewModel.csにMainPage画面から渡されたメッセージを保持するプロパティとそのメッセージを表示する処理を追加します。

メッセージを表示するタイミングは、画面遷移時のOnNavigatedToメソッドで行います。

このメソッドは、継承元のViewModelsBaseクラスでも記述されていますが、MyContentPageViewModel.csにも記述します。

以上で終了です。

ソースコードは、GithubにもUpしてあります。

ViewModelsフォルダに追加したクラスの記述を「ちょっとだけ」楽にする

 はじめに

prism.unity.formsでViewModelsにクラスを追加した時は毎回以下を行う必要があります。

1.BindableBase, IInitialize, INavigationAware, IDestructibleクラスを継承する

2.INavigationServiceプロパティを追加する

3.Initialize, OnNavigatedFrom, OnNavigatedTo, Destroyメソッドを追加する

毎回行うのは面倒なので、Baseクラスを作成し、それを継承するようにします。

ViewModelsBaseクラスを追加する

ViewModelsフォルダを右クリックして、追加->新しいクラスを選択します。

次に、General、空のクラスを選択し、クラス名をViewModelsBaseと入力し新規ボタンを押下します。

ViewModelsBase.csには毎回追加していた記述を追加します。

これで、ViewModelsフォルダに追加したクラスには、以下を追加すれば良くなります。

1.ViewModelsBaseクラスを継承

2.コンストラクタのINavigationService引数を基底クラスに渡します。

githubのリポジトリは以下です

https://github.com/gucchi4141/prismXamarin.git

タグ名:chapter4

以上になります。

Prism.Unity.Formsで画面を遷移させる

はじめに

ContentPage XAMLを追加して、ボタンを押したら画面が遷移するようにします。

手順

1.MainPage.xamlに画面遷移させるボタンを追加する

2.ContentPage XAMLクラス（クラス名：MyContentPage）を追加する

3.MyContentPageViewModel.csを追加し、変更する

4.MainPageViewModel.csに画面遷移する処理を追加する

5.App.xaml.csに追加する

1.MainPage.xamlに画面遷移させるボタンを追加する

Buttonタグを追加し、Commandプロパティを{Binding ButtonMyContentPage}にします。

2.ContentPage XAMLクラス（クラス名：MyContentPage）を追加する

ViewsフォルダにMyContentPage名でクラスを追加します。

クラス追加時は、Forms、フォームContentPage XAMLを選択します。

3.MyContentPageViewModel.csを追加し、変更する

以下を追加します。

using Prism.Mvvm;

using Prism.Navigation;

以下のクラスを継承します。

BindableBase, IInitialize, INavigationAware, IDestructible

プロパティとコンストラクタに以下を追加します。

Initialize, OnNavigatedFrom, OnNavigatedTo, Destroyメソッドを追加します。

画面が遷移したことがわかるように以下のプロパティを追加します。（必須ではありません）

4.MainPageViewModel.csに画面遷移する処理を追加する

プロパティとメソッドを追加します。

メソッド内の処理も併せて追加します。

コンストラクタに以下の処理を追加します。

5.App.xaml.csに追加する

RegisterTypesメソッドに以下を追加します。

以上で終了です。ビルドして実行してみましょう。

ソースコードは、以下にあります。

https://github.com/gucchi4141/prismXamarin.git

タグ名はchapter3

Prism.Unity.Formsでボタンとラベルを連携させる

はじめに

Xamarinでprismを使う準備するの続きです。

今回は、ボタンとラベルを配置し、ボタンを押下したらラベルの表示が切り替わるようにします。

・ラベルのバインディング方法

・ボタンをクリックした時のメソッドの記述方法とラベルの表示の切り替え方法

のやり方が分かるようになります。

UI画面へボタンとラベルを追加

MainPage.xamlにラベルタグとボタンタグを追記します。

ラベルタグのTextプロパティには、{Binding LabelButton}を記述します。

ボタンタグのCommandプロパティには{Binding ButtonLabel}を記述します。

ボタンに関する処理を追加する

MainPageViewModels.csに以下を追加します。

using Prism.Commands;を先頭に追加します。

ButtonLabelオブジェクトとボタンがクリックされた時のメソッドを追加します。

コンストラクタに追加

ButtonLabel = new DelegateCommand(ButtonLabel_Click);

ラベルに関するプロパティを追加

MainPageViewModel.csに以下を追加します。

privateでstring型のプロパティ_labelButtonを追加します。

LabelButtonプロパティを追加します。

ソースコードは、以下にあります。

https://github.com/gucchi4141/prismXamarin.git

タグ名はchapter2

以上になります。ビルドして実行してみましょう。

Xamarinでprismを使う準備

はじめに

Windowsでは、Prism Template packがあるので、プロジェクト作成時にPrismを選択できるので

特に初期設定は不要ですが、VS for MACではPrism Template Packがないので、手動で設定する必要があります。

色々な設定を行う必要があるので、備忘録として記載しておきます。

環境によっては微妙な違いがあると思います。

Xamarin.Formsでprismを使うには毎回設定が必要になります。

プロジェクトの作成

まずは、 Xamarin.Formsを選択して、アプリ名を設定します。ここでは、prismXamarinとしました。

次は、プロジェクト名とソリューション名を確認して、作成ボタンを押下します。

パッケージを追加する

Manage NuGet Packagesを選択してPrism.Unity.Formsを選択します。

右下のパッケージの追加ボタンを押下します。

パッケージをプロジェクトに追加します。

すべてのプロジェクトにチェックを入れ、OKボタンを押下します。

パッケージの追加処理は、少々時間が必要になります。

場合によってはエラーが発生するのでプロジェクトを再起動した方が良いです。

プロジェクトの構成を変更する

prismXamarinプロジェクトにViewsとViewModelsフォルダを追加します。

ViewsフォルダにMainPage.xamlとMainPage.xaml.csを移動します。

（MainPage.xamlをドラッグ＆ドロップすると２つのファイルを移動できます）

MainPage.xamlとMainPage.xaml.csを変更

MainPage.xamlの名前空間に.Viewsを追加します。

MainPage.xamlのx:ClassにViewsを追加します。

MainPageViewModelクラスを追加する

ViewModelsフォルダに新しくMainPageViewModelクラスを新規作成します。

※ViewModelsフォルダ上で右クリックし、追加->新しいクラスを選択します。

Generalと空のクラスを選択し、クラス名をMainPageViewModelとし、新規ボタンを押下します。

MainPageViewModel.csへの追加

usingの追加

using Prism.Mvvm;
using Prism.Navigation;

を追加します

継承するクラスの追加

BindableBase, IInitialize, INavigationAware, IDestructibleを追加します

メンバ変数？を追加する

protected INavigationService NavigationService { get; private set; }を追加します。

コンストラクタを変更する

INavigationServie型を引数に追加し、メンバ変数に渡します。

メソッドを追加する

Initialize, OnNavigatedFrom, OnNavigatedTo, Destroyを追加します。

App.xamlを変更する

Applicationタグをprism:PrismApplicationに変更します。

xmlns:prism="http://prismlibrary.com"を追加します。

App.xaml.csを変更する

using の追加と削除

下図のようにします。

クラスの継承を削除

Applicationクラスを継承しないように削除します。

メソッドの追加と削除

・OnInitializedとRegisterTypesメソッドを追加します。

・OnStart,OnSleep,OnResumeメソッドを削除します。

コンストラクタ

・App()からImitilizedComponentをOnInitializedメソッドに移動します。

・MainPage = new MainPage()を削除します。

OnInitializedメソッドに処理を追加

RegisterTypesメソッドに処理を追加

変更前と変更後

変更前

変更後

以上で、準備完了です。

Prism Template Packのありがたみがわかりますね。