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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare un web server locale con LiveReload
Combinare pagine Blazor e ASP.NET Core MVC nello stesso sito
Personalizzare gli elementi del controllo SwipeView in Xamarin Forms
Creare un templated component per Blazor
Dark mode e selezione dei temi in un'applicazione Xamarin Forms
Modificare il layout della paginazione del controllo CarouselView in Xamarin Forms
Aggiornare la query string inserendo dei parametri in ReactJS
Uso dei design-time data nelle applicazioni della Universal Windows Platform
Blazor e il pattern Model-View-ViewModel
Utilizzare la libreria Ngx-take-until-destroy per eliminare le subscription in un component
Web capabilities AKA project Fugu
Esecuzione condizionale dei template nelle pipeline YAML di Azure DevOps
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Creare un record in C#
- Winget: un nuovo package manager per Windows
- il 18/02 c'è il #container & #devops day! https://aspit.co/ContainerDevOpsDay-21 Le iscrizioni sono sempre aperte e la Call For Paper è attiva fino al 28/01! #aspilive #cfp
- Attesa e validazione manuale nelle pipeline YAML di Azure DevOps
- Utilizzare il CSS Grid Model per creare il layout di un sito
- Montare una file share con Azure Container Instance
- Container & DevOps Day - Online