Share via

ビューポートとコンテンツ

  • [アーティクル]

直接操作 では、 ビューポート、 コンテンツ 、 および連絡先 を使用して、UI の対話型要素を記述します。

ビューポートは、ユーザーの操作から入力を受信して処理できるウィンドウ内の領域です。 ビューポートは、エンド ユーザーが特定の時点 (コンテンツ クリップとも呼ばれます) に表示できるコンテンツの領域を表します。 ビューポートにはいくつかの関数があります。

  • 対話状態 (コンテンツを操作する準備ができた場合、コンテンツが操作中の場合、コンテンツが慣性アニメーションの場合など) を管理し、入力を出力変換にマップします。
  • これには、ユーザーの操作に応じて移動するコンテンツが含まれています。 これは、HTML div 要素 (スクロール)、パン可能リスト (Windows 8スタート画面)、または選択コントロールのポップアップ メニューです。

ビューポートは、 CreateViewport を呼び出すことによって作成されます。 1 つのウィンドウに複数のビューポートを作成して、豊富な UI エクスペリエンスを実現できます。

Content は、相互作用に応答して変換される要素を表します。 つまり、コンテンツは、ユーザーがパンまたはピンチするにつれて移動またはスケーリングされます。 コンテンツには次の 2 種類があります。

  • プライマリ コンテンツ は、入力操作と慣性に応答するビューポート内の 1 つの組み込み要素です。 プライマリ コンテンツはビューポートと同時に作成され、ビューポートに追加または削除することはできません。 スナップ ポイントを使用して、プライマリ コンテンツの動作をカスタマイズできます (後で説明します)。
  • セカンダリ コンテンツは、プライマリ コンテンツ のモーションを基準にして移動します。 セカンダリ コンテンツはビューポートとは別に作成され、ビューポートに追加または削除できます。 すべてのセカンダリ コンテンツ変換は、プライマリ コンテンツの変換に基づいて計算されます。 特定のルールを適用して、作成時に CLSID によって識別される要素の目的に基づいて変換の計算方法を変更できます。

パンの前後を示すこの図では、1 つの連絡先を使用してプライマリ コンテンツをパンしています。 ユーザーがパン インジケーター (セカンダリ コンテンツ) と直接対話していない場合でも、プライマリ コンテンツがパンされると、セカンダリ コンテンツは移動します。 これにより、ユーザーがパンした距離に関する視覚的な手掛かりが提供されます。

パンの前後を示す図

ビューポートの設定

ビューポートを作成した後。 操作構成を使用して動作を構成します。 操作構成では、パンなどの操作がサポートされている操作を指定します。

パンは 、ユーザーがパンする際に、水平軸または縦軸、またはその両方に沿ってコンテンツの位置を変更します。 両方の軸に平行移動を構成すると、コンテンツは任意の方向に自由に移動します。

コンテンツの動きを制限するには、 レールを構成します。通常は横軸と縦軸の両方に配置します。 ユーザーの操作が主に 1 つの軸に沿っている場合 (次の図の青い領域で表されます)、パンは 手すり になり、コンテンツは手すり軸にのみ沿って移動します。 ユーザーがパンを行い、現在手すりが設定されていて、コンテンツが慣性状態にある間に 2 番目のパンを実行した場合、新しいパンは引き続き手すりが適用されます。

手すりパンのビューポート内のコンテンツを示す図

例: ビューポートは、水平および垂直パン用に構成されています。 最初のフレームでは、接触が停止します。 2 つ目では、垂直パンが開始され、接触が垂直レールにロックされます。 最後に、パンを手すりにすると、斜めパンの垂直コンポーネントのみがコンテンツの移動に使用されます。

ユーザーがレール検出領域 (白い領域) にない方法で斜めにパンすると、パンは 未レール になり、コンテンツは両方の軸で自由に移動します。

未レールのパン内を移動するコンテンツを示す図

ズームすると 、ユーザーがピンチまたはストレッチを行う際にコンテンツのスケール ファクターが変更されます。 コンテンツが拡大縮小されるポイント (ズーム センターと呼ばれます) は、連絡先の中心にあります。 水平方向または垂直方向の配置を設定した場合、ズーム センターは配置を維持するように変更されます。

配置が指定されたコンテンツのズームを示す図

この動作をオーバーライドするには、ロック解除センターを指定します。これにより、連絡先の中心にズームセンターが設定されます。

ズーム センターのロックが解除されたコンテンツのズームを示す図

慣性 は、すべての連絡先が持ち上げられた後 (タッチの場合)、またはキーボード/マウス入力 (スクロール バーのクリック、矢印キーの押下など) 後に、パンとズームの両方の操作が徐々に減速することです。 ユーザーがコンテンツを操作しても、連絡先が離された直後に操作が停止することはありません。 代わりに、コンテンツは現在の方向と速度で続行され、停止まで徐々に遅くなります。

ポイントと境界をスナップする

慣性アニメーションは、指が画面から離された結果 (タッチの場合) またはキーボード/マウス 操作 (方向キー、ページアップ/ダウン、マウス ホイールスクロールなど) の結果として、操作が終了した後に実行されます。

