me.code: Swipeable ListView in Xamarin Forms

https://www.mobmaxime.com/blog/swipeable-listview-in-xamarin-forms/

Setting up a Blank Solution

We will start by creating a Blank Forms application. We will use the Blank Forms App (Multiplatform) provided by Xamarin.

new-project-file

Data Class

Here is a simple data class that will hold some details about a song.

public class Item
{
public string SongName { get; set; }
public string AlbumThumbnail { get; set; }
public string SingerName { get; set; }
}

The BaseViewModel class is the extended class of INotifyPropertyChanged, to update the property & view.

BaseViewmodel

using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace SwipListViewDemo
{
    public class BaseViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            var changed = PropertyChanged;
            if (changed == null)
                return;

            changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

MainViewModel

We add some dummy playlist data in list-view.

using System.Collections.ObjectModel;
namespace SwipListViewDemo
{
public class MainViewModel : BaseViewModel
{
ObservableCollection<Item> _listData;
public MainViewModel()
{
BindData();
}

public ObservableCollection<Item> ListData {
get {
return _listData;
}
set {
_listData = value;
OnPropertyChanged();
}
}

private void BindData()
{
ListData = new ObservableCollection<Item>();
ListData.Add(new Item() { SongName = "Shape Of You", SingerName = "ED Sheeran", AlbumThumbnail = "https://miro.medium.com/max/2560/1*bqNsZ6GB2aMsZE20m8tcJw.jpeg" });
ListData.Add(new Item() { SongName = "Despacito", SingerName = "Luis Fonsi feat. Daddy Yankee", AlbumThumbnail = "https://i.ytimg.com/vi/x724C_mntSE/maxresdefault.jpg" });
ListData.Add(new Item() { SongName = "Bom Bidi Bom", SingerName = "Nicki Minaj", AlbumThumbnail = "https://m.media-amazon.com/images/I/810LbeBAA5L._SS500_.jpg" });
ListData.Add(new Item() { SongName = "Witness", SingerName = "Katy Perry", AlbumThumbnail = "https://www.aljazeera.com/mritems/Images/2014/10/26/04cca55fea2247b2a15d32ca7227291c_18.jpg" });
ListData.Add(new Item() { SongName = "Tsunami", SingerName = "Katy Perry", AlbumThumbnail = "https://i.ytimg.com/vi/nZ-X-dhQrvQ/maxresdefault.jpg" });
ListData.Add(new Item() { SongName = "Swish Swish", SingerName = "Katy Perry Ft Nicki Minaj", AlbumThumbnail = "https://a10.gaanacdn.com/images/song/75/21459675/crop_480x480_1534501869.jpg" });
ListData.Add(new Item() { SongName = "Greedy", SingerName = "Ariana Grande", AlbumThumbnail = "https://i.pinimg.com/originals/4f/90/91/4f90916647b1819cc3e99928086af00c.jpg" });
ListData.Add(new Item() { SongName = "I Got You", SingerName = "Bebe Rexha", AlbumThumbnail = "https://i.ytimg.com/vi/VpUgwi-9b1I/maxresdefault.jpg" });
ListData.Add(new Item() { SongName = "Wake Me Up", SingerName = "Avicii", AlbumThumbnail = "https://upload.wikimedia.org/wikipedia/en/d/da/Avicii_Wake_Me_Up_Official_Single_Cover.png" });
ListData.Add(new Item() { SongName = "BeFoUr", SingerName = "Zayn Malik", AlbumThumbnail = "https://assets.teenvogue.com/photos/56ea9853d06bfe7770d2bf32/16:9/w_1280,c_limit/12797882_1298441130172810_1723182945_n.jpg" });
ListData.Add(new Item() { SongName = "Mercy", SingerName = "Shawn Mendes", AlbumThumbnail = "https://a10.gaanacdn.com/images/song/75/21459675/crop_480x480_1534501869.jpg" });
}
}
}

Layout

We will use a ListView and SwipeView is wrapped in a DataTemplate, so it can be easily reused within the ListView.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
    x:Class="SwipListViewDemo.MainPage">
    <ListView
        x:Name="listView"
        HasUnevenRows="True"
        SeparatorVisibility="None"
        ItemsSource="{Binding ListData}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout
                        Spacing="0">
                        <SwipeView>
                            <SwipeView.LeftItems>
                                <SwipeItems>
                                    <SwipeItem
                                        IconImageSource="ic_heart.png"
                                        BackgroundColor="LightSeaGreen"
                                        Invoked="SwipeItem_Favorite" />
                                </SwipeItems>
                            </SwipeView.LeftItems>
                            <SwipeView.RightItems>
                                <SwipeItems>
                                    <SwipeItem
                                        IconImageSource="ic_bin.png"
                                        BackgroundColor="IndianRed"
                                        Invoked="SwipeItem_Delete" />
                                </SwipeItems>
                            </SwipeView.RightItems>
                            <!-- Content -->
                            <StackLayout
                                Spacing="10"
                                Orientation="Horizontal"
                                Padding="20,10">
                                <ffimageloading:CachedImage
                                    Source="{Binding AlbumThumbnail}"
                                    DownsampleWidth="60"
                                    DownsampleHeight="60"
                                    HeightRequest="60"
                                    WidthRequest="60"
                                    LoadingPlaceholder="ic_placeholder"
                                    ErrorPlaceholder="ic_placeholder"
                                    DownsampleToViewSize="true" />
                                <StackLayout
                                    VerticalOptions="CenterAndExpand"
                                    Spacing="5">
                                    <Label
                                        Text="{Binding SongName}"
                                        FontSize="18"
                                        TextColor="Black"/>
                                    <Label
                                        Text="{Binding SingerName}"
                                        FontSize="13"
                                        TextColor="Gray"/>
                                </StackLayout>
                            </StackLayout>
                        </SwipeView>
                        <BoxView
                            HeightRequest="1"
                            VerticalOptions="EndAndExpand"
                            BackgroundColor="Gray" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

In the code behind our MainPage, we will handle the Delete and Favorite Item Action.

using Xamarin.Forms;
namespace SwipListViewDemo
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
Title = "Playlist";
BindingContext = new MainViewModel();
}

void SwipeItem_Delete(System.Object sender, System.EventArgs e)
{
var selectedItem = (sender as SwipeItem).BindingContext as Item;
DisplayAlert("", selectedItem.SongName + " Deleted From PlayList", "ok");
}

void SwipeItem_Favorite(System.Object sender, System.EventArgs e)
{
var selectedItem = (sender as SwipeItem).BindingContext as Item;
DisplayAlert("", selectedItem.SongName + " Added In Favorite List", "ok");
}
}
}

That’s it! Now the ListView is not just styled, but it allows for right and left item swipe behavior with action.

Here is what the final result should like on Android and iOS :