情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

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

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

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

 

AP_CoreCon_PanoAnatomyCon

このトピックは、次のセクションで構成されています。

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

レイヤー

説明

背景

PanningBackgroundLayer

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

Title (タイトル)

PanningTitleLayer

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

Items

PanningLayer

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

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

背景レイヤー

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

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

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

重要:重要:

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

タイトル レイヤー

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

メモメモ:

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

項目レイヤー

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

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

Elements

説明

Header

ContentControl

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

Content

ContentPresenter

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

PanoramaItem コントロールのコンテンツは、XAML コードで指定するか、または Content プロパティを使用してプログラムで追加することができます。

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

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

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

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

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

表示: