CODEWITHSUNDEEP
xamarinxamarin.forms
Jessica S
Jessica S

Reputation: 165

Cross platform listview swipe in xamarin forms

I am looking for a cross platform swipe on ListView to perform an action such as opening a menu or deleting an item.

Has anyone implemented such a scenario? I would like to for instance delete an item when swiping on item to left.

I need to support all platforms: ios/droid/win

Upvotes: 0

Views: 6548

Answers (2)

Reeves
Reeves

Reputation: 43

You can use SwipeView and wrap it in a ListView. 

<ListView
ItemsSource="{Binding Items}"
SelectionMode="None"
CachingStrategy="RecycleElement"
RowHeight="110"
HeightRequest="1000"
BackgroundColor="White"
IsPullToRefreshEnabled="True"
Refreshing="OnRefresh">
<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <SwipeView>                    
                <SwipeView.GestureRecognizers>
                    <TapGestureRecognizer
                        Tapped="OnTapped"
                        NumberOfTapsRequired="1" />
                </SwipeView.GestureRecognizers>                    
                <SwipeView.RightItems>
                    <SwipeItems>
                        <SwipeItem
                            Text="Edit"
                            IconImageSource="edit_icon.png"
                            BackgroundColor="Green"
                            Invoked="OnEdit" />
                        <SwipeItem
                            Text="Delete"
                            IconImageSource="delete_icon.png"
                            BackgroundColor="Red"
                            Invoked="OnDelete" />
                    </SwipeItems>
                </SwipeView.RightItems>
                <SwipeView.Content>
                    :
                </SwipeView.Content>
            </SwipeView>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

From: https://github.com/xamarin/Xamarin.Forms/issues/9089

Upvotes: 0

Salvador Guerrero
Salvador Guerrero

Reputation: 255

The easiest way would be to use the built-in Context Actions, this allows you to show menu items when your list item is swiped on iOS or long pressed on Android

<ListView x:Name="ContextDemoList">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
         <ViewCell.ContextActions>
            <MenuItem Clicked="OnMore" CommandParameter="{Binding .}"
               Text="More" />
            <MenuItem Clicked="OnDelete" CommandParameter="{Binding .}"
               Text="Delete" IsDestructive="True" />
         </ViewCell.ContextActions>
         <StackLayout Padding="15,0">
             <Label Text="{Binding title}" />
         </StackLayout>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

https://developer.xamarin.com/guides/xamarin-forms/user-interface/listview/interactivity/#Context_Actions

If swiping is a requirement for both platforms, or you need to do an action when the item is swiped (Instead of showing menu items) then i'd recommend SyncFucion's listview control, it is available with a Community licence and it offers more flexibility

<syncfusion:SfListView x:Name="listView" AllowSwiping="True">
  <syncfusion:SfListView.LeftSwipeTemplate>
    <DataTemplate x:Name="LeftSwipeTemplate">
      <Grid>
        <Grid BackgroundColor="#009EDA" HorizontalOptions="Fill" VerticalOptions="Fill" Grid.Column="0">
          <Grid VerticalOptions="Center" HorizontalOptions="Center">
            <Image Grid.Column="0"
                   Grid.Row="0"
                   BackgroundColor="Transparent"
                   HeightRequest="35"
                   WidthRequest="35"
                   Source="Favorites.png" />
          </Grid>
        </Grid>
      </Grid>
    </DataTemplate>
  </syncfusion:SfListView.LeftSwipeTemplate>
</syncfusion:SfListView>

https://help.syncfusion.com/xamarin/sflistview/swiping

Upvotes: 4

Related Questions