PrismとReactiveCommand<T>で楽々画面遷移

放浪軍師のXamarin.Formsによるアプリ開発。
今回は画面遷移についてになります。
まず、初めて訪問された方は以下をお読みください。

www.gunshi.info

画面遷移をやってみる

画面遷移というのはまぁページの移動の事です。とあるページからとあるページへ飛ぶという操作の事ですね。まぁ大抵の場合単一ページのアプリって訳にもいかないでしょうから習得必須です。
通常だと結構めんどくさいみたいですが、PrismとReactivePropertyを導入しておけば楽に行う事ができるようでした。

ページの追加

まずは移動先のページを作成する必要があります。Prismテンプレートからプロジェクトを作成していれば、PCL(共通部分)にViewsフォルダがあるはずですので、それを右クリックして「追加」→「新しい項目」を選択します。
f:id:roamschemer:20180830005934p:plain

次にPrism→Xamarin.Formsよりページを選択して追加します。ここではContentPageを選択してNextPage.xamlと命名しました。
f:id:roamschemer:20180830010011p:plain

そうするとViewsだけでなくViewModelsにもファイルが追加され、自動で紐づけされます。ついでに比較用にAftarNextPageも同様に追加してみました。構成はこんな感じになります。
f:id:roamschemer:20180830011442p:plain
※誤ってViewModels右クリックでページ追加してしまうと、構成が変になってしまうので気を付けましょう。

移動元に移動用のボタンを配置して画面遷移を指示

[Views.MainPage.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"
             x:Class="PageChange.Views.MainPage"
             Title="MainPage">
    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Button Text="NextPageへ移動" Command="{Binding PageChangeButton}" CommandParameter="NextPage"/>
        <Button Text="AfterNextPageへ移動" Command="{Binding PageChangeButton}" CommandParameter="AfterNextPage"/>
    </StackLayout>
</ContentPage>

[ViewModels.MainPageViewModel.cs]

using Prism.Navigation;
using Reactive.Bindings;
using System;
namespace PageChange.ViewModels
{
    public class MainPageViewModel : ViewModelBase
    {
        public ReactiveCommand<string> PageChangeButton { get; } = new ReactiveCommand<string>();
        public MainPageViewModel(INavigationService navigationService) 
            : base (navigationService)
        {
            PageChangeButton.Subscribe(async x => await navigationService.NavigateAsync(x));
        }
    }
}

驚くべきことにこれだけで行けました。注目点はViewのCommandParameterに移動先を記述する事と、ReactiveCommand< T >型を使う事ですね。こうする事で遷移ボタンが複数個並んだとしてもViewModelは何の修正もせずともCommandParameterに書かれた遷移先へ飛んでくれます。

ちなみにこのReactiveCommand< T >を使って実例を出しているサイトは殆ど無くて、自分もかずきさんのサイトでちらっと見かけただけでした。
blog.okazuki.jp

ReactiveCommandには、CommandParameterを受け取るReactiveCommand< T >という型引数を受け取るバージョンのものも用意しています。

今回のようなボタンによるページ遷移には最適じゃないかと思いますが…どうでしょ？

挙動確認

挙動はこんな感じ。各ページは解りやすいようにページ名を表示するようにしてありますので、ボタンを押したらページが変わっているのが確認できるかと思います。尚、元のページに戻るには画面左上の←ボタンで戻れます。
f:id:roamschemer:20180830010653g:plain

まとめ

標準版やPrism単体での画面遷移解説サイトはそこそこ見かけたんですが、そこにReactiveCommand< T >を組み合わせたこの形は、俺のブログには珍しくオリジナルの記述法になります多分。

その為、すっげー良い情報を流した気にはなっていますが、致命的な間違いが無いとも言い切れないので使うときはご注意ください。俺は責任とらないからな！！！