Kompositionsskugga

Klassen DropShadow ger möjlighet att skapa en konfigurerbar skugga som kan tillämpas på en SpriteVisual eller LayerVisual (underträd för visuella objekt). Som brukligt för objekt i det visuella lagret kan alla egenskaper för DropShadow animeras med hjälp av CompositionAnimations.

Grundläggande skugga

Skapa en grundläggande skugga genom att skapa en ny DropShadow och associera den med ditt visuella objekt. Skuggan är rektangulär som standard. En standarduppsättning egenskaper är tillgängliga för att justera utseendet och känslan av din skugga.

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;

Forma skuggan

Det finns några sätt att definiera formen för din DropShadow:

• Använd standardvärdet – Som standard definieras formen DropShadow av standardläget i CompositionDropShadowSourcePolicy. För SpriteVisual är standardläget rektangulärt om inte en mask tillhandahålls. För LayerVisual är standard att ärva en mask genom att använda alfa för den visuella penseln.
• Ange en mask – Du kan ange egenskapen Mask för att definiera en ogenomskinlig mask för skuggan.
• Ange att du vill använda ärvd mask – Ange egenskapen SourcePolicy för att använda CompositionDropShadowSourcePolicy. InheritFromVisualContent för att använda masken som genereras från alfa i det visuella objektets pensel.

Maskering för att matcha ditt innehåll

Om du vill att din skugga ska matcha det visuella objektets innehåll kan du antingen använda det visuella objektets pensel för egenskapen Shadow mask eller ställa in att skuggan automatiskt ärver masken från innehållet. Om du använder en LayerVisual ärver skuggan masken som standard.

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;

Använda en alternativ mask

I vissa fall kanske du vill forma skuggan så att den inte matchar ditt visuella objekts innehåll. För att uppnå den här effekten måste du uttryckligen ange egenskapen Mask med hjälp av en pensel med alfa.

I exemplet nedan läser vi in två ytor – en för det visuella innehållet och en för skuggmasken:

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;

Animera

Som standard i det visuella lagret kan DropShadow-egenskaper animerads med hjälp av kompositionsanimationer. Nedan ändrar vi koden från sprinkles-exemplet ovan för att animera oskärperadien för skuggan.

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

Skuggor i WinUI XAML

Om du vill lägga till en skugga på mer komplexa element i ramverket finns det ett par sätt att samverka med skuggor mellan WinUI XAML och Composition.

1. Använd det DropShadowPanel som är tillgängligt i CommunityToolkit.WinUI-paketet.
2. Skapa ett visuellt objekt som ska användas som skuggvärd och koppla det till det visuella XAML-hand-off-objektet.
3. Använd kompositionsexempelgalleriets samplesCommon custom CompositionShadow-kontroll. Se exemplet här för användning.

Resultat

Även om det visuella lagret har många optimeringar på plats för att göra effekterna effektiva och användbara, kan det vara en relativt dyr åtgärd att generera skuggor beroende på vilka alternativ du anger. Nedan visas "kostnader" på hög nivå för olika typer av skuggor. Observera att även om vissa skuggor kan vara dyra kan de fortfarande vara lämpliga att använda sparsamt i vissa scenarier.

Ytterligare resurser

• DropShadow-API för sammansättning
• WindowsCompositionSamples GitHub-repo