Xamarin Forms Swipe Left/Swipe Right Gestures

Question

I want to preface this by saying I'm completely new to mobile development, Xamarin, C#, .Net.

I'm working on creating a mobile app using Xamarain Forms and have run into the problem of not having the swipe gesture available to me, at least according to the documentation I've seen.

I found this site: http://arteksoftware.com/gesture-recognizers-with-xamarin-forms/

This describes how to add some additional gestures for IOS/Android to be accessible in the context of the form. Before I try to follow this, I wanted to see if anyone else has implemented swipe in a Xamarin Forms app and how they went about it.

My goals are that there has to be a horizontal stack layout. This layout contains 7 buttons, each button reflects a day in the current week. Swiping left on the stack layout will change the button's text to the previous week. Swiping right will change the button's text to the next week.

So I'm also trying to use MVVM for this and XAML. So is it possible for me to separate the swipe left and the swipe right action? I want to use ICommand to pass a certain parameter to a function based on the direction of the swipe.

Any examples of this or any advice would be greatly appreciated.

Answer 1

No need third party libraries.. No need to pay.. Just add these two classes & Implement your swipe listeners

Step 1: Copy paste these two classes

SwipeListener.cs

using System;
using Xamarin.Forms;

namespace SwipeLib
{
public class SwipeListener : PanGestureRecognizer
{
    private ISwipeCallBack mISwipeCallback;
    private double translatedX = 0, translatedY = 0;

    public SwipeListener(View view, ISwipeCallBack iSwipeCallBack)
    {
        mISwipeCallback = iSwipeCallBack;
        var panGesture = new PanGestureRecognizer();
        panGesture.PanUpdated += OnPanUpdated;
        view.GestureRecognizers.Add(panGesture);
    }

    void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {

        View Content = (View)sender;

        switch (e.StatusType) {

            case GestureStatus.Running:

                try {
                    translatedX = e.TotalX;
                    translatedY = e.TotalY;
                } catch (Exception err) {
                    System.Diagnostics.Debug.WriteLine("" + err.Message);
                }
                break;

            case GestureStatus.Completed:

                System.Diagnostics.Debug.WriteLine("translatedX : " + translatedX);
                System.Diagnostics.Debug.WriteLine("translatedY : " + translatedY);

                if (translatedX < 0 && Math.Abs(translatedX) > Math.Abs(translatedY)) {
                    mISwipeCallback.onLeftSwipe(Content);
                } else if (translatedX > 0 && translatedX > Math.Abs(translatedY)) {
                    mISwipeCallback.onRightSwipe(Content);
                } else if (translatedY < 0 && Math.Abs(translatedY) > Math.Abs(translatedX)) {
                    mISwipeCallback.onTopSwipe(Content);
                } else if (translatedY > 0 && translatedY > Math.Abs(translatedX)) {
                    mISwipeCallback.onBottomSwipe(Content);
                } else {
                    mISwipeCallback.onNothingSwiped(Content);
                }

                break;

        }
    }

}
}

ISwipeCallBack.cs

using System;
using Xamarin.Forms;
namespace SwipeLib
{  
public interface ISwipeCallBack
{

    void onLeftSwipe(View view);
    void onRightSwipe(View view);
    void onTopSwipe(View view);
    void onBottomSwipe(View view);
    void onNothingSwiped(View view);
}
}

Step 2: From your Xamarin forms pass the view & also interface obj. Then you get result

In my case I pass the label

 SwipeListener swipeListener = new SwipeListener(lbl_swipe, this);

Step 3: Implement the ISwipeCallBack interface

public partial class SwipeLibPage : ContentPage, ISwipeCallBack

Sample project --> https://github.com/rranjithkumar100/Xamarin-Swipe-Library