MasterDetailPageについて纏めてみました。

MasterDetailPageを使う事で、一つの画面だけでなく複数の画面を跨ぐことが出来るようになります。

ContentPageよりも柔軟な画面の動きを見せる事ができ、アプリらしい見栄えにすることができます。

MasterDetailPageの動き方について

かりまたかりまた

MasterDetailPageを使うとどのように動くかをまずは見てみましょう。この例では、MasterPageで選択した色をDetailPageの背景色に設定するという動きにしています。

Windows8.1AndroidiPhone
かりまたかりまた

Windows8.1ではMasterPageが常に表示されている状態ですね。AndroidiPhoneに関しては左上のボタンを押すことでMasterPageが表示される動きとなっています。

MasterDetailPageのプロパティ

Detailプロパティ
IsGestureEnabledプロパティ
IsPresentedプロパティ
Masterプロパティ
MasterBehaviorプロパティ

MasterDetailPageの作り方(コードビハインド メイン)

かりまたかりまた

かなり情報が少なかったのですが、冒頭のページに書かれてあるコードに自分なりに手を入れてみました。基本的にはコピペで大丈夫ですが、プロジェクト名などは適宜変更してください。


かりまたかりまた

コードビハインドは以下の様にしています。

ContentPageとの違い

りんちゃんりんちゃん

MasterDetailPageを作る際にはXamlMasterDetailPageタグで囲ってやる必要があるにゃ~。画面の切り替えがないならここはContentPageタグで囲っている箇所だにゃ~。

MasterPageとDetailPageの切り替えについて

りんちゃんりんちゃん

ここまで読んで気付いた人もいるかもにゃ~。左上のボタンを押して表示されるページがMasterPageだにゃ~。つまり、MasterPageで項目を選択時に戻った画面がDetailPageということだにゃ~。


りんちゃんりんちゃん

上記の処理で、IsPresentedプロパティfalseにしてやることで、DetailPageに戻れるのにゃ~。

MasterDetailPageの作り方(Xamlメイン)

りんちゃんりんちゃん

XamlをメインでMasterDetailPageを構築してみるのにゃ~。


りんちゃんりんちゃん

コードビハインドには以下のように書くのにゃ~。


りんちゃんりんちゃん

やっぱり、レイアウト部分をXamlに書くとスッキリするのにゃ~。これらをコピペして実行するとどう動くかを再度載せるにゃ~。

Windows8.1AndroidiPhone

MasterBehaviorプロパティについて

かりまたかりまた

MasterBehaviorプロパティについて動作のイメージが付かなかったので調べてみました。上記にもこのプロパティの説明は書いていますが、「詳細コンテンツの表示方法」を設定することが出来るプロパティです。

メンバ名説明
DefaultDetailはプラットフォームのデフォルトの方法で表示されます。
PopoverDetailがページにポップアップされます。
SplitDetailは常に分割画面で表示されます。
SplitOnLandscapeデバイスが横向きになっていると、Detailが分割画面で表示されます。
SplitOnPortraitデバイスが縦向きの場合、Detailは分割された画面に表示されます。
りんちゃんりんちゃん

以下のサイトが非常に分かりやすく書いてあるのにゃ~。

かりまたかりまた

上記のサイトにも書いてありますが、このプロパティの注意点として、タブレットなどの大きい画面でないと適用されないですね。常にMasterDetailPageが表示されている状態となると、画面の幅をとってしまうからですね。

 まとめ

かりまたかりまた

今回の記事を書くにあたって、以下のサイトを参照しました。MasterDetailPageに関する情報がかなり少なく、非常に助かりました!ありがとうございます。

かりまたかりまた

よりアプリらしさを感じる事ができるようになる機能ですね。この機能を知ってから気付いたのですが、Gmailのアプリ内でもMasterDetailPageが使われていますね。既存のアプリの動きを見て「これ、どうやって実装しているんだろう?」と考えさせられる機能です。