慣性アニメーションを定義する情報は 2 つあります。

  • アニメーションの残りのポイント – 特定の変換コンポーネントの最終的な終了位置。
  • アニメーションの継続時間、曲線、速度 – これらは、残り点の種類によって決まります。

慣性アニメーションは、スナップポイントと境界の影響を受けます。 境界は、コンテンツの最大および最小の休憩ポイントを指定します。 慣性時にコンテンツが境界に到達すると、境界アニメーションが適用されます。 スナップ ポイントは、静止点を変更し、慣性アニメーション カーブ自体を変更するために、プライマリ コンテンツで定義されます。

コンテンツが定期的に間隔を置いている場合は SetSnapInterval 、コンテンツの間隔が均等でない場合は SetSnapPoints を使用してスナップポイントを定義します。 スナップポイントの例を次に示します。

コンテンツに設定されたスナップ ポイントがパンに与える影響を示す図

図には、一連のサブコンテンツ ブロック (ニュース リーダー タイプ アプリのニュース アイテム、またはグリッド ビュー内のアイテム) を含むコンテンツがあります。 目的は、慣性が終了した後、項目の左端をビューポートの左端にスナップすることです。

スナップ ポイントの種類には、次の 2 つのグループがあります。

  • 省略可能と必須: 省略可能なスナップ ポイントは、慣性の静止点がスナップ ポイントの近くにある場合にのみ慣性アニメーションをスナップします。 必須のスナップ ポイントは、慣性アニメーションを常に指定されたスナップ ポイントにスナップします。
  • 単一と複数: 複数のスナップ ポイントタイプを使用すると、コンテンツは、自然な静止点に近いスナップポイントで休憩に入る前に、多くのスナップポイントを越えて移動できます。 1 つのスナップ ポイントタイプは、慣性アニメーションの残り点として次に近いスナップポイントを選択します。

次の図は、スナップ ポイントの種類によって慣性アニメーションの残りの位置がどのように変更されるかを示しています。

慣性点とスナップ 点がどのように相互作用するかを示す図

この図では、慣性開始点は "Start" とラベル付けされ、スナップ ポイントがない場合の自然慣性終了位置は "End" とラベル付けされています。 垂直線は、さまざまなスナップポイントをマークします。 次の表では、各種類のスナップ ポイントがアニメーションの終了位置にどのように影響するかを示します。

ポイントの種類 説明
必須の単一 慣性方向の最初のスナップ ポイントであるため、スナップ ポイント P1 が選択されます
必須の複数 スナップ 点 P2 は慣性方向の終点に最も近いために選択されます
省略可能な単一 慣性時に最初に発生したスナップ ポイントであるため、スナップ ポイント P1 が選択されます
省略可能な複数 スナップ ポイント P2 は、自然な終点に近いために選択されます

スナップ ポイント オフセットと RTL のシナリオ

rtl スナップ ポイントの使用を示す図

SetSnapCoordinate API を使用してスナップ ポイントオフセットと座標系を適用します。これは、指定されたオフセット/座標系を使用してすべてのスナップポイントまたはスナップ間隔をオフセットします。

座標系は、コンテンツの左端からのスナップ ポイントを逆方向に記述する RTL シナリオで非常に便利です。 前の図では、 SetSnapCoordinate を DIRECTMANIPULATION_MOTION_TRANSLATEX フラグと DIRECTMANIPULATION_COORDINATE_MIRRORED フラグと共に使用します。これにより、コンテンツの左端からスナップ ポイントが自動的にオフセットされ、右から左の順序で提供されます。S1 は 0px、S2 は 50px (など) です。 SetSnapCoordinate を使用して設定されたオフセットは、正しいスケール ファクターを含め、コンテンツのこの左端から自動的にオフセットされます。

コンテンツ領域の外側にスナップ ポイントを設定しないようにするには、ほとんどの場合、原点パラメーターを設定して SetSnapCoordinate を使用します。

たとえば、ビューポートが 200x200 でコンテンツが 1000x200 で、インターフェイスが RTL の場合、ビューポートが最初に表示されるときに、ビューポートの左端は x=800 になります。 を指定して SetSnapCoordinateSetSnapCoordinate(DIRECTMANIPULATION_MOTION_TRANSLATEX, DIRECTMANIPULATION_COORDINATE_MIRRORED, 1000.0) を呼び出し、コンテンツの右端から開始して、スナップ ポイントを右から左の順序で計算するように指定します。

動作

ビヘイビアーは、ビューポートのプライマリ コンテンツまたはセカンダリ コンテンツの出力変換を直接操作で処理する方法を変更するためにビューポートにアタッチできるオブジェクトです。 動作オブジェクトは、入力の処理方法や慣性アニメーションの適用方法など、操作の 1 つ以上の側面に影響を与える可能性があります。 たとえば、自動スクロール動作は、プライマリ コンテンツの一方の端に向かってスクロール アニメーションを実行することで慣性アニメーションに影響します。 クロススライド構成の動作は、クロススライド アクションがいつ実行されているかを検出する直接操作入力処理に影響します。

