Ombreggiature di composizione

La classe DropShadow consente di creare un'ombreggiatura configurabile che può essere applicata a un oggetto SpriteVisual o LayerVisual (sottoalbero di oggetti visivi). Come è consuetudine per gli oggetti nel livello visivo, tutte le proprietà di DropShadow possono essere animate tramite CompositionAnimations.

Ombreggiatura di base

Per creare un'ombreggiatura di base, è sufficiente creare un nuovo DropShadow e associarlo all'oggetto visivo. L'ombreggiatura è rettangolare per impostazione predefinita. Un insieme standard di proprietà è disponibile per modificare l'aspetto della tua ombra.

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;

Modellare l'ombra

Esistono alcuni modi per definire la forma per dropShadow:

• Usa il valore predefinito : per impostazione predefinita la forma DropShadow è definita dalla modalità 'Default' in CompositionDropShadowSourcePolicy. Per SpriteVisual, il valore predefinito è Rettangolare a meno che non venga specificata una maschera. Per LayerVisual, il valore predefinito è ereditare una maschera usando il canale alpha del pennello visivo.
• Impostare una maschera : è possibile impostare la proprietà Mask per definire una maschera di opacità per l'ombreggiatura.
• Specificare per utilizzare la maschera ereditata : impostare la proprietà SourcePolicy per usare CompositionDropShadowSourcePolicy. InheritFromVisualContent per utilizzare la maschera generata dall'alpha del pennello grafico.

Mascheramento conforme al contenuto

Se vuoi che l'ombra corrisponda al contenuto dell'oggetto visivo, puoi usare il brush dell'oggetto visivo per la proprietà Maschera ombra oppure impostare l'ombra in modo che erediti automaticamente la maschera dal contenuto. Se si usa un LayerVisual, l'ombreggiatura erediterà la maschera per impostazione predefinita.

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;

Uso di una maschera alternativa

In alcuni casi, è possibile modellare l'ombra in modo che non corrisponda al contenuto visivo. Per ottenere questo effetto, è necessario impostare in modo esplicito la proprietà Mask usando un pennello con alfa.

Nell'esempio seguente vengono caricate due superfici, una per il contenuto visivo e una per la maschera ombreggiatura:

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;

Animazione

Come è standard nel livello visivo, le proprietà DropShadow possono essere animate usando animazioni di composizione. Di seguito modifichiamo il codice dell'esempio di "sprinkles" sopra per animare il raggio di sfocatura per l'ombra.

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

Ombreggiature in XAML WinUI

Per aggiungere un'ombreggiatura a elementi del framework più complessi, esistono due modi per interagire con le ombreggiature tra XAML WinUI e Composition:

1. Usare l'DropShadowPanel disponibile nel pacchetto CommunityToolkit.WinUI.
2. Creare un oggetto Visual da usare come host per l'ombreggiatura e collegarlo all'oggetto Visual di hand-off XAML.
3. Usa il controllo personalizzato CompositionShadow da SamplesCommon della Composition Sample Gallery. Vedere l'esempio qui per l'utilizzo.

Prestazioni

Anche se il livello visivo include molte ottimizzazioni per rendere gli effetti efficienti e utilizzabili, la generazione di ombre può essere un'operazione relativamente costosa a seconda delle opzioni impostate. Di seguito sono riportati i "costi" di alto livello per diversi tipi di ombre. Si noti che, anche se alcune ombre possono essere costose, potrebbero comunque essere appropriate per usare con moderazione in determinati scenari.

Caratteristiche dell'ombreggiatura	Cost
Rettangolare	Low
Maschera d'Ombra	Alto
CompositionDropShadowSourcePolicy.InheritFromVisualContent	Alto
Raggio sfocatura statica	Low
Animazione del raggio di sfocatura	Alto

Risorse aggiuntive

• API di composizione DropShadow
• WindowsCompositionSamples Repository GitHub