Utilizzare il controllo CarouselView in Xamarin Forms

di Morgan Pizzini, in Windows 10,

Con il rilascio di Xamarin.Forms 4.3, insieme all'ufficializzazione delle CollectionView, descritte negli script precedenti, troviamo la possibilità di avere in preview un nuovo elemento: la CarouselView.

Si può dire che è uno degli elementi che mancava all'interno dell'ecosistema Xamarin: i carousel (caroselli o slideshow), sono elementi molto usati soprattutto in ambito web e, con la release 4.3 di Xamarin Forms, hanno fatto il loro ingresso anche nella piattaforma di riferimento per i progetti cross-platform.

I carousel, insieme agli attributi visual, segnano un avvicinamento di Xamarin verso gli standard UI/UX web, portando le applicazioni native ad avere un'interfaccia omogenea su tutti i device, contrariamente a quanto è accaduto finora, dove un bottone aveva una UI caratteristica del sistema Android, se l'applicazione veniva eseguita su Android, e un design iOS, se eseguita su di un iPhone.

Ricordando che questa funzionalità è ancora in preview, nel momento della scrittura di questo articolo, alcune sue caratteristiche potrebbero variare nel tempo. Per poter utilizzarla già da ora sarà necessario aggiungere la riga seguente all'interno della MainActivity di Android o nell'AppDelegate di iOS:

Forms.SetFlags("CarouselView_Experimental");

Come tutti gli elementi di tipo lista all'interno di Xamarin, anche la CarouselView rispetta la struttura standard a cui siamo abituati:

  • ItemsSource: fonte dati
  • ItemTemplate: UI/UX
  • attributo CurrentItemChanged: cambiamento della slide

Possiamo già abbozzare un primo esempio di CarouselView utilizzando solo le nostre conoscenze pregresse:

<CarouselView ItemsSource="{Binding MyList}" CurrentItemChanged="OnCurrentItemChanged">
  <CarouselView.ItemTemplate>
    <DataTemplate>
        <StackLayout>
             <Label Text="{Binding Name}"
                HorizontalOptions="Center"
                VerticalOptions="Center" />
        </StackLayout>
    </DataTemplate>
  <CarouselView.ItemTemplate>
</CarouselView>

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