Komposisi bayangan

Kelas DropShadow menyediakan sarana untuk membuat bayangan yang dapat dikonfigurasi yang dapat diterapkan ke SpriteVisual atau LayerVisual (subtree Of Visuals). Seperti biasa untuk objek di Lapisan Visual, semua properti DropShadow dapat dianimasikan menggunakan CompositionAnimations.

Bayangan dasar

Untuk membuat bayangan dasar, cukup buat DropShadow baru dan kaitkan dengan visual Anda. Bayangan berbentuk persegi panjang secara default. Sekumpulan properti standar tersedia untuk mengubah tampilan dan nuansa bayangan Anda.

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;

Membentuk bayangan

Ada beberapa cara untuk menentukan bentuk untuk DropShadow Anda:

• Gunakan default - Secara default bentuk DropShadow ditentukan oleh mode 'Default' pada CompositionDropShadowSourcePolicy. Untuk SpriteVisual, standarnya adalah persegi panjang kecuali jika masker disediakan. Untuk LayerVisual, Defaultnya adalah mewarisi masker menggunakan alfa kuas visual.
• Atur masker - Anda dapat mengatur properti Masker untuk menentukan masker opasitas untuk bayangan.
• Tetapkan untuk menggunakan Masker Turunan – Atur properti SourcePolicy untuk menggunakan CompositionDropShadowSourcePolicy. InheritFromVisualContent untuk menggunakan masker yang dihasilkan dari alfa kuas visual.

Masking yang sesuai dengan konten Anda

Jika Anda ingin bayangan Anda cocok dengan konten Visual, Anda dapat menggunakan kuas Visual untuk properti Masker Bayangan Anda, atau mengatur bayangan untuk mewarisi masker secara otomatis dari konten. Jika menggunakan LayerVisual, bayangan akan mewarisi masker secara default.

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;

Menggunakan masker alternatif

Dalam beberapa kasus, Anda mungkin ingin membentuk bayangan sehingga tidak cocok dengan konten Visual Anda. Untuk mencapai efek ini, Anda harus mengatur properti Mask secara eksplisit menggunakan kuas yang memiliki alpha.

Dalam contoh di bawah ini, kami memuat dua permukaan - satu untuk konten Visual dan satu untuk masker Bayangan:

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;

Animasi

Seperti standar dalam Lapisan Visual, properti DropShadow dapat dianimasikan menggunakan Animasi Komposisi. Di bawah ini, kami memodifikasi kode dari sampel taburan di atas untuk menganimasikan radius kabur untuk bayangan.

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

Bayangan di WinUI XAML

Jika Anda ingin menambahkan bayangan ke elemen kerangka kerja yang lebih kompleks, ada beberapa cara untuk menginteropsi bayangan antara WinUI XAML dan Komposisi:

1. Gunakan yang DropShadowPanel tersedia dalam paket CommunityToolkit.WinUI.
2. Buat Visual untuk digunakan sebagai host bayangan dan hubungkan ke Visual hand-off XAML.
3. Gunakan kontrol Komposisi Kustom SamplesCommon dari Galeri Sampel Komposisi. Lihat contoh di sini untuk penggunaan.

Kinerja

Meskipun Visual Layer memiliki banyak pengoptimalan untuk membuat efek efisien dan dapat digunakan, menghasilkan bayangan bisa menjadi operasi yang relatif mahal tergantung pada opsi apa yang Anda tetapkan. Di bawah ini adalah 'biaya' tingkat tinggi untuk berbagai jenis bayangan. Perhatikan bahwa meskipun bayangan tertentu mungkin mahal, mereka mungkin masih sesuai untuk digunakan dengan hemat dalam skenario tertentu.

Karakteristik Bayangan	Biaya
Persegi panjang	Low
Bayangan.Topeng	High
KomposisiDropShadowSourcePolicy.InheritFromVisualContent	High
Radius Kabur Statis	Low
Radius Buram Animasi	High

Sumber Daya Tambahan

• API DropShadow Composition
• WindowsCompositionSamples GitHub Repo