Utilizzare il controllo CollectionView in Xamarin Forms

di Morgan Pizzini, in Windows 10,

Con il rilascio della versione 4.3.0, Xamarin.Forms ha ufficialmente rimosso il vincolo sull'abilitazione degli experimental flag per l'utilizzo delle CollectionView.

Ma vediamo nel dettaglio cosa sono: per la maggior parte delle situazioni, una CollectionView, è un componente che si va a sostituire alla "vecchia" ListView. Consentendo di costruire interfacce più veloci, moderne, mantendo i controlli nativi. La novità più importante è la completa rimozione della ViewCell e quindi del suo template poco flessibile e articolato, dando piena libertà all'immaginazione dello sviluppatore, o del designer, tramite DataTemplate.

<CollectionView ItemsSource="{Binding items}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
          <StackLayout >
              <Label Text="{Binding Name}" />
              <Label Text="{Binding Value}"  />
          </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Con le CollectionView non solo il layout dell'elemento sarà a nostra completa discrezione, ma anche l'interazione con il componente, e le modalità di interazione con la lista saranno sotto il nostro pieno controllo.

Se prima, con le ListView, eravamo obbligati a layout con scroll verticali e spaziature fisse, ora possiamo scegliere sia l'orientamento che il numero di elementi da visualizzare.

Se ad esempio volessimo visualizzare una lista ci basterà scrivere:

<CollectionView.ItemsLayout>
  <ListItemsLayout ItemSpacing="4"></ListItemsLayout>
<CollectionView.ItemsLayout>

Se viceversa, volessimo un layout a griglia, il nostro codice somiglierà più al seguente.

<CollectionView.ItemsLayout>
  <GridItemsLayout
    Span="2"
    VerticalItemSpacing="4"
    HorizontalItemSpacing="4"
    ></GridItemsLayout>
<CollectionView.ItemsLayout>

Raramente visualizzeremo liste, o griglie, con pochi elementi, quindi potremmo aver bisogno di definire anche la modalità con cui è possibile visionarli. Tramite la proprietà Orientation si deciderà come la CollectionView si espanderà sulla nostra UI.

Migrare da ListView a CollectionView


Il primo grande concetto da tenere in considerazione è che la CollecionView implementa un set ridotto delle API disponibili all'interno della ListView, non è quindi garantita la piena compatibilità in caso di migrazione. Possiamo comunque affermare che nella gran parte dei casi questa scelta sarà completamente indolore, anzi, ne guadagneremo: il supporto alla selezione singola/multipla, il sistema di virtualizzazione fornito dai controlli nativi, possibilità di creare UX più interattive e con template completamente custom.

Attualmente la CollectionView è pienamente supportata dai sistemi iOS e Android, mentre per UWP non abbiamo ancora tutte le funzionalità disponibili. Per seguire le fasi di avanzamento possiamo utilizzare il seguente link: https://gist.github.com/hartez/7d0edd4182dbc7de65cebc6c67f72e14.

Commenti

Visualizza/aggiungi commenti

| 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