MasterDetailPageについて纏めてみました。
MasterDetailPageを使う事で、一つの画面だけでなく複数の画面を跨ぐことが出来るようになります。
ContentPageよりも柔軟な画面の動きを見せる事ができ、アプリらしい見栄えにすることができます。
MasterDetailPageの動き方について
かりまたMasterDetailPageを使うとどのように動くかをまずは見てみましょう。この例では、MasterPageで選択した色をDetailPageの背景色に設定するという動きにしています。
| Windows8.1 | Android | iPhone |
|---|---|---|
 |  |  |
かりまたWindows8.1ではMasterPageが常に表示されている状態ですね。AndroidとiPhoneに関しては左上のボタンを押すことでMasterPageが表示される動きとなっています。
MasterDetailPageのプロパティ
MasterDetailPageの作り方(コードビハインド メイン)
かりまたかなり情報が少なかったのですが、冒頭のページに書かれてあるコードに自分なりに手を入れてみました。基本的にはコピペで大丈夫ですが、プロジェクト名などは適宜変更してください。
かりまたコードビハインドは以下の様にしています。
ContentPageとの違い
りんちゃんMasterDetailPageを作る際にはXamlでMasterDetailPageタグで囲ってやる必要があるにゃ～。画面の切り替えがないならここはContentPageタグで囲っている箇所だにゃ～。
MasterPageとDetailPageの切り替えについて
りんちゃんここまで読んで気付いた人もいるかもにゃ～。左上のボタンを押して表示されるページがMasterPageだにゃ～。つまり、MasterPageで項目を選択時に戻った画面がDetailPageということだにゃ～。
りんちゃん上記の処理で、IsPresentedプロパティをfalseにしてやることで、DetailPageに戻れるのにゃ～。
MasterDetailPageの作り方(Xamlメイン)
りんちゃんXamlをメインでMasterDetailPageを構築してみるのにゃ～。
りんちゃんコードビハインドには以下のように書くのにゃ～。
りんちゃんやっぱり、レイアウト部分をXamlに書くとスッキリするのにゃ～。これらをコピペして実行するとどう動くかを再度載せるにゃ～。
| Windows8.1 | Android | iPhone |
|---|---|---|
| | |
MasterBehaviorプロパティについて
かりまたMasterBehaviorプロパティについて動作のイメージが付かなかったので調べてみました。上記にもこのプロパティの説明は書いていますが、「詳細コンテンツの表示方法」を設定することが出来るプロパティです。
| メンバ名 | 説明 |
|---|---|
| Default | Detailはプラットフォームのデフォルトの方法で表示されます。 |
| Popover | Detailがページにポップアップされます。 |
| Split | Detailは常に分割画面で表示されます。 |
| SplitOnLandscape | デバイスが横向きになっていると、Detailが分割画面で表示されます。 |
| SplitOnPortrait | デバイスが縦向きの場合、Detailは分割された画面に表示されます。 |
りんちゃん以下のサイトが非常に分かりやすく書いてあるのにゃ～。
かりまた上記のサイトにも書いてありますが、このプロパティの注意点として、タブレットなどの大きい画面でないと適用されないですね。常にMasterDetailPageが表示されている状態となると、画面の幅をとってしまうからですね。
まとめ
かりまた今回の記事を書くにあたって、以下のサイトを参照しました。MasterDetailPageに関する情報がかなり少なく、非常に助かりました！ありがとうございます。
かりまたよりアプリらしさを感じる事ができるようになる機能ですね。この機能を知ってから気付いたのですが、Gmailのアプリ内でもMasterDetailPageが使われていますね。既存のアプリの動きを見て「これ、どうやって実装しているんだろう？」と考えさせられる機能です。
