CarouselViewSettings クラスでプロパティを使用すると、 パス に沿ってカルーセル項目が任意の位置に達したときにそれらのカルーセル項目に対して特別な視覚的効果を作成できます。これらのパス エフェクトは 3 次元に見えるように 2 次元のレイアウトをシミュレートすることになります。この技術を学習するのは非常に簡単で、ルネッサンス期以降芸術系の学生によって実践されています。項目がより遠く見えるように項目を小さくスケーリングし、水平のよく知られている消点に達した時に項目の不透明度を減らすことによって、アプリケーションの印象を強くする没入型のエンドユーザー エクスペリエンスを作り出すことができます。
CarouselViewSettings クラスにある多くの "Effects" 指向のプロパティを見ると、すべてのサポートされるパス エフェクトにいくつかの繰り返しプロパティがあることが分かります。パスへの効果適用に関連したこれらの原則を理解することは、すべてのパスエフェクトの使用でより大きな成功を収めることにつながります。CarouselViewSettings クラスが カルーセル ビュー で果たす主要な役割の詳細は、 アーキテクチャを参照してください。
留意する必要がある一般的な原則は以下のとおりです。
ストップ — パスの開始点の値は 0.0 で、パスの終了点の値は 1.0 です。パスが開始と終了がないかのように見える閉じた円形の場合であっても、Path.Data に指定する最初の点は開始点として扱われます。このパスに沿って任意の数のストップを指定することができ、これらのストップでパス エフェクトの値を変更できます。たとえば、ストップを 0.25、0.50、0.75、および 1.0 に指定するとします。これはこれらの点でパス エフェクトの値を変更できることを意味します。カルーセル項目がストップの間のパスに沿って移動すると、Value は線形に補間されます。これは、0 に 1.0、0.25 に 2.0 のスケールを指定する場合、カルーセル項目がパスに沿って 8 分の 1 (0.125) の時に、そのスケールは 1.5 で自動的に計算されるということを意味します。したがって、多数のストップを入力する必要はありません。ストップの地点に指定する Value の間のトランジションをなめらかにするために値自身が継続的に再計算を行うからです。代わりに、異なる割合で Value を変更したい、または Value を逆にしたい点にストップを配置すべきです。
ストップの方向 — パスは二次元に移動します。希望する場合には垂直に (y 軸に沿って) または水平に (x 軸に沿って) 相対的な位置に基づいて値をパス エフェクトと関連付けることができます。たとえば、カルーセル項目が画面で上下 (左右ではない) に移動する時に限って、パス エフェクト (スケーリングなど) が発生するように、垂直のストップの方向 (Vertical Stop Direction) を適用することができます。カルーセル項目がこの方向に移動することを利用すると、パスに沿ってカルーセル項目がどのくらい移動したのかを正確に計算することなく、垂直および水平の点で一貫したストップの値をより簡単に適用できます。より複雑なパスの場合、この計算は三角法を解く必要があります。
Using — あらゆるパス エフェクトは、効果を即座にオンまたはオフにすることができるように関連づけられた Using プロパティを持っています。これによって、パス エフェクトのストップ コレクション、 ストップの方向、そして Value を事前に定義することが可能となりますが、選択時までこれらの効果をアクティブ化しません。特定のパス エフェクトを有効にするには、その Using プロパティを True に設定するだけです。
すべてのパス エフェクトに適用する基本的な原則を理解したら、xamCarouselPanel によってサポートされるパス エフェクトとカルーセル ビューで情報を表示するために使用するコントロールに対する知識を高めるために時間を費やしてください。
以下はサポートされるパス エフェクトのリストです:
スケーリング — スケーリングによってカルーセル項目を拡大または縮小できます。この場合、1.0 未満の値はカルーセル項目のサイズ (縦と横) を小さくし、1.0 よりも大きい値はそのサイズを大きくします。スケーリング効果によってカルーセル項目を小さく表示することで、カルーセル対応のアプリケーションを経験する多数のエンド ユーザーにより「遠くにある」ように直感的に感じさせることができます。反対に、大きく表示するようにカルーセル項目をスケールすると、他の項目よりも近くにあるように見えます。ただし、実際的には背景にしようとするものの上に、より近く見えるように大きくスケールしたカルーセル項目を描画するために Z オーダー (以下に定義) が適切に設定されていることを確認します。スケーリングは不透明効果とも非常にうまく動作し、いくつかの洗練された傾斜効果と使用できます。
傾斜 — 傾斜によって x 軸または y 軸に沿って個々にまたは一緒にカルーセル項目の外観を斜めにすることができます。傾斜の値は円弧の角度で測定されます。したがって、360 度の Value によって項目を任意の方向に傾けると、項目をその元の外観に戻します。傾斜は -90 と 90 の間の Value を使用すると効果があります。90 度は直角で、傾斜の方向で時計回りの 4 分の 1 (Value が負の場合は反時計回り) に相当します。傾斜を使用して、動いている感じをより高める (カルーセル項目が「はぎ取られる」ような)、または時計回り (または反時計回り) の回転のようなより洗練された効果を実行することができます。x 軸と y 軸の両方で同じ角度だけ傾斜すると、カルーセル項目は時計回りに多数の角度回転します。
不透明 — 不透明は、オブジェクトがどのくらい不透明 (つまり見通すことができなくなる、透明の反対) になるのかを意味します。不透明の値が 0.0 の場合、カルーセル項目は完全に透明 (項目が見えなくなる) になり、不透明の値が 1.0 の場合、カルーセル項目が完全に不透明 (項目の背後にある物が見えなくなる) になります。これらの値の間は半透明で、カルーセル項目を通して表示される背景のパーセントを指定することになります。不透明効果を使用して、項目をフェードインまたはフェードアウトして表示する、消点の錯覚や完全な不透明へのなめらかなトランジションを作成する、提示するデータのリアル感を高めることができます。
Z-オーダー — Z-オーダーは、ひとつのカルーセル項目の前または背後にあるもうひとつのカルーセル項目の位置のことを指します。Z-オーダーは、カルーセル項目が WPF 描画エンジンによって描画される順序に影響を与えます。より遠くにある見えるようにスケール/透明の両方またはいずれか一方を適用した項目が、前景にしたいカルーセル項目の背後に必ず描画されるために、Z-オーダーとともに使用するその他のパス エフェクトを調整することは重要です。デフォルトで、 UseZOrder プロパティを False に設定します。これはカルーセル対応のコントロールにバインドされた項目のリストの最初に (早く) 表示する項目が背景にあり、項目リストの最後に (後で) 表示する項目が前景になることを意味します。
ViewSettings プロパティ上の適切なパス エフェクトのストップ コレクションに追加できるこれらのパス エフェクトに加えて、カルーセル項目がパスに近づくまたはパスから離れるときにスケーリング効果や不透明効果を適用する追加のメカニズムがあります。PathItemTransitionStyle 列挙体は、使用可能なパスエフェクトをリストします。これらは、パスの終端の「水平軸」に入るまたは「水平軸」から離れると項目が表示したり表示しなくなったりするトランジションの事例に特化しています。このトランジション領域は、パスの ItemPathPrefixPercent プロパティと ItemPathSuffixPercent プロパティによって定義されます。この特別な機能を活用するには、ViewSettings 上の ItemTransitionStyle プロパティに適切なトランジション スタイル列挙値を割り当てます。