Carousel Page Swipe Control on Xamarin

Hi there,
That’s my first english post. I am writing this as English because most searches are done in English on Xamarin. I will explain to swipe control in Carousel Page on Xamarin today. Just we’ll use Bindable Property and Touch Gesture Algorithm :)

Let’s start. Firstly I am creating our class from Carousel Page. Then I am writing Bindable Property for IsSwipping control.

public class CustomCarouselPage : CarouselPage
{
public static readonly BindableProperty IsSwippingProperty = BindableProperty.Create(nameof(IsSwipping),typeof(bool), typeof(CustomCarouselPage), default(bool));
public bool IsSwipping
{ 
get { return (bool) GetValue(IsSwippingProperty); }
set { SetValue(IsSwippingProperty, value); }
}
}

The page is ready for renderer (only Android but coming soon for iOS). Well, Let’s write for Custom Renderer class for Android.

[assembly: ExportRenderer(typeof(CustomCarouselPage), typeof(CustomCarouselPageRenderer))]
namespace CarouselSwipeControl.Droid.Renderers
{
public class CustomCarouselPageRenderer : CarouselPageRenderer
{
private float x1 { get; set; }
private float x2 { get; set; }
private float y1 { get; set; }
private float y2 { get; set; }
private CustomCarouselPage _page = null;
protected override void OnElementChanged(ElementChangedEventArgs<CarouselPage> e)
{
_page = e.NewElement as CustomCarouselPage;
base.OnElementChanged(e);
}
public override bool DispatchTouchEvent(MotionEvent e)
{
// Left or right swipe control
if (!_page.IsSwipping)
{
if (e.ActionMasked == MotionEventActions.Down)
{
x1 = e.GetX();
y1 = e.GetY();
return base.DispatchTouchEvent(e);
}
x2 = e.GetX();
y2 = e.GetY();
float xSize = Math.Abs(x1 - x2);
float ySize = Math.Abs(y1 - y2);
// Left or right swipe
if (xSize > ySize)
{
return false;
}
// Up or down swipe
else
{
return base.DispatchTouchEvent(e);
}
}
return base.DispatchTouchEvent(e);
}
}
}

Now, I can edit this page same what I want.

public class CustomCarouselPage : CarouselPage
{
// Constructor
public CustomCarouselPage()
{
Title = "Swipe Control";
Children.Add(new ContentPage() {BackgroundColor = Color.Coral});
Children.Add(new ContentPage() {BackgroundColor = Color.DarkSlateBlue});
Children.Add(new ContentPage() {BackgroundColor = Color.GreenYellow});
ToolbarItem toolbarItem = new ToolbarItem("Swipe", null, ToolbarItemClicked);
ToolbarItems.Add(toolbarItem);
}
private async void ToolbarItemClicked()
{
var answer = await DisplayActionSheet("Choose a selection", "Cancel", "",
"Enable",
"Disable");
if (answer == "Enable")
IsSwipping = true;
if (answer == "Disable")
IsSwipping = false;
}
public static readonly BindableProperty IsSwippingProperty = BindableProperty.Create(nameof(IsSwipping),typeof(bool), typeof(CustomCarouselPage), default(bool));
public bool IsSwipping
{ 
get { return (bool) GetValue(IsSwippingProperty); }
set { SetValue(IsSwippingProperty, value); }
}
}

All done! I tried to tell as short. I hope so :)
You can get source code of project on Github.

See u in next my post.