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
Sostituire la GitHub Action di login su private registry
Utilizzare gRPC su App Service di Azure
Generare token per autenicarsi sulle API di GitHub
Cambiare la chiave di partizionamento di Azure Cosmos DB
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Miglioramenti agli screen reader e al contrasto in Angular
Ordine e importanza per @layer in CSS
Supportare lo HierarchyID di Sql Server in Entity Framework 8
Disabilitare automaticamente un workflow di GitHub (parte 2)
Gestione dei nomi con le regole @layer in CSS
Creare una libreria CSS universale: Cards
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
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
In evidenza
- 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
- Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database