動作オブジェクトは、 CreateBehavior を呼び出して作成され、ビューポートに追加され、その動作が非同期に構成されます。 ビューポートから動作を削除すると、その効果が削除されます。

[座標系]

直接操作では、次の 3 つのメイン座標系が使用されます。

  • クライアント座標系 - クライアント ウィンドウの四角形を表します。 単位はピクセル単位です。
  • ビューポート座標系 - 入力を処理できるクライアント内の領域の四角形を記述します。 単位はアプリケーション定義です ( SetViewportRect を使用)。
  • コンテンツ座標系 - プライマリ コンテンツの四角形またはサイズを表します。 単位はアプリケーション定義です ( SetContentRect を使用)。

3 つのシステムすべてについて、座標はそれぞれの左上の原点に対して相対的に定義され、右と下に正の増加を示します。 これらの座標系を次の図に示します。 エンド ユーザーが表示または操作できるのは、ビューポートの四角形内のコンテンツのセクションのみです。

コンテンツ、クライアント、ビューポートの座標がどのように相互作用するかを示す図

変換

直接操作では 、表示される出力全体に寄与するいくつかの異なる変換が維持されます。

  • コンテンツ変換 – 操作または慣性に基づいて 直接操作 によって計算される初期変換。 スナップ ポイント、手すり、既定のオーバースパン (操作)、既定のオーバーバウンス (慣性)、ZoomToRect アニメーションの効果をキャプチャします。
  • 出力変換 - 最終的なビジュアル変換または出力変換。 これは、コンテンツと同期変換の両方の組み合わせです。
  • 同期変換 – SyncContentTransform を呼び出すときに計算されます。 直接操作は、アプリケーションによって提供される新しいコンテンツ変換を適用しながら、既存の出力変換も維持するのに役立ちます。
  • 表示変換 – 後処理の一部としてアプリケーションによって適用されます。 詳細については、「 SyncDisplayTransform 」を参照してください。

出力変換は画面の表面を視覚的にオフセットすることを目的としているため、 直接操作 では、テキストやその他のコンテンツが常に整数ピクセル境界でレンダリングまたは合成されるように、出力変換コンポーネントに対して必要な丸めを実行します。 丸め機構は、モーションの速度やリモート デスクトップの存在など、複数の要因に依存します。 セカンダリ コンテンツの丸めメカニズムは、2 つの間の動きの違いを考慮しながら、プライマリ コンテンツの丸めメカニズムと一致します。 GetOutputTransform のクライアントは、さまざまな要因が影響を受けるので、出力変換の正確な丸めメカニズムに依存しないでください。

注意

つまり、コンテンツ変換のコンポーネントは整数ではなく、サブピクセル オフセットを含む場合があります。 直接操作を使用するクライアントは、GetOutputTransform を使用して、手動更新モードを使用するときにコンテンツに適用する適切なビジュアル変換を計算することをお勧めします。 組み込みのコンポジターを使用して自動更新モードを使用する場合、Direct Manipulation はクライアントの代わりにこの変換を自動的に適用します。 この変換は、ビジュアル出力を作成するときに視覚的に満足できる結果を確保するために、直接操作によって生成されます。

ビューポートの状態

入力が処理されると、ビューポートは入力と出力変換の相互作用の状態とマッピングを管理します。 GetStatus を呼び出して、ビューポートの相互作用の状態を確認します。

directmanipulation 相互作用の状態を示す図

  • ビルド – ビューポートは作成中であり、入力を処理できません。 入力を処理するには、 IDirectManipulationViewport::Enable を呼び出します。 Enable が呼び出されない場合、ビューポートは Disabled 状態になります。

    注意

    これは、対話の初期状態です。

  • 有効 – ビューポートは入力を処理する準備ができています。 接触が停止し (SetContact が呼び出される)、操作が検出されると、ビューポートは [実行中] に遷移します。

  • 実行中 – ビューポートは現在、入力を処理し、コンテンツを更新しています。 接触を持ち上げると、ビューポートは慣性 (構成されている場合) に遷移します。

  • 慣性 – コンテンツは慣性アニメーションで移動しています。 慣性が完了すると、ビューポートは Ready に遷移します。 ビューポートで自動無効化が設定されている場合は、[慣性] から [準備完了]、[無効] に切り替わります。

  • 準備完了 – ビューポートは入力を処理する準備ができています。 接触が停止し (SetContact が呼び出される)、操作が検出されると、ビューポートは [実行中] に遷移します。

  • 中断 – 入力が SetContact チェーン内の親に昇格されると、ビューポートが中断状態になる可能性があります。 これについては、 ヒット テストとビューポート階層という複数のビューポートで詳しく説明します。

  • 無効 – ビューポートは入力を処理したり、コールバックを行ったりしません。 ビューポートは、 IDirectManipulationViewport::D isable を呼び出すことによって、さまざまな状態から無効にすることができます。 ビューポートで自動無効化が設定されている場合、操作の処理後に自動的に無効に切り替わります。 無効なビューポートを再度有効にするには、 IDirectManipulationViewport::Enable を呼び出します。

複数のビューポート: ヒット テストとビューポート階層、 ActivateConfiguration、 GetOutputTransform、 SyncDisplayTransform