Windows Phone の Panorama コントロールのアーキテクチャ

2012/02/09

パノラマ操作は Panorama コントロールと 1 つ以上の PanoramaItem コントロールから構成されます。Panorama コントロールがアプリケーションの基盤を提供し、PanoramaItem コントロールが個々のコンテンツ セクションをホストします。アプリケーションの要件に基づいて、それぞれ個別の機能目的を持つ複数の PanoramaItem コントロールを Panorama コントロールの表面に追加できます。たとえば、1 つの PanoramaItem に一連のリンクとコントロールを含め、別のコントロールをにサムネイル イメージのリポジトリにすることができます。ユーザーは、パノラマ アプリケーションによって既に提供されているジェスチャ サポートを使用して、これらのセクションを前後にパンすることができます。このトピックでは、Panorama コントロールと PanoramaItem コントロールのアーキテクチャと構造について詳しく説明します。

 

AP_CoreCon_PanoAnatomyCon

Panorama コントロールはパノラマ アプリケーションの基本コントロールであり、3 つのレイヤーから構成されます。各レイヤーは、Panorama コントロールのレイアウト ルートとして機能する Grid コントロール内に含まれます。

  • バックグラウンド

  • Title

  • Items

レイヤー

説明

バックグラウンド

PanningBackgroundLayer

背景の表示とアニメーション化に使用されるパネル。

Title

PanningTitleLayer

タイトルの表示とアニメーション化に使用されるパネル。

Items

PanningLayer

PanoramaItem コントロールを表示するレイヤー。

アプリケーションのいずれかのレイヤーでドラッグやパンが実行されると、3 つすべてのレイヤーが揃って移動します。

背景レイヤー

背景レイヤーは、Panorama コントロールの Background プロパティを使用して設定します。Panorama コントロールの Background を null に設定しないでください。null に設定すると、ジェスチャ応答が信頼できなくなります。既定のテンプレートで、Background は既定で Transparent に設定されています。

以下のブラシを適用することができます。

  • SolidColorBrush: 背景に色を適用します。

  • ImageBrush: 背景にイメージを適用します。

  • GradientBrush: 背景に線形または放射状ブラシを使用できます。

すべての背景ブラシは、Panorama コントロールの高さいっぱいまで上下に伸ばされます。ImageBrushImageSource の幅を保持し、GradientBrush は項目の幅いっぱいまで伸ばされます。

重要な注重要な注:

Panorama コントロールで背景のイメージを使用している場合、その [ビルド アクション] を [リソース] に設定する必要があります。そうしないと、アプリケーションが最初に表示される際に、イメージがすぐに表示されません。[ビルド アクション] を [コンテンツ] に設定すると、非同期でロードされます。

タイトル レイヤー

このレイヤーは、パノラマ アプリケーションのタイトルであり、Panorama コントロールの Title プロパティで設定します。このレイヤーが使用する垂直方向の高さは、サイズの超過したコンテンツがある場合やコンテンツが不足している場合でも関係なく一定になります。さらに、このレイヤーは、コンテンツのエッジを超えてパンした場合でも繰り返されません。代わりに、PanoramaItem コントロール間で選択が変更されると、レイヤーは、以前に移動していた方向で、表示領域の外側へアニメーションで移動し、画面の反対側からシーンに戻ってきます。

注注:

タイトルからテキストを削除すると、パディングがコントロールに残ります。必要な量だけのスペースで埋めるようにテンプレートのタイトルを改訂できます。ただし、これは Windows Phone の設計ガイドラインに従っていません。

項目レイヤー

項目レイヤーは、PanoramaItem コントロールを含むレイヤーです。これは、アプリケーションでユーザーが主に対話的に操作するレイヤーです。このレイヤーはパン ジェスチャーで 1:1 方式で移動するため、パンの開始時に指の下にあるどんなコンテンツでも、指が持ち上げられるまで留まります。

PanoramaItem コントロールは、Panorama コントロールに追加されるコンテンツの個々のセクションです。Panorama コントロールは複数の PanoramaItem コントロールをサポートでき、ユーザーはサポートされるタッチ ジェスチャーを使用してこれらのセクションを移動できます。PanoramaItem コントロール自体は 2 つの要素で構成されます。各要素は、PanoramaItem コントロールのレイアウト ルートとして機能する Grid コントロール内に含まれます。

  • Header

  • Content

要素

説明

Header

ContentControl

ヘッダーの表示とアニメーション化に使用される ContentControl。このヘッダーはオプションです。指定しない場合、スペースは確保されず、折りたたまれます。

Content

ContentPresenter

PanoramaItem コンテンツを表示する ContentPresenter

PanoramaItem コントロールのコンテンツは XAML コードで指定するか、プログラムでその Content プロパティによって追加できます。

PanoramaItem コントロールは水平と垂直の両方の向きをサポートしています。次に、これらの向きの特徴を示します。

  • PanoramaItem コントロールの垂直の向きは、ジェスチャー動作時に、画面の左側にのみスナップされます。

  • PanoramaItem コントロールの水平の向きは、ジェスチャー動作時に、画面の左側と右側の両方にスナップされます。

  • PanoramaItem コントロールを水平の向きに設定すると、コンテンツはクリップされずに、画面から外れて配置されます。

  • 垂直の向きと異なり、水平の向きでは、ユーザーが新しい PanoramaItem コントロール ビューにスナップすることなく、中央のコンテンツを中心にパンできます。

表示: