MAUI:画面遷移時のデータの受け渡し
画面遷移のとき、遷移先にデータを渡したいことがあります。
画面Aで選択された内容を画面B側で表示したい、とか、画面B側での処理に使いたい、といったようにです。
MAUIのShellアプリケーションではURIベースのナビゲーションを使います。 WebサイトのURLのようなページの指定方法です。
参考:
データの受け渡しのない遷移
まず、遷移先のページを作ります。
AppShell.xaml.csに遷移先のルーティング情報を追加します。
これで、"SecondPage"と指定するとSecondPage
へ遷移します。
遷移は以下のようにします。
Shell.Current.GoToAsync(nameof(SecondPage));
戻るときは以下のように遷移先のURIに".."を指定します。パスで相対的に1つ前
を表すのと同じです。
データの受け渡しのある遷移(単純な型の場合)
stringやintなどの単純な型の場合、渡す側はとてもシンプルです。
Webと同様に?
の後に「クエリパラメータ名 = パラメータ」の形でGoToAsyncにわたすだけです。
例えばクエリパラメータ名を「MessageFrom」とすると、以下のようになります。
受け取り側は以下のようにします。
- QueryProperty属性をViewModelにつける。
- QueryProperty(受け取り側のクラスのプロパティ名(SecondPageViewModelクラスの), クエリパラメータ名(送る側のURIで指定したID))
このように単純な型の場合は、URIにクエリパラメータとして埋め込んで渡すことができます。
では、カスタムクラスやListなど複雑な型の場合はどうでしょうか。
データの受け渡しのある遷移(複雑な型の場合)
複雑な型の場合はURIに埋め込むことはできません。
そのかわり、GoToAsyncメソッドはそういったデータを受け渡すためのDictionary<string,object>型の引数を受け取るようにできています。
以下のように渡したいデータを「キーと値」のペアで遷移先に渡すことができます。
注意:ObservableCollectionはそのままでは送れないのでListに変換しています。
受け取り側は単純な型の場合と変わりません。 QueryProperty属性を使って、送り側で指定したキー名と受け取り側のプロパティを結びつけるだけです。
おしまい
これで好きな型のデータを遷移先に送ることができます。