Post
Ask Question

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 #".

  1. namespace XamarinControlsApp.SliderLock  
  2. {  
  3.     public class SlideToActView : AbsoluteLayout  
  4.     {  
  5.         public static readonly BindableProperty ThumbProperty =  
  6.             BindableProperty.Create(  
  7.                 nameof(Thumb), typeof(View), typeof(SlideToActView),  
  8.                 defaultValue: default(View));  
  9.   
  10.         public View Thumb  
  11.         {  
  12.             get { return (View)GetValue(ThumbProperty); }  
  13.             set { SetValue(ThumbProperty, value); }  
  14.         }  
  15.   
  16.         public static readonly BindableProperty TrackBarProperty =  
  17.             BindableProperty.Create(  
  18.                 nameof(TrackBar),  
  19.                 typeof(View),  
  20.                 typeof(SlideToActView),  
  21.                 defaultValue: default(View));  
  22.   
  23.         public View TrackBar  
  24.         {  
  25.             get { return (View)GetValue(TrackBarProperty); }  
  26.             set { SetValue(TrackBarProperty, value); }  
  27.         }  
  28.   
  29.         public static readonly BindableProperty FillBarProperty =  
  30.             BindableProperty.Create(  
  31.                 nameof(FillBar), typeof(View), typeof(SlideToActView),  
  32.                 defaultValue: default(View));  
  33.   
  34.         public View FillBar  
  35.         {  
  36.             get { return (View)GetValue(FillBarProperty); }  
  37.             set { SetValue(FillBarProperty, value); }  
  38.         }  
  39.   
  40.         private PanGestureRecognizer _panGesture = new PanGestureRecognizer();  
  41.         private View _gestureListener;  
  42.   
  43.         public SlideToActView()  
  44.         {  
  45.             _panGesture.PanUpdated += OnPanGestureUpdated;  
  46.             SizeChanged += OnSizeChanged;  
  47.   
  48.             _gestureListener = new ContentView { BackgroundColor = Color.White, Opacity = 0.05 };  
  49.             _gestureListener.GestureRecognizers.Add(_panGesture);  
  50.         }  
  51.   
  52.         public event EventHandler SlideCompleted;  
  53.   
  54.         private const double _fadeEffect = 0.5;  
  55.         private const uint _animLength = 50;  
  56.         async void OnPanGestureUpdated(object sender, PanUpdatedEventArgs e)  
  57.         {  
  58.             if (Thumb == null || TrackBar == null || FillBar == null)  
  59.                 return;  
  60.   
  61.             switch (e.StatusType)  
  62.             {  
  63.                 case GestureStatus.Started:  
  64.                     await TrackBar.FadeTo(_fadeEffect, _animLength);  
  65.                     break;  
  66.   
  67.                 case GestureStatus.Running:  
  68.                     // Translate and ensure we don't pan beyond the wrapped user interface element bounds.  
  69.                     var x = Math.Max(0, e.TotalX);  
  70.                     if (x > (Width - Thumb.Width))  
  71.                         x = (Width - Thumb.Width);  
  72.   
  73.                     //Uncomment this if you want only forward dragging.  
  74.                     //if (e.TotalX < Thumb.TranslationX)  
  75.                     //    return;  
  76.                     Thumb.TranslationX = x;  
  77.                     SetLayoutBounds(FillBar, new Rectangle(0, 0, x + Thumb.Width / 2, this.Height));  
  78.                     break;  
  79.   
  80.                 case GestureStatus.Completed:  
  81.                     var posX = Thumb.TranslationX;  
  82.                     SetLayoutBounds(FillBar, new Rectangle(0, 0, 0, this.Height));  
  83.   
  84.                     // Reset translation applied during the pan  
  85.                     await Task.WhenAll(new Task[]{  
  86.                     TrackBar.FadeTo(1, _animLength),  
  87.                     Thumb.TranslateTo(0, 0, _animLength * 2, Easing.CubicIn),  
  88.                 });  
  89.   
  90.                     if (posX >= (Width - Thumb.Width - 10/* keep some margin for error*/))  
  91.                         SlideCompleted?.Invoke(this, EventArgs.Empty);  
  92.                     break;  
  93.             }  
  94.         }  
  95.   
  96.         void OnSizeChanged(object sender, EventArgs e)  
  97.         {  
  98.             if (Width == 0 || Height == 0)  
  99.                 return;  
  100.             if (Thumb == null || TrackBar == null || FillBar == null)  
  101.                 return;  
  102.   
  103.   
  104.             Children.Clear();  
  105.   
  106.             SetLayoutFlags(TrackBar, AbsoluteLayoutFlags.SizeProportional);  
  107.             SetLayoutBounds(TrackBar, new Rectangle(0, 0, 1, 1));  
  108.             Children.Add(TrackBar);  
  109.   
  110.             SetLayoutFlags(FillBar, AbsoluteLayoutFlags.None);  
  111.             SetLayoutBounds(FillBar, new Rectangle(0, 0, 0, this.Height));  
  112.             Children.Add(FillBar);  
  113.   
  114.             SetLayoutFlags(Thumb, AbsoluteLayoutFlags.None);  
  115.             SetLayoutBounds(Thumb, new Rectangle(0, 0, this.Width / 5, this.Height));  
  116.             Children.Add(Thumb);  
  117.   
  118.             SetLayoutFlags(_gestureListener, AbsoluteLayoutFlags.SizeProportional);  
  119.             SetLayoutBounds(_gestureListener, new Rectangle(0, 0, 1, 1));  
  120.             Children.Add(_gestureListener);  
  121.         }  
  122.     }  
  123. } 

