Creare azioni rapide con SwipeView in Xamarin Forms

di Morgan Pizzini, in Windows 10,

All'interno della release 4.4 di Xamarin.Forms troviamo numerose migliorie grafiche e di interazione utente, che prima potevano essere ottenute solo tramite l'utilizzo di librerie o framework esterni, che spesso abbiamo dovuto integrare solo per utilizzarne un componente.

Un componente di cui si percepiva la mancanza "nativa" è la SwipeView, che consente di avere delle azioni rapide sugli elementi di una lista.
L'implementazione nelle due piattaforme, come è prevedibile, è molto diversa e richiede la scrittura di molto codice specifico per Android e iOS, per riuscire ad arrivare all'obbiettivo. Grazie a Xamarin.Forms, invece, ora possiamo scrivere il codice una sola volta e ci penserà poi il framework a riadattare il controllo per le varie architetture.

La SwipeView è ancora un controllo in stato sperimentale, ma per utilizzarla ci basterà abilitare il flag nel file App.cs:

Device.SetFlags(new[] {
    "SwipeView_Experimental"
});

Nella view della pagina potremo così scrivere:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <SwipeView.RightItems>
        <SwipeItems>
            <SwipeItem Text="Check"
                       IconImageSource="check.png"
                       BackgroundColor="LightBlue"
                       Command="{Binding CheckCommand}"  />
        </SwipeItems>
    </SwipeView.RightItems>
    
    <!-- Contenuto -->
    <Grid HeightRequest="60"
          WidthRequest="300">
        <Label Text="Swipe right or left"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </Grid>
</SwipeView>

L'elemento SwipeView può gestire gli swipe provenienti dalle quattro direzioni, ma in questo caso abilitiamo solo lo swipe destro e sinistro: all'interno di ogni menu nello slide scegliamo quali e quante voci visualizzare: due nel menù a sinistra e una nel menù a destra.

Ogni azione effettuata su di uno SwipeItem può essere intercettata tramite l'evento Invoked o, nel caso di un'infrastruttura MVVM, utilizzando l'apposito Command.

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