Nuovi controlli e responsive design nella Universal Windows Platform di Windows 10
Contestualmente al rilascio di Windows 10, disponibile da fine luglio, è stato rilasciato un nuovo SDK per iniziare a scrivere le applicazioni (al momento dell'articolo i tool sono in versione 1.1.1 e la compatibilità include la versione 10240 di Windows, cioè la RTM).
Sappiamo bene come in realtà Windows 10 non sia un semplice sistema operativo, ma che in realtà dietro ci sia un grande lavoro di ingegnerizzazione per portare tutto il sistema ad una convergenza molto vicina al 100%, in modo tale da avere Windows 10 installato su diverse categorie di dispositivi. Questi dispositivi sono molto vari e comprendono:
- Desktop: tablet, portatili e PC;
- Mobile: telefoni e phablet;
- Lavoro: Surface Hub;
- IoT: dispositivi indossabili, elettrodomestici, Microsoft HoloLens.
Queste famiglie di dispositivi sono molto diverse fra di loro: pensiamo ad esempio al solo fatto che molti PC non hanno il supporto al touchscreen (mentre i telefoni si), oppure ancora che un dispositivo IoT può non avere lo schermo, mentre Surface Hub può avere uno schermo grande fino ad 84''. Windows 10 è l'unica cosa che accumuna veramente questo tipo di device così diversi tra di loro e le nuove app che fanno parte di questa "OneWindows Platform" vengono definite Universal Windows Apps, proprio perché possono girare su qualsiasi dispositivo.
Abbiamo già introdotto questa argomento in un precedente articolo, a cui rimandiamo.
Il vantaggio di questo nuovo approccio è che noi sviluppatori dobbiamo preoccuparci solamente una volta di scrivere l'applicazione per poi distribuirla per tutte le famiglie di device, con un solo package e attraverso un solo store. Il mezzo con cui realizzare questo nuovo approccio è quello di sfruttare il design responsive.
Microsoft ci ha fornito tutta una serie di strumenti all'interno dell'SDK per aiutarci a creare un design responsivo e cercheremo di affrontarli tutti all'interno di questo articolo.
Pensare con un design adattivo
Una delle novità più significative per quanto riguarda Windows 10 è il responsive design, che ci consente di adattare la nostra interfaccia a qualsiasi dimensione dello schermo, grazie all'introduzione degli effective pixel.
Windows usa un algoritmo per normalizzare la visualizzazione sullo schermo dei controlli, dei tipi di carattere e di altri elementi dell'interfaccia utente, tenendo conto della distanza di visualizzazione e della densità dello schermo per ottimizzare la dimensione percepita (da qui il nome di effective pixel), invece della dimensione fisica.
Windows ci garantisce, quindi, senza dover implementare nulla, che un carattere da 24 pixel su un Surface Hub posto a 3 metri di distanza e con schermo da 84'' sia altrettanto leggibile per l'utente che usa lo stesso font size di 24 pixel su un telefono da 5'', a pochi centimetri di distanza.
L'utilizzo degli effective pixel ci consente quindi di usare in modo più efficace tutto lo spazio disponibile a schermo, permettendo inoltre agli utenti una ulteriore facilità di interazione: tutti i controlli usano questa nuova tipologia di pixel e quindi non dobbiamo, ad esempio, rendere un bottone più grande o più piccolo a seconda delle dimensioni dello schermo.
Lo scopo di questo articolo non è di certo quello di insegnare il responsive design o quello di elencare le tecniche migliori per implementarlo, ma è comunque necessario avere una minima infarinatura di alcune tecniche, poiché Microsoft ci ha poi fornito dei controlli che sfruttano appunto questi metodi.
La tecnica più basilare è quella del ridimensionamento del contenuto e del contenitore: in questo scenario, il contenuto si adatta perfettamente allo spazio disponibile in finestra, senza il bisogno diparticolari implementazioni.
Un'altra tecnica che ci viene molto utile è la tecnica del riposizionamento degli elementi all'interno dell'interfaccia grafica, per ottimizzare al massimo il contenuto della finestra dell'applicazione: in un telefono può avere senso uno scrolling solamente, verticale perché è più naturale per l'utente, mentre quando siamo su un tablet o un PC con uno schermo più grande la visualizzazione può cambiare da lista a griglia, quindi il contenuto B si può adattare per scorrere in orizzontale all'interno della view e viene quindi affiancato al contenuto A.
Un controllo che Windows ci fornisce per implementare questa tecnica è il RelativePanel, che vedremo successivamente.
La tecnica della visualizzazioneinvece, è quella più familiare perché disponibile sin dai tempi di Windows Phone, attraverso il controllo Pivot: viene visualizzato solo un pezzo alla volta e questo pezzo di contenuto si adatta perfettamente allo spazio adisposizione nella view.
Parlando invece della tecnica di sostituzione, questa ci consente di modificare l'interfaccia utente per la dimensione dello schermo o l'orientamento di uno specifico dispositivo. In questo esempio, il riquadro di spostamento e la relativa interfaccia utente compatta funzionano bene per un dispositivo di piccole dimensioni come un telefono, mentre in un dispositivo più grande le schede potrebbero essere una scelta migliore. In questo caso abbiamo il supporto del controllo SplitView.
Ultima, ma non per importanza, è la tecnica della riprogettazione che ci obbliga ad implementare view specifiche per ogni categoria di device. In questo modo la view è sempre ottimizzata, ma dobbiamo scrivere più codice per ottenere questo risultato. Vedremo poi come affrontare anche questa tecnica.
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
Evitare la command injection in un workflow di GitHub
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Gestione degli environment per il deploy con un workflow di GitHub
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Criptare la comunicazione con mTLS in Azure Container Apps
Utilizzare database e servizi con gli add-on di Container App
Configurare policy CORS in Azure Container Apps
.NET Conference Italia 2023
Creare un'applicazione React e configurare Tailwind CSS
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 - Utilizzare scene 3D in Windows Presentation Foundation
di Marco Leoncini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - 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
In evidenza
- 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
- Cambiare la chiave di partizionamento di Azure Cosmos DB