Xamarin.Forms Slider Lock

Hello My Xamarin Friends,

Today, I have come up with a post in which I am going to tell you how to customize the Slider Lock.  Let's start,

First, we will create a class whose name is "SlideToActView", then we will write a code in "C #"

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	using Xamarin.Forms;
	namespace XamarinControlsApp.SliderLock
	{
	public class SlideToActView : AbsoluteLayout
	{
	public static readonly BindableProperty ThumbProperty =
	BindableProperty.Create(
	nameof(Thumb), typeof(View), typeof(SlideToActView),
	defaultValue: default(View));
	public View Thumb
	{
	get { return (View)GetValue(ThumbProperty); }
	set { SetValue(ThumbProperty, value); }
	}
	public static readonly BindableProperty TrackBarProperty =
	BindableProperty.Create(
	nameof(TrackBar),
	typeof(View),
	typeof(SlideToActView),
	defaultValue: default(View));
	public View TrackBar
	{
	get { return (View)GetValue(TrackBarProperty); }
	set { SetValue(TrackBarProperty, value); }
	}
	public static readonly BindableProperty FillBarProperty =
	BindableProperty.Create(
	nameof(FillBar), typeof(View), typeof(SlideToActView),
	defaultValue: default(View));
	public View FillBar
	{
	get { return (View)GetValue(FillBarProperty); }
	set { SetValue(FillBarProperty, value); }
	}
	private PanGestureRecognizer _panGesture = new PanGestureRecognizer();
	private View _gestureListener;
	public SlideToActView()
	{
	_panGesture.PanUpdated += OnPanGestureUpdated;
	SizeChanged += OnSizeChanged;
	_gestureListener = new ContentView { BackgroundColor = Color.White, Opacity = 0.05 };
	_gestureListener.GestureRecognizers.Add(_panGesture);
	}
	public event EventHandler SlideCompleted;
	private const double _fadeEffect = 0.5;
	private const uint _animLength = 50;
	async void OnPanGestureUpdated(object sender, PanUpdatedEventArgs e)
	{
	if (Thumb == null || TrackBar == null || FillBar == null)
	return;
	switch (e.StatusType)
	{
	case GestureStatus.Started:
	await TrackBar.FadeTo(_fadeEffect, _animLength);
	break;
	case GestureStatus.Running:
	// Translate and ensure we don't pan beyond the wrapped user interface element bounds.
	var x = Math.Max(0, e.TotalX);
	if (x > (Width - Thumb.Width))
	x = (Width - Thumb.Width);
	//Uncomment this if you want only forward dragging.
	//if (e.TotalX < Thumb.TranslationX)
	// return;
	Thumb.TranslationX = x;
	SetLayoutBounds(FillBar, new Rectangle(0, 0, x + Thumb.Width / 2, this.Height));
	break;
	case GestureStatus.Completed:
	var posX = Thumb.TranslationX;
	SetLayoutBounds(FillBar, new Rectangle(0, 0, 0, this.Height));
	// Reset translation applied during the pan
	await Task.WhenAll(new Task[]{
	TrackBar.FadeTo(1, _animLength),
	Thumb.TranslateTo(0, 0, _animLength * 2, Easing.CubicIn),
	});
	if (posX >= (Width - Thumb.Width - 10/* keep some margin for error*/))
	SlideCompleted?.Invoke(this, EventArgs.Empty);
	break;
	}
	}
	void OnSizeChanged(object sender, EventArgs e)
	{
	if (Width == 0 || Height == 0)
	return;
	if (Thumb == null || TrackBar == null || FillBar == null)
	return;
	Children.Clear();
	SetLayoutFlags(TrackBar, AbsoluteLayoutFlags.SizeProportional);
	SetLayoutBounds(TrackBar, new Rectangle(0, 0, 1, 1));
	Children.Add(TrackBar);
	SetLayoutFlags(FillBar, AbsoluteLayoutFlags.None);
	SetLayoutBounds(FillBar, new Rectangle(0, 0, 0, this.Height));
	Children.Add(FillBar);
	SetLayoutFlags(Thumb, AbsoluteLayoutFlags.None);
	SetLayoutBounds(Thumb, new Rectangle(0, 0, this.Width / 5, this.Height));
	Children.Add(Thumb);
	SetLayoutFlags(_gestureListener, AbsoluteLayoutFlags.SizeProportional);
	SetLayoutBounds(_gestureListener, new Rectangle(0, 0, 1, 1));
	Children.Add(_gestureListener);
	}
	}
	}

view raw SlideToActView.cs hosted with ❤ by GitHub

Please make sure to add view reference.....
xmlns:local="clr-namespace:XamarinControlsApp.SliderLock"
then write xaml code in main page.

	<?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:local1="clr-namespace:XamarinControlsApp"
	x:Class="XamarinControlsApp.MainPage"
	xmlns:local="clr-namespace:XamarinControlsApp.SliderLock"
	Title="Slider Lock">
	<StackLayout Margin="35">
	<local:SlideToActView HeightRequest="50"
	SlideCompleted="Handle_SlideCompleted">
	<local:SlideToActView.Thumb>
	<Frame CornerRadius="15"
	HasShadow="false"
	BackgroundColor="Silver"
	Padding="0">
	<Image Source="icon.png"
	HorizontalOptions="Center"
	VerticalOptions="Center"
	HeightRequest="35"
	WidthRequest="35" />
	</Frame>
	</local:SlideToActView.Thumb>
	<local:SlideToActView.TrackBar>
	<Frame CornerRadius="15"
	HasShadow="false"
	BackgroundColor="Gray"
	Padding="0">
	<Label Text="Slide 'x' to cancel"
	HorizontalOptions="CenterAndExpand"
	VerticalOptions="CenterAndExpand" />
	</Frame>
	</local:SlideToActView.TrackBar>
	<local:SlideToActView.FillBar>
	<Frame CornerRadius="15"
	HasShadow="false"
	BackgroundColor="Red"
	Padding="0" />
	</local:SlideToActView.FillBar>
	</local:SlideToActView>
	<Label x:Name="MessageLbl"
	FontAttributes="Bold"
	TextColor="Green" />
	</StackLayout>
	</ContentPage>

view raw MainPage.xaml.cs hosted with ❤ by GitHub

TADDAAAA!

Now, you will have your Slider Lock working!!
If You want to watch related video click Here Custom Slider Lock