Windows UI 中的陰影

2024-03-19

DropShadow 類別提供建立可設定陰影的方法，這些陰影可以套用至 SpriteVisual 或 LayerVisual (Visuals 的子樹)。如同視覺層中的物件慣例，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 的形狀：

使用預設值 - 根據預設，DropShadow 形狀是由 CompositionDropShadowSourcePolicy 上的 'Default' 模式所定義。如果是 SpriteVisual，除非提供遮罩，否則預設值為矩形。如果是 LayerVisual，預設值是使用視覺效果的筆刷透明度來繼承遮罩。
設定遮罩 – 您可以設定 Mask 屬性來定義陰影的不透明度遮罩。
指定使用繼承的遮罩 – 將 SourcePolicy 屬性設定為使用 CompositionDropShadowSourcePolicy。 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 屬性使用具有透明度的筆刷。

在下列範例中，我們會載入兩個介面 - 一個用於視覺效果內容，另一個用於陰影遮罩：

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);

XAML 中的陰影

如果您想要將陰影新增至更複雜的架構元素，有幾種方式可交互操作 XAML 和組合來處理陰影：

使用 Windows 社群工具組提供的 DropShadowPanel。請參閱 DropShadowPanel 文件，了解其使用方法的詳細資訊。
建立視覺效果來當成陰影託管者，並將其繫結至 XAML 講義視覺效果。
使用組合範例庫的 SamplesCommon 自訂 CompositionShadow 控制項。如需使用方式，請參閱這裡的範例。

效能

雖然視覺層有許多立即可用的最佳化方式，能讓效果兼具效率與可用性，但根據所設定的選項，產生陰影可能成為相對高昂的作業。以下是不同類型陰影的高階「成本」。請注意，雖然某些陰影可能很高昂，但仍可能在某些案例中適合節約地使用。

陰影特性	成本
矩形	低
Shadow.Mask	高
CompositionDropShadowSourcePolicy.InheritFromVisualContent	高
靜態模糊半徑	低
以動畫顯示模糊半徑	高