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
Generare file PDF da Blazor WebAssembly con iText
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Evitare il flickering dei componenti nel prerender di Blazor 8
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Gestire undefined e partial nelle reactive forms di Angular
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Sfruttare al massimo i topic space di Event Grid MQTT
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Semplificare il deployment di siti statici con Azure Static Web App
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Top Ten Articoli
- Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - 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 - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Utilizzare scene 3D in Windows Presentation Foundation
di Marco Leoncini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - 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
- Miglioramenti nelle performance di Angular 16
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- HTML5 con CSS e JavaScript
- Ottimizzazione dei block template in Angular 17
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
In evidenza
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Ottimizzazione dei block template in Angular 17
- Utilizzare il trigger SQL con le Azure Function
- Paginare i risultati con QuickGrid in Blazor
- Come EF 8 ha ottimizzato le query che usano il metodo Contains
- Evitare (o ridurre) il repo-jacking sulle GitHub Actions
- Definire stili a livello di libreria in Angular