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
Utilizzare Azure AI Studio per testare i modelli AI
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Gestire i null nelle reactive form tipizzate di Angular
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Creazione di componenti personalizzati in React.js con Tailwind CSS
Utilizzare Tailwind CSS all'interno di React: primi componenti
Controllare gli accessi IP alle app con Azure Container Apps
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Usare lo spread operator con i collection initializer in C#
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Eseguire query verso tipi non mappati in Entity Framework Core
Inizializzare i container in Azure Container Apps
I più letti di oggi
- Utilizzare Docker Compose con Azure App Service
- Utilizzare QuickGrid di Blazor con Entity Framework
- Modernizzare le applicazioni WPF e Windows Forms con Blazor
- ASP 3 per esempi
- annunciato #netstandard 2.1. .NET Core lo supporterà a partire da #netcore3, così come le prossime versione di #xamarin, #mono e #unity.il supporto per #netfx 4.8, invece, non ci sarà. https://aspit.co/bq2
- Steel Style CheckBox per Silverlight 4.0