Swipeable ListView in Xamarin Forms

By Harshad Patel Last Updated 1046 Days Ago 5 Minutes Read App Development 0
Smart Entrepreneurs

Today, We will demonstrate how you can implement Swipeable listview in Xamarin Forms using SwipeView.

To demonstrate these features, let’s say we have a listview control that should show a playlist of songs. Users can favorite or delete song from the playlist.

Note: SwipeView available in Xamarin.Forms 4.4 and later Nuget.

Must Read: Top 8 Reasons Xamarin App Development Could Help You to Grow Your Business

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.

Set Your Appointments with Calendar

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 :

Android:

Swipeable ListView Swipeable ListView

iOS:

Swipeable ListView Swipeable ListView

You can find the whole source-code in my Download.

Thanks for reading, I hope it helps you.

Happy Coding!

If you are looking to Hire Nearshore Xamarin App Developer?

Let MobMaxime provide you with the required services and deliverables. Our Near Shore development resources are ready to start working with you in a short time.

Read More
Social Media :

Join 10,000 subscribers!

Join Our subscriber’s list and trends, especially on mobile apps development.

I hereby agree to receive newsletters from Mobmaxime and acknowledge company's Privacy Policy.