Please make sure to add view reference....

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

Then, write the XAML code in main page.

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local1="clr-namespace:XamarinControlsApp"  
  5.              x:Class="XamarinControlsApp.MainPage"  
  6.              xmlns:local="clr-namespace:XamarinControlsApp.SliderLock"  
  7.              Title="Slider Lock">  
  8.     <StackLayout Margin="35">  
  9.         <local:SlideToActView HeightRequest="50"  
  10.                               SlideCompleted="Handle_SlideCompleted">  
  11.             <local:SlideToActView.Thumb>  
  12.                 <Frame CornerRadius="15"  
  13.                        HasShadow="false"   
  14.                        BackgroundColor="Silver"   
  15.                        Padding="0">  
  16.                     <Image Source="icon.png"  
  17.                            HorizontalOptions="Center"   
  18.                            VerticalOptions="Center"   
  19.                            HeightRequest="35"   
  20.                            WidthRequest="35" />  
  21.                 </Frame>  
  22.             </local:SlideToActView.Thumb>  
  23.   
  24.             <local:SlideToActView.TrackBar>  
  25.                 <Frame CornerRadius="15"   
  26.                        HasShadow="false"   
  27.                        BackgroundColor="Gray"   
  28.                        Padding="0">  
  29.                     <Label Text="Sliding to Unlock"   
  30.                            HorizontalOptions="CenterAndExpand"   
  31.                            VerticalOptions="CenterAndExpand" />  
  32.                 </Frame>  
  33.             </local:SlideToActView.TrackBar>  
  34.   
  35.             <local:SlideToActView.FillBar>  
  36.                 <Frame CornerRadius="15"   
  37.                        HasShadow="false"   
  38.                        BackgroundColor="Green"   
  39.                        Padding="0" />  
  40.             </local:SlideToActView.FillBar>  
  41.         </local:SlideToActView>  
  42.         <Label x:Name="MessageLbl"   
  43.                FontAttributes="Bold"   
  44.                TextColor="Green" />  
  45.     </StackLayout>  
  46. </ContentPage>  
And then, write the following code for sliding event.
  1. public async void Handle_SlideCompleted(object sender, System.EventArgs e)  
  2.         {  
  3.             MessageLbl.Text = "Unlock Successfully!!";  
  4.             await Navigation.PushAsync(new NextPage());  
  5.         }  

You should have your Slider Lock working!! If you want to watch a related video, click here Custom Slider Lock.
Next Recommended Reading 10 Awesome Designs with Xamarin Forms UI - Part 1