This is a result you can obtain:
- Download the nuget package:
Install-Package SwipeCollectionView
- In you Android project, enable the collection view flag:
protected override void OnCreate(Bundle savedInstanceState)
{
//...
base.OnCreate(savedInstanceState);
global::Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
LoadApplication(new App());
}
- In your forms project add a collection view.
<xam:SwipeCollectionView ItemsSource="{Binding ListItems}" x:Name="swipeListView">
<xam:SwipeCollectionView.ItemTemplate>
<DataTemplate>
<xam:SwipeItemView x:Name="loopedElement"
BoundItem="{Binding}"
ChangeOpacity="True"
SwipeRightCompleted="SwipeRightCompleted">
<xam:SwipeItemView.MainContent>
<!-- Content !-->
</xam:SwipeItemView.MainContent>
<xam:SwipeItemView.SwipeRightContent>
<!-- Content !-->
</xam:SwipeItemView.SwipeRightContent>
<xam:SwipeItemView.SwipeLeftContent>
<!-- Content !-->
</xam:SwipeItemView.SwipeLeftContent>
</xam:SwipeItemView>
</DataTemplate>
</xam:SwipeCollectionView.ItemTemplate>
</xam:SwipeCollectionView>
As you can imagine xam:SwipeItemView
define the template of the Swipe element. You can define the template of the box behind too customizing SwipeLeftContent
and SwipeRightContet
.
SwipeLeftContent
, SwipeRightContet
and MainContent
accepts bounded View
.
See the
ExampleApp
for a complete example
xam:SwipeItemView
defines some events and properties:
SwipeLeftCompleted
SwipeRightCompleted
DismissSwipeBefore
dismiss the swipe if the gesture haven't completed the action for the setted number (from 0.1 to 1)DismissSwipe
fired when swipe is dismissedSwipeDuration
animation duration for the swipe to complete the action after the gesture is completed (uint
)ChangeOpacity
set totrue
to animate opacity. Default isfalse
.