Kompoziční stíny

DropShadow třída poskytuje způsob vytvoření konfigurovatelné stínu, který lze použít na SpriteVisual nebo LayerVisual (podstrom vizuálů). Stejně jako u objektů ve vizuální vrstvě mohou být všechny vlastnosti DropShadow animované pomocí CompositionAnimations.

Základní stín

Pokud chcete vytvořit základní stín, jednoduše vytvořte nový DropShadow a přidružte ho k vizuálu. Stín je ve výchozím nastavení obdélníkový. K dispozici je standardní sada vlastností pro vylepšení vzhledu a chování vašeho stínu.

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;

Tvarování stínu

Existuje několik způsobů, jak definovat obrazec pro DropShadow:

• Použijte výchozí nastavení – Ve výchozím nastavení je obrazec DropShadow definován režimem Default ve CompositionDropShadowSourcePolicy. Pro SpriteVisual je výchozí obdélníkový, pokud není k dispozici maska. Pro LayerVisual je výchozí možností zdědit masku využitím alfa kanálu štětce vizuálu.
• Nastavte masku – Vlastnost Maska můžete nastavit tak, aby definovala masku neprůhlednosti stínu.
• Zadejte pro použití zděděné masky – Nastavte Vlastnost SourcePolicy pro použití CompositionDropShadowSourcePolicy. InheritFromVisualContent použít masku vygenerovanou z alfa štětce vizuálu.

Maskování podle obsahu

Pokud chcete, aby stín odpovídal obsahu vizuálu, můžete použít štětec vizuálu pro vlastnost Stínová maska nebo nastavit stín tak, aby automaticky dědil masku z obsahu. Pokud používáte LayerVisual, stín ve výchozím nastavení zdědí masku.

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;

Použití alternativní masky

V některých případech můžete chtít upravit stín tak, aby neodpovídal obsahu vizuálu. K dosažení tohoto efektu budete muset explicitně nastavit vlastnost Mask pomocí štětce s alfa.

V následujícím příkladu načteme dva povrchy – jeden pro vizuální obsah a druhý pro stínovou masku:

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;

Animace

Stejně jako u vizuální vrstvy můžou být vlastnosti DropShadow animované pomocí animací složení. Níže upravíme kód z výše uvedeného vzorku sprinkles, abychom animovali poloměr rozostření stínu.

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

Stíny v jazyce WinUI XAML

Pokud chcete přidat stín do složitějších prvků architektury, existuje několik způsobů spolupráce se stíny mezi WinUI XAML a Composition:

1. Použijte AttachedCardShadow dostupný v balíčku CommunityToolkit.WinUI.Media .
2. Vytvořte Visual, který se použije jako stínový hostitel, a propojte ho s Visual ve formátu XAML.
3. Použijte vlastní ovládací prvek CompositionShadow galerie ukázek SamplesCommon. Podívejte se na příklad použití.

výkon

I když má vizuální vrstva řadu optimalizací, aby efekty byly efektivní a použitelné, generování stínů může být poměrně náročná operace v závislosti na tom, jaké možnosti nastavíte. Níže jsou uvedeny obecné "náklady" pro různé typy stínů. Mějte na paměti, že i když některé stíny mohou být nákladné, mohou být stále vhodné používat střídmě v určitých scénářích.

Další zdroje

• Kompoziční API DropShadow
• Úložiště WindowsCompositionSamples na GitHubu