In uno degli script precedenti (https://www.winrtitalia.com/script/213/Animare-Ordinamento-Elementi-Grid-Interno-Universal-Windows-Platform.aspx) abbiamo visto com'è possibile, facendo uso del Windows Community Toolkit, animare lo spostamento degli elementi contenuti all'interno di una Grid per fare in modo che si adattino alla dimensione dello schermo durante il resize, senza però che questi cambino dimensione.
Tuttavia, nonostante la realizzazione fosse piuttosto semplice perché realizzata tramite un'animazione, poteva generare un effetto indesiderato in cui, durante il ridimensionamento della finestra, potevano vedersi spazi bianchi, dovuti al fatto che i contenuti, per l'appunto, non si ridimensionavano. Con l'uso del controllo AdaptiveGridView invece, è possibile fare in modo che gli elementi cambino anche la dimensione, come mostrato nel caso seguente:
<Page ... xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"/> <controls:AdaptiveGridView Name="AdaptiveGridViewControl" ItemHeight="200" DesiredWidth="300" ItemTemplate="{StaticResource MyItemTemplate}"> </controls:AdaptiveGridView> ... </Page>
Le tipologie di funzionamento di questo controllo sono principalmente due:
- La prima, la più complessa, consiste nell'impostazione della sola proprietà DesiredWidth: questo significa che i contenuti possono adattarsi mantenendo anche l'aspect ratio, sfruttando tutto lo spazio orizzontale e verticale visibile a schermo. Poiché richiede modifiche anche al template dei singoli elementi, lo affronteremo in un prossimo script;
- La seconda, permette l'impostazione di una proprietà ItemHeight: i contenuti non manterranno l'aspect ratio e quindi potranno essere tagliati, ma occuperanno comunque tutto lo spazio orizzontale disponibile.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Short-circuiting della Pipeline in ASP.NET Core
Gestione degli environment per il deploy con un workflow di GitHub
Load test di ASP.NET Core con k6
Reactive form tipizzati con FormBuilder in Angular
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Routing statico e PreRendering in una Blazor Web App
Creazione di componenti personalizzati in React.js con Tailwind CSS
Elencare le container images installate in un cluster di Kubernetes
Eseguire una query su SQL Azure tramite un workflow di GitHub
Effettuare il pull di git LFS in un workflow di GitHub
Eseguire attività pianificate con Azure Container Jobs
Usare il versioning con i controller di ASP.NET Core Web API