Hier vindt u de beste oplossing voor een SwipeView op een pagina.
In een project waaraan ik werk, was er een specifiek verzoek om een verzameling SwipeViews op een pagina te hebben, waarbij het alleen mogelijk is om een enkele SwipeView open te laten vegen. Omdat ik daar geen goede oplossing voor kon vinden op het web (alleen een verzoek, bijvoorbeeld hier, besloot ik een korte post te schrijven over mijn oplossing. De voorbeeld repo kun je hier vinden.
In de afgelopen maanden heeft Xamarin HQ gewerkt aan het stabiliseren van de SwipeView. Zoals David Ortinau in zijn laatste blogpost aankondigde, belooft Xamarin Forms 5.0 veel bugs op te lossen en hopelijk dus een stabiele versie van deze control.
In de huidige stabiele versie van Xamarin Forms is dit besturingselement nog in preview en moeten ontwikkelaars de Experimental Flags voor de SwipeView instellen in de native projecten, zoals beschreven in de documentatie voor de SwipeView.
Voor dit project heb ik een eenvoudige MVVM-opzet gebruikt, dus we hebben tenminste een Model, een View en een ViewModel nodig om mee te werken.
Ik zal alleen SwipeViews gebruiken die aan de rechterkant openen, maar je kunt deze oplossing op elke gewenste manier implementeren voor de SwipeView. Ik zou zeggen dat de mogelijkheden ontelbaar zijn...
Model
Het eerste wat ik instelde was het model, in dit geval een Persoonsklasse met twee eigenschappen. De IsOpen eigenschap is nodig om te binden aan de aangepaste SwipeView die ik later zal uitleggen. Ik implementeerde de INotifyPropertyChanged interface om de view op de hoogte te brengen van updates van de IsOpen eigenschap.
ViewModel
Maak gewoon een lijst met personen als bron voor de CollectionView. Het DeleteCommand handelt de SwipeView Delete-knop af die verschijnt bij het naar links vegen van het item. Het OpenItemChangedCommand zet de IsOpen eigenschap van elk ander Person item, dat niet het laatst geveegde Person item is, op false.
OnPropertyChanged() is nodig om de pagina bij te werken wanneer een item uit de lijst wordt verwijderd.
Aangepaste SwipeView
Om de oplossing werkend te krijgen, moeten we de bestaande SwipeView uitbreiden met enkele eigen properties. In de officiële documentatie voor SwipeView heb ik al een bindbare property IsOpen gezien, maar in de huidige stabiele Xamarin versie kun je die nog niet gebruiken. In dit geval heb ik een bindbare IsOpen property gemaakt die gebonden wordt aan de IsOpen property in het Person model. Wanneer die eigenschap verandert, wordt het commando uitgevoerd. Zet ook de BindingMode op TwoWay, want we moeten zowel de View als het ViewModel op beide manieren kunnen bijwerken.
De SwipeView geeft ons de mogelijkheid ons te abonneren op de SwipeEnded event. Met de SwipeEndedEventArgs kunnen we controleren of de SwipeView open is wanneer het veeggebaar is beëindigd. Dit is de sleutel tot het succes van deze implementatie: als de SwipeView open is, wordt de IsOpen-eigenschap bijgewerkt. Dit zal de IsOpen eigenschap bijwerken voor het geveegde Person item EN het commando uitvoeren om ervoor te zorgen dat voor alle andere Person items in de lijst de IsOpen eigenschap op false wordt gezet.
CollectionView
Tenslotte moeten we de pagina met de CollectionView maken. Ik heb relatieve binding gebruikt om te kunnen binden aan het ViewModel vanuit een DataTemplate. Het model zelf is gebonden als CommandParameter om het model te kunnen bijwerken of verwijderen uit de lijst. Zorg ervoor dat je de Person.IsOpen eigenschap bindt aan de CustomSwipeView.IsOpen eigenschap.
Dit is mijn oplossing, ik wed dat er veel andere oplossingen zijn. Als je er een hebt, laat het me weten!
Ik heb een voorbeeldrepo gemaakt waar iedereen naar kan verwijzen. Je kunt me ook vinden op Twitter @rickavdijk en LinkedIn of zelfs per mail naar rick@baseflow.com. Laat je feedback achter als je wat hebt!
