ピボットとパノラマ

Windows Phone 7を触って最初に思ったのは画面の見せ方がスムースで上手いということだ。特に感心したのは、関連した複数の画面をフリックで切替える操作を持つ画面だ。

そのような画面には少なくても二つのパターンがあって、一つはページを切替えるように関連している複数の画面を繋いだように見える"ピボット"、もう一つは複数の画面を大きな一つの画面上を移動しているように見せる"パノラマ"と呼ばれる画面であり、それぞれ前者はWindows Phone 7における「設定(Settings)」のSystem/Applicationの切替え、後者はMarketPlaceやZuneのカテゴリ切替えに見られるものだ。

ピボット

関連のあるコントロールをまとめた複数のページを定義しておき、それをフリック等のジェスチャで切替えることが出来る画面構成をこう呼ぶ。トップレベルのコンテナコントロールとしてMicrosoft.Phone.Controls.Pivotクラス、その要素にPivotItemクラスを使う。※1

Androidで適当なものは無いが、複数のActivityをジェスチャで切替える実装で可能だろう。

パノラマ

複数のページをフリックで切替えるのはピボットと同様だが、大きな画面の上のビューポートを移動しているように見せるのがパノラマだ。コンテナクラスとしてはてMicrosoft.Phone.Controls.Panoramaクラス、要素にはPanoramaItemクラスを使う。※1

AndroidのデフォルトのHome画面もいわばこのパノラマだろう。(そうは呼ばないだろうが)

どちらもページの遷移に見えるが内部的にはそうでは無く同一画面上のコントロールの集合。Visual Studio 2010のテンプレートとデザイナで殆どのことは出来てしまうため、AndroidのようにActivityの遷移で必要なコーディングは全く不要なのが凄い。※2

Pivot、PanoramaどちらもVisual Studio 2010のテンプレートが用意されているので簡単に使うことができる。

※1元々CodePlexで公開していた同名のコントロールである。(http://phone.codeplex.com/)
※2このサンプルでは見栄えがするようにグラデーションをExpression Blendで、ヘッダーテキストのスタイル(サイズ)変更はXAMLを編集した。