Xamarin.Forms Slider Lock

Hello, my Xamarin friends!

Today, I am here with another new post in which I am going to tell you how to customize the Slider Lock. So, let's start.

So, we will first create a class whose name "SlideToActView" and then we will write a code in "C #".

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);
}
}
}

Please make sure to add view reference....

xmlns:local="clr-namespace:XamarinControlsApp.SliderLock"

Then, write the 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="Sliding to Unlock"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand" />
</Frame>
</local:SlideToActView.TrackBar>
<local:SlideToActView.FillBar>
<Frame CornerRadius="15"
HasShadow="false"
BackgroundColor="Green"
Padding="0" />
</local:SlideToActView.FillBar>
</local:SlideToActView>
<Label x:Name="MessageLbl"
FontAttributes="Bold"
TextColor="Green" />
</StackLayout>
</ContentPage>

And then, write the following code for sliding event.

public async void Handle_SlideCompleted(object sender, System.EventArgs e)
{
MessageLbl.Text = "Unlock Successfully!!";
await Navigation.PushAsync(new NextPage());
}

You should have your Slider Lock working!! If you want to watch a related video, click here Custom Slider Lock.