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));
  10. public View Thumb
  11. {
  12. get { return (View)GetValue(ThumbProperty); }
  13. set { SetValue(ThumbProperty, value); }
  14. }
  16. public static readonly BindableProperty TrackBarProperty =
  17. BindableProperty.Create(
  18. nameof(TrackBar),
  19. typeof(View),
  20. typeof(SlideToActView),
  21. defaultValue: default(View));
  23. public View TrackBar
  24. {
  25. get { return (View)GetValue(TrackBarProperty); }
  26. set { SetValue(TrackBarProperty, value); }
  27. }
  29. public static readonly BindableProperty FillBarProperty =
  30. BindableProperty.Create(
  31. nameof(FillBar), typeof(View), typeof(SlideToActView),
  32. defaultValue: default(View));
  34. public View FillBar
  35. {
  36. get { return (View)GetValue(FillBarProperty); }
  37. set { SetValue(FillBarProperty, value); }
  38. }
  40. private PanGestureRecognizer _panGesture = new PanGestureRecognizer();
  41. private View _gestureListener;
  43. public SlideToActView()
  44. {
  45. _panGesture.PanUpdated += OnPanGestureUpdated;
  46. SizeChanged += OnSizeChanged;
  48. _gestureListener = new ContentView { BackgroundColor = Color.White, Opacity = 0.05 };
  49. _gestureListener.GestureRecognizers.Add(_panGesture);
  50. }
  52. public event EventHandler SlideCompleted;
  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;
  61. switch (e.StatusType)
  62. {
  63. case GestureStatus.Started:
  64. await TrackBar.FadeTo(_fadeEffect, _animLength);
  65. break;
  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);
  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;
  80. case GestureStatus.Completed:
  81. var posX = Thumb.TranslationX;
  82. SetLayoutBounds(FillBar, new Rectangle(0, 0, 0, this.Height));
  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. });
  90. if (posX >= (Width - Thumb.Width - 10/* keep some margin for error*/))
  91. SlideCompleted?.Invoke(this, EventArgs.Empty);
  92. break;
  93. }
  94. }
  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;
  104. Children.Clear();
  106. SetLayoutFlags(TrackBar, AbsoluteLayoutFlags.SizeProportional);
  107. SetLayoutBounds(TrackBar, new Rectangle(0, 0, 1, 1));
  108. Children.Add(TrackBar);
  110. SetLayoutFlags(FillBar, AbsoluteLayoutFlags.None);
  111. SetLayoutBounds(FillBar, new Rectangle(0, 0, 0, this.Height));
  112. Children.Add(FillBar);
  114. SetLayoutFlags(Thumb, AbsoluteLayoutFlags.None);
  115. SetLayoutBounds(Thumb, new Rectangle(0, 0, this.Width / 5, this.Height));
  116. Children.Add(Thumb);
  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>
  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>
  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.