Realizzare effetti visuali nella Universal Windows Platform è piuttosto semplice, soprattutto se comparato con quanto codice eravamo tenuti a scrivere su WPF piuttosto che su WinForms. Tuttavia, realizzare effetti complessi, che magari richiedono coordinamento di animazioni, può avere grandi effetti collaterali a livello di performance, qualora i visual siano definiti come XAML: proprio per questo, è nato Windows Composition, ovvero un sistema basato sulle Composition API che garantisce alte performance con 60 frame per secondo nel rendering dei nostri effetti.
Uno degli effetti che possiamo vedere sfruttando, appunto, Windows Compoisition, è la realizzazione di un grandiente. Per prima cosa, è necessario creare un contenitore per il gradiente a livello di XAML:
<Grid x:Name="Container"></Grid>
Una volta definito l'oggetto che conterrà il visual, quindi il gradiente, dobbiamo andare a costruire l'oggetto compositor, ovvero quello che si occuperà di "parlare" a livello di GPU tramite le Compositor API per renderizzare l'effetto grafico, tramite il container appena creato:
var hostVisual = ElementCompositionPreview.GetElementVisual(Container); var root = hostVisual.Compositor.CreateContainerVisual(); ElementCompositionPreview.SetElementChildVisual(Container, root);
Ora siamo in grado, tramite le API di CompositionRadialGradientBrush introdotte da Windows 1903, di creare un effetto gradiente, in cui dobbiamo solamente specificare il colore che vogliamo vedere, per ogni passo (o Offset) del gradiente stesso:
CompositionRadialGradientBrush brush = root.Compositor.CreateRadialGradientBrush(); brush.ColorStops.Add(root.Compositor.CreateColorGradientStop(0, Colors.Red)); brush.ColorStops.Add(root.Compositor.CreateColorGradientStop(0.5f, Colors.Green)); brush.ColorStops.Add(root.Compositor.CreateColorGradientStop(1, Colors.Blue));
Infine, non ci resta che fare in modo che il brush creato sia visibile sul container, semplicemente aggiungendo il visual come uno dei figli:
var visual = root.Compositor.CreateSpriteVisual(); visual.Size = new Vector2(200, 200); visual.Brush = brush; root.Children.InsertAtTop(visual);
Il risultato così ottenuto sarà quindi il gradiente impostato.

Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare un Module Initializer in .NET 5
Creare un effetto di ombra sui controlli della Universal Windows Platform
Accedere da un App Service ad Azure SQL Database tramite AAD
Condividere una variabile tra job in una pipeline YAML di Azure DevOps
Creare automaticamente una relazione padre-figlio tra work item in Azure DevOps
Aggiungere il Microsoft Store come repository per winget
Tradurre in lingua contenuti HTML con i cognitive service
Point-in-time restore con gli Azure Storage Blob
Taggare automaticamente un team member in work item tramite Azure DevOps
Gestione dei token negli input di testo con la Universal Windows Platform
Creare un radio button per Blazor
Aggiungere una GIF in un'applicazione Xamarin Forms
I più letti di oggi
- Docker 101
- (My) DevOps story - from failure to success
- Modificare automaticamente la Wiki da una pipeline YAML con Azure DevOps
- DevOps per le applicazioni desktop
- Welcome to Container&DevOps Day!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Gestione dei token negli input di testo con la Universal Windows Platform
- Infrastructure as Code: ARM vs Terraform
- Effettuare il redirect da HTTP a HTTPS con la Azure CDN