バージョン

xamCarouselPanel のパスで要素のスケールを変更

xamCarouselPanel コントロールによって、パス上の位置に基づいてパーセントで項目をスケールすることができます。スケーリングはレコードに 3D 効果を提供します。ScalingEffect は、 ScalingEffectsStops を含む ScalingEffectStopCollection (それぞれがオフセットとそのオフセットで適用する値を指定する) を定義する点で、その他のパスエフェクトに似ています。値は 0 から 10 に進むことができる小数のパーセントです。

CarouselViewSettings オブジェクトの UseScaling プロパティを True に設定することによってスケーリングを有効にします。この同じオブジェクトで、 ScalingEffectStopDirection プロパティを UseItemPath、Horizontal、または Vertical に設定します。

Note

このトピックは、 xamCarouselPanel をページに追加のタスクを完了していることが前提となります。

  1. ViewSettings オブジェクトを定義します。

XAML の場合:

<igWindows:XamCarouselPanel.ViewSettings>
        ...
</igWindows:XamCarouselPanel.ViewSettings>

  1. CarouselViewSettings オブジェクトを指定して、UseScaling プロパティを True に、ScalingEffectStopDirection プロパティを UseItemPath に設定します。

XAML の場合:

<igWindows:CarouselViewSettings ScalingEffectStopDirection="UseItemPath"
  UseScaling="True">
        ...
</igWindows:CarouselViewSettings>

  1. ScalingEffectStops オブジェクトを定義します。このオブジェクトには、ScalingEffectStopCollection と ScalingEffectStops が含まれます。3 つの ScalingEffectStops を作成します。

XAML の場合:

<igWindows:CarouselViewSettings.ScalingEffectStops>
        <igWindows:ScalingEffectStopCollection>
                <igWindows:ScalingEffectStop Offset="0" Value="2" />
                <igWindows:ScalingEffectStop Offset=".5" Value="1.1" />
                <igWindows:ScalingEffectStop Offset="1" Value=".1" />
        </igWindows:ScalingEffectStopCollection>
</igWindows:CarouselViewSettings.ScalingEffectStops>

  1. プロジェクトをビルドして実行します。以下の画像のように、パスを通過すると xamCarouselPanel 内の項目のサイズが大きくなります。

xamCarouselPanel のパスで要素のスケールを変更

関連トピック

パス エフェクトの概要

xamCarouselPanel のパスで項目の不透明効果を変更

xamCarouselPanel のパスで項目の傾斜効果を変更