コンポジションのシャドウ

DropShadow クラスは、SpriteVisual または LayerVisual (ビジュアルのサブツリー) に適用できる構成可能なシャドウを作成する手段を提供します。 ビジュアル レイヤーのオブジェクトの場合と同様に、DropShadow のすべてのプロパティは CompositionAnimations を使用してアニメーション化できます。

基本のドロップシャドウ

基本的なシャドウを作成するには、新しい DropShadow を作成してビジュアルに関連付けるだけです。 影は既定で四角形です。 標準のプロパティ セットを使用して、影の外観を調整できます。

var basicRectVisual = _compositor.CreateSpriteVisual();
basicRectVisual.Brush = _compositor.CreateColorBrush(Colors.Blue);
basicRectVisual.Offset = new Vector3(100, 100, 20);
basicRectVisual.Size = new Vector2(300, 300);

var basicShadow = _compositor.CreateDropShadow();
basicShadow.BlurRadius = 25f;
basicShadow.Offset = new Vector3(20, 20, 20);

basicRectVisual.Shadow = basicShadow;

影の整形

DropShadow の図形を定義するには、いくつかの方法があります。

• 既定値を使用する - 既定では、DropShadow 図形は CompositionDropShadowSourcePolicy の "既定" モードで定義されます。 SpriteVisual の場合、マスクが指定されていない限り、既定値は四角形です。 LayerVisual の場合、既定値はビジュアルのブラシのアルファを使用してマスクを継承します。
• マスクを設定 する – マスク プロパティを設定して、影の不透明度マスクを定義できます。
• 継承マスクを使用するように指定 – CompositionDropShadowSourcePolicy を使用するように SourcePolicy プロパティを設定します。 InheritFromVisualContent: ビジュアルのブラシのアルファから生成されるマスクを利用します。

コンテンツに合わせてマスキングする

シャドウをビジュアルのコンテンツと一致させる場合は、シャドウ マスク プロパティにビジュアルのブラシを使用するか、コンテンツからマスクを自動的に継承するようにシャドウを設定します。 LayerVisual を使用している場合、影は既定でマスクを継承します。

var imageSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/myImage.png"));
var imageBrush = _compositor.CreateSurfaceBrush(imageSurface);

var imageSpriteVisual = _compositor.CreateSpriteVisual();
imageSpriteVisual.Size = new Vector2(400,400);
imageSpriteVisual.Offset = new Vector3(100, 500, 20);
imageSpriteVisual.Brush = imageBrush;

var shadow = _compositor.CreateDropShadow();
shadow.Mask = imageBrush;
// or use shadow.SourcePolicy = CompositionDropShadowSourcePolicy.InheritFromVisualContent;
shadow.BlurRadius = 25f;
shadow.Offset = new Vector3(20, 20, 20);

imageSpriteVisual.Shadow = shadow;

代替マスクの使用

場合によっては、ビジュアルのコンテンツと一致しないように影を形成することが必要な場合があります。 この効果を実現するには、アルファ付きのブラシを使用して Mask プロパティを明示的に設定する必要があります。

次の例では、ビジュアル コンテンツ用とシャドウ マスク用の 2 つのサーフェスを読み込みます。

var imageSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/myImage.png"));
var imageBrush = _compositor.CreateSurfaceBrush(imageSurface);

var circleSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/myCircleImage.png"));
var customMask = _compositor.CreateSurfaceBrush(circleSurface);

var imageSpriteVisual = _compositor.CreateSpriteVisual();
imageSpriteVisual.Size = new Vector2(400,400);
imageSpriteVisual.Offset = new Vector3(100, 500, 20);
imageSpriteVisual.Brush = imageBrush;

var shadow = _compositor.CreateDropShadow();
shadow.Mask = customMask;
shadow.BlurRadius = 25f;
shadow.Offset = new Vector3(20, 20, 20);

imageSpriteVisual.Shadow = shadow;

アニメーション

ビジュアル レイヤーの標準と同様に、DropShadow プロパティはコンポジション アニメーションを使用してアニメーション化できます。 以下では、上のスプリンクル サンプルのコードを変更して、影のぼかし半径をアニメーション化します。

ScalarKeyFrameAnimation blurAnimation = _compositor.CreateScalarKeyFrameAnimation();
blurAnimation.InsertKeyFrame(0.0f, 25.0f);
blurAnimation.InsertKeyFrame(0.7f, 50.0f);
blurAnimation.InsertKeyFrame(1.0f, 25.0f);
blurAnimation.Duration = TimeSpan.FromSeconds(4);
blurAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
shadow.StartAnimation("BlurRadius", blurAnimation);

WinUI XAML のシャドウ

より複雑なフレームワーク要素にシャドウを追加する場合は、WinUI XAML とコンポジションの間でシャドウと相互運用する方法がいくつかあります。

1. CommunityToolkit.WinUI パッケージで使用できる DropShadowPanel を使用します。
2. シャドウ ホストとして使用するビジュアルを作成し、XAML ハンドオフ ビジュアルに関連付けます。
3. コンポジション サンプル ギャラリーの SamplesCommon カスタム CompositionShadow コントロールを使用します。 使用方法については、この例を参照してください。

パフォーマンス

ビジュアル レイヤーには効果を効率的かつ使用可能にするために多くの最適化が行われますが、シャドウの生成は、設定したオプションによっては比較的コストのかかる操作になる可能性があります。 次に、さまざまな種類のシャドウの高レベルの "コスト" を示します。 特定の影は高価な場合もありますが、特定のシナリオでは慎重に使用するのが適切な場合があることに注意してください。

影の特性	Cost
長方 形	低
Shadow.Mask	High
CompositionDropShadowSourcePolicy.InheritFromVisualContent	High
静的ぼかし半径	低
ぼかし半径をアニメーション化する	High

その他のリソース

• Composition DropShadow API
• WindowsCompositionSamples GitHub リポジトリ