Realizzare una griglia con elementi a dimensione dinamica nella Universal Windows Platform

di , in Windows 10,

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

Visualizza/aggiungi commenti

Realizzare una griglia con elementi a dimensione dinamica nella Universal Windows Platform (#215)
| 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

I più letti di oggi