Spesso può capitare di avere a disposizione una griglia di elementi, i cui contenuti hanno tutti una dimensione fissa definita a priori, ma, lavorando in ambiente principalmente desktop, si vuole comunque garantire che i contenuti si adattino alla dimensione della finestra durante il resize. Questo può principalmente essere realizzato in due modi:
- avendo i contenuti che si spostano e mantengono le dimensioni;
- avendo i contenuti che cambiano le dimensioni (sia di altezza che di larghezza) adattandosi al contesto.
Il Windows Community Toolkit è, come abbiamo già avuto modo di vedere in passato all'interno di altri script, un ottimo repository di utility che possono semplificarci la vita durante gli sviluppi delle nostre applicazioni UWP e, anche in questo caso, ci viene in aiuto per realizzare una griglia i cui contenuti possono "muoversi" all'interno dello spazio disponibile.
Per farlo, è sufficiente registrare il toolkit come namespace all'interno della pagina interessata e quindi sfruttare l'animazione di ReorderGridAnimation, come mostrato nell'esempio seguente:
<Page xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations" ...> <GridView x:Name="MyGridView" animations:ReorderGridAnimation.Duration="250" />
Al ridimensionarsi della finestra, i contenuti manterranno le dimensioni e, quando avranno sufficiente spazio, si sposteranno di una riga in alto o in basso, seguendo questa animazione che garantisce fluidità (poiché costruita tramite Windows Composition). Eventualmente è anche possibile cambiare la durata dell'animazione, anche se è consigliato mantenere un valore di 250ms per non creare un effetto "strano" agli occhi degli utenti.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Personalizzare la creazione dell'utenze Azure B2C tramite API connector
Indicizzare e ricercare i blob di Azure Storage
Un confronto tra Framework CSS: Foundation, Bulma, TailwindCSS e SemanticUI
Un confronto tra React, Angular, Vue.js e Svelte: Form e validazione
ASP.NET Core & Blazor 6
Comprimere le immagini contenute in un repository con una GitHub Action
Supportare l'identity resolution in una No-Tracking query di Entity Framework Core
Creare liste numerate tramite CSS
Utilizzare Front Door come CDN di contenuti statici
Creare un'istanza di Azure Service Bus con ARM
Esecuzione a matrici nei workflow di GitHub Action
Estensione del markdown in GitHub