[Windows Phone 7 UIガイドを読み解く] 第11回 ～ナビゲーション、フレーム、ページの概念～

  • Article

[Windows Phone 7 UIガイドを読み解く] 第11回
～ナビゲーション、フレーム、ページの概念～

[Navigation, frames and pages] (52ページ - 55ページ )
WP7のアプリケーションは、Silverlightのページモデルがベースになっています。
リンクを使用して次のページに進んだり、戻るボタンで前に表示していたページに戻ります。

アプリケーションの中核となる最上位のコンテナは、フレームと呼ばれます。
1つのアプリケーションには、フレームを1つだけ用意することができます。
フレーム内に表示させるページの数には、上限はありません。
WP7は、このフレームとページによって、表示させたい内容を分けることができます。

フレームとページの関係は、下記の図のようになっています。

(UIガイドの図を一部加工しています)

全体を含んでいるものがフレームで、allと書かれているところの右にあるunread urgerと薄い色で書かれている以外の部分が1つのページです。
このページには、allというページのタイトルと、Phylis Harrisから始まる5人の情報がページに含まれる内容です。
allの右側に表示されている、薄い色で書かれているunreadは、別のページのタイトルです。
なお、この図はピボットと呼ばれる、Windows Phone 7の特長的なUIを使用しているため、複数のページのタイトルの部分が左詰めで表示されています。

アプリケーションで複数のページを用意した場合は、以下のように遷移させます。

private void hyperlinkButton1_Click(object sender, RoutedEventArgs e) {
NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.RelativeOrAbsolute));
}

シンプルなアプリケーションの場合は、ページを1つ用意するだけでも構いません。

このようにページを遷移させるモデルは、スポークアンド ハブ システムと呼ばれます。
自転車の車輪は中央にハブがあり、ハブとタイヤの部分は、鉄の細い棒である多数のスポークでつながっています。
アプリケーション側でリンクを用意しなくても、戻るボタンを使用してページを遷移させることができます。
システム側では、表示されたページをバックスタックと呼ばれる場所に記録しています。
ユーザーが戻るボタンを押したときは、バックスタックに最後に記録されたページを表示します。

気を付けるべき点として、p1、p2、p3という3つのページがあるアプリケーションで、p1→p2→p1→p2→p3 と遷移したとします。2回目にp2を表示したときに、このページに何か入力したとしても、戻るボタンを使用して最初にp2を表示させたところまで戻ると、ページをリフレッシュしていない限り途中で入力した文字が消えています。
これは、ユーザーが最初にp2を表示させたときのページをそのまま保持しているからです。
アプリケーションを開発する際には、ユーザーが戻るボタンを多用したときに混乱しないように、適切な時にページをリフレッシュさせるような設計をすることが大切です。

画面上にステータスバーやアプリケーションバーを表示させないことで、アプリケーションをフルスクリーン表示させることができます。
これらのバーを非表示にしていても、通知が行われたときや、電話がかかってきたときには、それらの情報は表示されます。

[注意事項]
この記事は、UI Design and Interaction Guide for Windows Phone 7 Version 2.0というドキュメントを元に書いています。個人的な意見や見解も含んでいます。
記事中のページは、印刷後のページ(左上または右上に表示されている数字)です。
画像は、断りのない限りオリジナルのドキュメントから引用しています。
英語の得意な方は、オリジナルのドキュメントもご参照ください。

[オリジナルのドキュメント]
オリジナルのドキュメントは、下記Webサイトよりダウンロードできます。
https://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspx
このページの最初のほうにある、「UI Design and Interaction.....」というリンクをクリックすると、ダウンロードが始まります。

[Windows Phone 7 UIガイドを読み解く]
第1回 : ～ WP7のデザイン哲学～
第2回 : ～スタート画面～
第3回 : ～ステータスバー～
第4回 : ～アプリケーションバー～
第5回 : ～アプリケーションバー アイコン～
第6回 : ～電話機の傾きによる画面の向き～
第7回 : ～プッシュ通知サービス～
第8回 : ～タイルによる通知～
第9回 : ～トーストによる通知～
第10回 : ～直接の通知～

マイクロソフト
田中達彦