Dimensione e densità del controllo
Usa una combinazione di dimensione e densità del controllo per ottimizzare la tua app di Windows e offrire un'esperienza utente più appropriata per i requisiti di funzionalità e interazione dell'app.
Per impostazione predefinita, le app UWP hanno un rendering con layout a bassa densità (o Standard). Tuttavia, a partire da WinUI 2.1, è supportata anche un'opzione di layout ad alta densità (o Compact) per interfacce utente ricche di informazioni e scenari specializzati simili. Questo può essere specificato tramite una risorsa di stile di base (vedi gli esempi riportati di seguito).
Mentre la funzionalità e il comportamento non sono cambiati e rimangono coerenti tra le due opzioni di dimensione e densità, la dimensione predefinita del carattere è stata aggiornata a 14 px per tutti i controlli per supportare queste due opzioni di densità. Questa dimensione del carattere è compatibile con tutte le aree e i dispositivi e garantisce che l'applicazione rimanga bilanciata e conoda per gli utenti.
Esempi
Raccolta WinUI 2
Se hai installato l'applicazione WinUI 2 Gallery , clicca qui per [aprire l'applicazione e vedere il dimensionamento compatto in azione] (winui2gallery:/item/Compact Sizing).
Dimensionamento Fluent Standard
Il dimensionamento Fluent Standard è stato creato per offrire equilibrio tra densità delle informazioni e comodità per l'utente. Tutti gli elementi sullo schermo sono allineati in base a un target di 40 x 40 pixel effettivi (epx) grazie a cui gli elementi dell'interfaccia utente rimangono allineati a una griglia e si ridimensionano in modo appropriato in base al ridimensionamento a livello di sistema.
Il dimensionamento standard è progettato per soddisfare le esigenze sia di tocco che di input mediante puntatore.
Nota
Per maggiori informazioni sui pixel effettivi e sul ridimensionamento, vedere Dimensioni dello schermo e punti di interruzione
Per altre informazioni sul ridimensionamento a livello di sistema, vedi Allineamento, margine e spaziatura interna.
Per l'Aggiornamento di Windows 10 di ottobre 2018 (versione 1809), le dimensioni standard predefinite per tutti i controlli UWP sono state ridotte per migliorare l'usabilità in tutti gli scenari di uso.
L'immagine seguente illustra alcune modifiche del layout dei controlli introdotte con l'Aggiornamento di Windows 10 di ottobre 2018. In particolare, il margine tra l'intestazione e il lato superiore di un controllo è stato diminuito da 8 epx a 4 epx e la griglia di 44 epx è stata modificata in 40 epx.
*Esempio di layout dei controlli standard
Quest'altra immagine mostra le modifiche apportate alle dimensioni dei controlli per l'Aggiornamento di Windows 10 di ottobre 2018. In particolare l'allineamento alla griglia da 40 epx.
Dimensionamento Fluent Compact
Il dimensionamento Compact consente di usare gruppi di controlli densi e ricchi di informazioni e può essere utile nei casi seguenti:
- Esplorazione di grandi quantità di contenuti.
- Ingrandimento del contenuto visibile in una pagina.
- Esplorazione e interazione con controlli e contenuto
Il dimensionamento Compact è progettato principalmente per supportare l'input mediante puntatore.
Esempi di dimensionamento compatto
Il dimensionamento Compact è implementato tramite un dizionario risorse speciali che può essere specificato nell'applicazione a livello di pagina o in un layout specifico. Il dizionario risorse è disponibile nel pacchetto Nuget WinUI.
I seguenti esempi mostrano come lo stile Compact possa essere applicato alla pagina e a un singolo controllo della griglia.
Livello pagina
<Page.Resources>
<ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>
A livello di griglia
<Grid>
<Grid.Resources>
<ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Grid.Resources>
</Grid>
Scaricare il codice di esempio
- WinUI 2 Gallery sample - Guarda tutti i controlli XAML in formato interattivo.
