Kompositionsschatten

Die DropShadow-Klasse bietet Mittel zum Erstellen eines konfigurierbaren Schattens, der auf eine SpriteVisual - oder LayerVisual -Struktur (Unterstruktur von Visuellen Elementen) angewendet werden kann. Wie für Objekte in der visuellen Ebene üblich, können alle Eigenschaften des DropShadow mithilfe von CompositionAnimations animiert werden.

Einfacher Schlagschatten

Um einen einfachen Schatten zu erstellen, erstellen Sie einfach einen neuen DropShadow, und ordnen Sie ihn Ihrem visuellen Element zu. Der Schatten ist standardmäßig rechteckig. Ein Standardsatz von Eigenschaften steht zur Verfügung, um das Aussehen und Verhalten Ihres Schattens zu optimieren.

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;

Gestalten des Schattens

Es gibt einige Möglichkeiten, das Shape für Ihren DropShadow zu definieren:

• Verwenden Sie die Standardeinstellung : Standardmäßig wird das DropShadow-Shape vom Modus "Standard" für CompositionDropShadowSourcePolicy definiert. Bei SpriteVisual ist der Standardwert rechteckig, es sei denn, es wird eine Maske bereitgestellt. Bei LayerVisual ist Standard die Vererbung einer Maske mithilfe des Alpha-Kanals des Visual-Pinsels des visuellen Elements.
• Festlegen einer Maske – Sie können die Mask-Eigenschaft festlegen, um eine Deckkraftmaske für den Schatten zu definieren.
• Geben Sie an, dass die geerbte Maske verwendet werden soll – Legen Sie die SourcePolicy-Eigenschaft fest, um CompositionDropShadowSourcePolicy zu verwenden. InheritFromVisualContent, um die aus dem Alpha des Grafikelements generierte Maske zu verwenden.

Maskieren, um den Inhalt abzugleichen

Wenn der Schatten dem Inhalt des visuellen Elements entsprechen soll, können Sie entweder den Pinsel des visuellen Elements für die Eigenschaft der Schattenmaske verwenden oder den Schatten so einstellen, dass die Maske automatisch vom Inhalt übernommen wird. Bei Verwendung eines LayerVisual-Elements erbt der Schatten standardmäßig die Maske.

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;

Verwenden einer alternativen Maske

In einigen Fällen sollten Sie den Schatten so gestalten, dass er nicht mit dem Inhalt Ihres Visuals übereinstimmt. Um diesen Effekt zu erzielen, müssen Sie die Mask-Eigenschaft explizit mithilfe eines Pinsels mit Alpha festlegen.

Im folgenden Beispiel laden wir zwei Oberflächen – eine für den visuellen Inhalt und eine für die Schattenmaske:

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;

Animieren

Wie standardmäßig auf der visuellen Ebene können Eigenschaften von DropShadow mithilfe von Kompositionsanimationen animiert werden. Unten ändern wir den Code aus dem obigen Sprinkles-Beispiel, um den Weichzeichnerradius für den Schatten zu animieren.

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

Schatten in WinUI XAML

Wenn Sie komplexeren Frameworkelementen einen Schatten hinzufügen möchten, gibt es eine Reihe von Möglichkeiten, mit Schatten zwischen WinUI XAML und Composition zu interopieren:

1. Verwenden Sie das DropShadowPanel im CommunityToolkit.WinUI-Paket verfügbare.
2. Erstellen Sie ein Visual, das als Schattenhost verwendet werden soll, und binden Sie es an das XAML-Handoff-Visual.
3. Verwenden Sie das benutzerdefinierte CompositionShadow-Steuerelement der Composition Sample Gallery SamplesCommon. Hier finden Sie das Beispiel für die Verwendung.

Leistung

Obwohl die visuelle Ebene viele Optimierungen aufweist, um Effekte effizient und nutzbar zu machen, kann das Generieren von Schatten ein relativ kostspieliger Vorgang sein, je nachdem, welche Optionen Sie festlegen. Nachfolgend finden Sie hohe "Kosten" für verschiedene Arten von Schatten. Beachten Sie, dass bestimmte Schatten zwar teuer sein können, aber dennoch sparsam in bestimmten Szenarien verwendet werden können.

Schattenmerkmale	Cost
Rechteckig	Niedrig
Schattenmaske	Hoch
CompositionDropShadowSourcePolicy.VomBildschirminhaltErben	Hoch
Statischer Weichzeichnerradius	Niedrig
Animieren des Weichzeichnerradius	Hoch

Zusätzliche Ressourcen

• Composition DropShadow-API
• WindowsCompositionSamples GitHub-Repository