Kompozíciós árnyékok

A DropShadow osztály egy konfigurálható árnyék létrehozására szolgál, amely a SpriteVisual vagy a LayerVisual (vizualizációk részhalmaza) esetében alkalmazható. A Visual Layer objektumaihoz hasonlóan a DropShadow összes tulajdonsága is animálható a CompositionAnimations használatával.

Alap vetett árnyék

Alapszintű árnyék létrehozásához egyszerűen hozzon létre egy új DropShadow-t, és társítsa azt a vizualizációhoz. Az árnyék alapértelmezés szerint téglalap alakú. Az árnyék megjelenésének és hangulatának finomhangolásához standard tulajdonságok állnak rendelkezésre.

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;

Az árnyék alakítása

A DropShadow alakzatát többféleképpen is definiálhatja:

• Az alapértelmezett beállítás használata – Alapértelmezés szerint a DropShadow alakzatot a CompositionDropShadowSourcePolicy "Alapértelmezett" módja határozza meg. A SpriteVisual esetében az alapértelmezett érték téglalap, kivéve, ha maszk van megadva. A LayerVisual esetében az alapértelmezett beállítás a maszk öröklése a vizualizáció ecsetének alfajával.
• Maszk beállítása – Beállíthatja a Maszk tulajdonságot, hogy definiáljon egy átlátszatlansági maszkot az árnyékhoz.
• Adja meg az örökölt maszk használatát – Állítsa be a SourcePolicy tulajdonságot a CompositionDropShadowSourcePolicy használatára. InheritFromVisualContent a vizualizáció ecsetének alfajából létrehozott maszk használatára.

Maszkolás a tartalomnak megfelelően

Ha azt szeretné, hogy az árnyék megfeleljen a Vizualizáció tartalmának, használhatja a Vizualizáció ecsetét az Árnyékmaszk tulajdonsághoz, vagy beállíthatja, hogy az árnyék automatikusan örökölje a maszkot a tartalomtól. LayerVisual használata esetén az árnyék alapértelmezés szerint örökli a maszkot.

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;

Alternatív maszk használata

Bizonyos esetekben érdemes lehet úgy alakítani az árnyékot, hogy az ne egyezzen meg a vizualizáció tartalmával. A hatás eléréséhez egyértelműen be kell állítani a Maszk tulajdonságot egy alfa-csatornás ecsettel.

Az alábbi példában két felületet töltünk be : egyet a vizualizáció tartalmához, egyet az árnyékmaszkhoz:

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;

Animáció készítése

A Vizuális rétegben megszokott módon a DropShadow-tulajdonságok a kompozíciós animációk használatával animálhatók. Az alábbiakban módosítjuk a fenti szórásmintából származó kódot az árnyék elmosódási sugarának animálásához.

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

Árnyékok a WinUI XAML-ben

Ha árnyékot szeretne hozzáadni az összetettebb keretrendszerelemekhez, többféleképpen is összekapcsolhatja az árnyékokat a WinUI XAML és a Composition között:

1. Használja a CommunityToolkit.WinUI.Media csomagban elérhető AttachedCardShadow fájlt.
2. Hozzon létre egy vizualizációt árnyékgazdaként, és kösse hozzá az XAML hand-off Visualhoz.
3. Használja a Kompozíció mintagyűjtemény SamplesCommon egyéni CompositionShadow vezérlőjét. A használatról itt talál példát.

Teljesítmény

Bár a Visual Layer számos optimalizálással rendelkezik a hatékony és használható effektusok érdekében, az árnyékok létrehozása viszonylag költséges művelet lehet attól függően, hogy milyen beállításokat állított be. Az alábbiakban a különböző típusú árnyékok magas szintű "költségei" találhatók. Vegye figyelembe, hogy bár bizonyos árnyékok költségesek lehetnek, bizonyos helyzetekben még mindig célszerű lehet takarékosan használni őket.

További források

• Composition DropShadow API
• WindowsCompositionSamples GitHub-tároló