Nuovi controlli e responsive design nella Universal Windows Platform di Windows 10

di , in 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.

4 pagine in totale: 1 2 3 4
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

Nuovi controlli e responsive design nella Universal Windows Platform di Windows 10 1010 1
| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Top Ten Articoli

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

Misc