Grafica e animazioni con le Composition API nella Universal Windows Platform
Viviamo in un mondo che, almeno tecnologicamente parlando,ha una evoluzione rapidissima.
Fino a pochissimi anni fa si trovavano applicazioni sviluppate in VB6 (senza l'utilizzo del .NET Framework) in cui, la presenza di un database era fondamentale. La procedura era sempre quella: prima si costruiva il database, poi veniva l'applicazione. Oggi l'approccio è esattamente l'opposto: prima viene progettata l'applicazione e, in secondo momento, la struttura del database, che magari non gestiamo direttamente, quindi dobbiamo fare finta che non esista.
In questo periodo, d'altro canto, ci stiamo muovendo verso un nuovo approccio, ovvero quello comunemente chiamato User Experience First (o anche del design first). E' fondamentale che l'applicazione sia prima di tutto usabile, bella da vedere e, poi, che sia fluida, solo in un secondo momento è fondamentale che funzioni e che mostri dei dati prelevati da un database.
La mente umana, la parte del gusto estetico, c'è poco da fare, è in grado di distinguere a prima vista un'interfaccia bella da una brutta. Creare un'interfaccia quanto più possibile pulita, responsiva, magari personalizzata sulle esigenze dell'utente (pensiamo solo alla scelta del tema chiaro/scuro) ci aiuta a vendere di più la nostra applicazione e a differenziarci dalla massa.
Proprio per questo Microsoft ha incluso, a partire da Windows 10 November Update (10586), le nuove Windows Composition API, che ci permettono di sfruttare l'accelerazione grafica per creare quello che è definito "engadgment" verso l'utente.
Da Desktop Windows Manager a Windows Composition
Il motore di Windows Composition è anche conosciuto come Desktop Windows Manager: nato con il sistema operativo Windows Vista nel 2006, consentiva di creare gli effetti di blur attorno alle finestre delle applicazioni e nella barra del titolo.
Purtroppo, per via della complessità e della qualità delle applicazioni, non è mai stato sfruttato a dovere. Nel frattempo, per risolvere questo problema di scarsa adozione, in Windows 7 è stata aggiunta la possibilità produrre visual accattivanti con Direct2D e Direct3D, così da poter usufruire di un rendering con accelerazione grafica, riducendo quindi il carico computazionale sulla CPU e aumentando le prestazioni.
Questo sistema si è poi evoluto in Windows 8, cambiando addirittura nome: era nato finalmente DirectComposition, che permetteva anche alle applicazioni WinRT di creare degli effetti molto interessanti.
L'ultimo passo di questa lunga evoluzione è avvenuto, infine, in Windows 10, in particolare con il November Update, dalla versione 10586 in poi, grazie all'introduzione delle Windows Composition API.
Il namespace Windows.UI.Composition
Le API sono incluse nel namespace Windows.UI.Composition e, non solo ci permettono di creare degli oggetti, ma ci danno anche la possibilità di interagire su questi "visual" e di applicare animazioni o effetti.
Da quando esiste DirectX, non è mai mancata la capacità di applicare effetti o comunque lavorare a livello di GPU, il problema principale era la forte complessità per lo sviluppatore medio che è, nella maggioranza dei casi, abituato ad applicazioni molto semplici realizzate con XAML.
Microsoft ha quindi capito che, per aiutare gli sviluppatori XAML, era necessario introdurre un nuovo livello all'interno dello stack della composizione della UI: il Visual Layer.
Così facendo, le persone che conoscono DirectX possono continuare a lavorare sia a basso livello che ad un livello superiore, mentre chi lavora con XAML è in grado di interagire sia a livello di Framework Layer che a livello di Visual Layer attraverso le Composition API, ottenendo così il massimo delle prestazioni ma con una curva di apprendimento veramente minima.
Prima di vedere i primi esempi di codice, è bene introdurre un paio di concetti:
- Visual:rappresenta l'oggetto base che include la maggior parte delle proprietà;
- ContainerVisual: un oggetto che deriva da Visual e aggiunge la possibilità di creare dei figli;
- SpriteVisual: deriva da ContainerVisual e aggiunge la possibilità di creare brush visibili sullo schermo sotto forma di pixel.
Quali sono questi brush? Semplicemente si dividono in tre categorie:
- CompositionColorBrush: un colore;
- CompositionEffectBrush: un effetto;
- CompositionSurfaceBrush: la possibilità di disegnare una qualsiasi superfice (esempio una immagine).
Vediamo come si crea il primo elemento tramite le Composition API e proviamo a mostrarlo a schermo.
Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Utilizzare Tailwind CSS all'interno di React: primi componenti
Disabilitare automaticamente un workflow di GitHub (parte 2)
Usare le collection expression per inizializzare una lista di oggetti in C#
Paginare i risultati con QuickGrid in Blazor
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Cancellare una run di un workflow di GitHub
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
- Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- Chiamare direttamente un numero di telefono con HTML5
- Richiamare programmaticamente le operazioni di aggiornamento, eliminazione e inserimento di FormView, DetailsView e GridView
In evidenza
- Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
- Eseguire script pre e post esecuzione di un workflow di GitHub
- Creare una libreria CSS universale: Cards
- Migliorare l'organizzazione delle risorse con Azure Policy
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- Leggere la posta usando il protocollo IMAP tramite la libreria MailKit
- Eseguire una ricerca avanzata per recuperare le issue di GitHub
- Creare una libreria CSS universale: Clip-path