組合陰影

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 形狀是由 CompositionDropShadowSourcePolicy 的「Default」模式定義。 SpriteVisual 的默認值是矩形，除非提供了遮罩。 對於 LayerVisual，預設是利用視覺筆刷的 alpha 繼承遮罩。
• 設置遮罩 – 你可以將遮罩屬性設為陰影的不透明遮罩。
• 指定使用繼承遮罩 – 將 SourcePolicy 屬性設定為使用 CompositionDropShadowSourcePolicy。 InheritFromVisualContent 來使用由視覺筆刷 alpha 產生的遮罩。

遮蔽以符合你的內容

如果你想讓陰影與視覺內容相符，可以使用視覺筆刷來設定陰影遮罩屬性，或者設定陰影自動從內容繼承遮罩。 如果使用 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;

使用替代遮罩

有時候，你可能想塑造陰影，使其與視覺效果的內容不一致。 要達成這個效果，你需要用帶有 alpha 的筆刷明確設定遮罩屬性。

在下面的範例中，我們載入兩個表面——一個用於視覺內容，一個用於陰影遮罩：

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 和 Composition 之間與陰影互通：

1. 請使用 CommunityToolkit.WinUI 套件中的選項 DropShadowPanel 。
2. 建立一個視覺化作為影子主機，並綁定到 XAML 的切換視覺化。
3. 請使用 Composition Sample Gallery 中的 SamplesCommon 自訂 CompositionShadow 控制。 請參考此處的使用範例。

績效

雖然視覺圖層有許多優化以提升效果效率與可用性，但產生陰影的操作可能相對昂貴，視你設定的選項而定。 以下是不同陰影類型的高階「成本」。 請注意，雖然某些陰影可能昂貴，但在某些情況下仍適合節制使用。

其他資源

• Composition DropShadow API
• WindowsCompositionSamples GitHub Repo