7-1.パノラマコントロール

Windows Phone 7の特徴的なレイアウトの仕組みにパノラマとピボットの2つがあります。

今回はそのうちの一つ「パノラマコントロール」について紹介します。



(パノラマコントロール。一続きの展望画像のようにページ遷移を表現できる)

7-2.プロジェクトの作成

それではパノラマコントロールのプロジェクトを作成してみましょう。

Visual Studio 2010 Express for Windows Phoneでは、プロジェクト作成じにパノラマコントロールを備えたプロジェクトテンプレートを選ぶことができます。



任意のプロジェクト名を入力してプロジェクトを作成すると以下のような画面になります。



これでパノラマコントロールのテンプレートが作成されました。このまま実行すればパノラマコントロールの動作を確認することができます。

次はソースコードを眺めながら、動作を確認してみましょう。

7-3.パノラマコントロールの基礎

まずは自動で生成されたパノラマコントロールのxamlコードを見てみましょう。

    
  

2行目がパノラマコントロールのトップノードです。

続いて、BackgroundプロパティにImageBrushを設定しています。これが背景画像になります。

Backgroundプロパティに設定できるのはRadialGradientBrush, ImageBrush, SolidColorBrush,VideoBrushなどがありますが、現在のところWindowsPhone7ではVideoBrushは使えません。背景が動画のパノラマとか面白そうなんですけどね。

7行目以降が、パノラマの各ページを表します。

        
      

上記サンプルコードでは3画面分のPanoramaItemが定義されているので、横に3画面並べたパノラマが表示されます。

パノラマコントロールは下にあるようにTitle部分がありパノラマを横断した文字列を表記できます。

        
      

PanoramaItemにはHeader部があり、こちらで各ページのタイトルのようなものを表現できます。

7-4.パノラマ操作時のイベント

次はパノラマ操作時に呼び出されるイベントを見てみましょう。

MainPage.xaml.csに以下のようにメソッドを追加します。

        
      

ManipulationStartedはパノラマを操作開始した際にコールされるイベントです。

上記ソースのようにe.OriginalSourceでタッチしたオブジェクトを取得することができます。

ManipulationDeltaは、遷移の途中に定期的に呼び出されるイベントです。

e.DeltaManipulation.Translation.Xなどで移動中の移動位置を取得できます。移動が左か右で値の絶対値が違います。

ManipulationCompletedは遷移が終了したことを示すイベントです。

ManipulationStarted, ManipulationDeltaイベント発生時はなるべく重い処理を走らせない、処理はバックグラウンドで処理する等の対応をしないとアニメーションがカクカクしてしまいますので注意。

7-5.次回はピボットコントロール

今回はパノラマコントロールの基礎を紹介しました。

下記のようにOrientation、SupportedOrientationsをLandscapeにすることで横向きに対応したパノラマにすることができます。

        
      

次回はピボットコントロールを紹介する予定です。

【ページ作成日 2011/04/27】