Vertical slider in Xamarin Forms

A slider offers a way to get continuously values from the user within a given range of values. There are various type of sliders seen across different apps and can be roughly categorised into horizontal sliders , vertical sliders and circular slider based on its appearance. It can have continuous or discrete values based on the purpose of the slider within the application.

In most applications we customise the sliders to get the look and feel we desire. Most common customisations include changing the height, colour and orientation of the slider.

Today we will be looking into creating vertical sliders in xamarin forms application.We will also look at how to increase the height of the slider and colour of the slider.


How to create a vertical slider :

In Xamarin forms to create a vertical slider, you just have to rotate the slider by - 90 degrees.

   <Slider Rotation="-90" Minimum="0" Maximum="80" Value="0" AbsoluteLayout.LayoutBounds=".5,.5,500,90" AbsoluteLayout.LayoutFlags="PositionProportional"/>

This works seamlessly in both android as well as iOS platform.


How to increase the height and change the colour of the slider:

To increase the height  of the slider we need to add custom renderers in both the platforms.

Step 1: Create custom slider class in Xamarin forms.

using System;
using Xamarin.Forms;

namespace VerticalSlider
{
    public class CustomSlider:Slider 
    {
        public CustomSlider()
        {
        }
    }
}

Step 2: Create a custom renderer for the slider control on each platform. i.e; iOS and Android

[assembly: ExportRenderer(typeof(CustomSlider), typeof(CustomSliderRenderer))]
namespace VerticalSlider.iOS
{
    public class CustomSliderRenderer:SliderRenderer
    {
        public CustomSliderRenderer()
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
        {
            SetNativeControl(new MySlideriOS());
            base.OnElementChanged(e);
        }

    }

}

Step 3: Create a custom slider class

public class MySlideriOS : UISlider
    {
        public MySlideriOS()
        {
        }
   }

Step 4: Override Track Rect For Bounds method to change the height of the slider.
In this method you could return the desired rect for the bounds of the slider.

   public class MySlideriOS : UISlider
    {
        public MySlideriOS()
        {
            
        }

        public override CGRect TrackRectForBounds(CGRect forBounds)
        {
            CGRect rect = base.TrackRectForBounds(forBounds);
            return new CGRect(rect.X, rect.Y, rect.Width, 20);
        }
}

Step 5: When changing the height of the slider in iOS, the most common issue faced is that it loses its rounded corners when the thumb reaches the extreme ends.

To overcome this issue we need to provide the minimum and maximum track images to the slider.

If in case, you are using a custom image you can provide the images to the slider. Otherwise you could just create an image out of a colour and provide it to the slider.

Here is the method to create image from a colour.

        public UIImage GetImage(CGRect recttoDraw)
        {
            CGRect rect = recttoDraw;

            CALayer layer = new CALayer();
            layer.Frame = recttoDraw;
            layer.CornerRadius = (System.nfloat)( (0.35 * this.Frame.Height));
            layer.BackgroundColor = UIColor.Red.CGColor;
            UIGraphics.BeginImageContext(layer.Frame.Size);
            layer.RenderInContext(UIGraphics.GetCurrentContext());
            UIImage image = UIGraphics.GetImageFromCurrentImageContext();
            UIGraphics.EndImageContext();
            return image;

        }

Step 6: Change the maximum track image in the custom slider constructor

        public MySlideriOS()
        {
            this.MaximumTrackTintColor = UIColor.Gray;

            UIImage img = GetImage(new CGRect(0, 0, 400, 400));

            this.SetMinTrackImage(img.CreateResizableImage(new UIEdgeInsets(13, 15, 15, 14)), UIControlState.Normal);
            this.SetMinTrackImage(img.CreateResizableImage(new UIEdgeInsets(13, 15, 15, 14)), UIControlState.Selected);

        }

Step 7: In the custom renderer's  overridden  On element changed method replace the control with the custom slider.

 protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
        {
            SetNativeControl(new MySlideriOS());
            base.OnElementChanged(e);
        }

Here is how the custom slider renderer should look at the end

using System;
using CoreAnimation;
using CoreGraphics;
using UIKit;
using VerticalSlider;
using VerticalSlider.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomSlider), typeof(CustomSliderRenderer))]
namespace VerticalSlider.iOS
{
    public class CustomSliderRenderer:SliderRenderer
    {
        public CustomSliderRenderer()
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
        {
            SetNativeControl(new MySlideriOS());
            base.OnElementChanged(e);
        }

    }

    public class MySlideriOS : UISlider
    {
        public MySlideriOS()
        {
            this.MaximumTrackTintColor = UIColor.Gray;

            UIImage img = GetImage(new CGRect(0, 0, 400, 400));

            this.SetMinTrackImage(img.CreateResizableImage(new UIEdgeInsets(13, 15, 15, 14)), UIControlState.Normal);
            this.SetMinTrackImage(img.CreateResizableImage(new UIEdgeInsets(13, 15, 15, 14)), UIControlState.Selected);

        }

        public override CGRect TrackRectForBounds(CGRect forBounds)
        {
            CGRect rect = base.TrackRectForBounds(forBounds);
            return new CGRect(rect.X, rect.Y, rect.Width, 20);
        }

        public UIImage GetImage(CGRect recttoDraw)
        {
            CGRect rect = recttoDraw;

            CALayer layer = new CALayer();
            layer.Frame = recttoDraw;
            layer.CornerRadius = (System.nfloat)( (0.35 * this.Frame.Height));
            layer.BackgroundColor = UIColor.Red.CGColor;
            UIGraphics.BeginImageContext(layer.Frame.Size);
            layer.RenderInContext(UIGraphics.GetCurrentContext());
            UIImage image = UIGraphics.GetImageFromCurrentImageContext();
            UIGraphics.EndImageContext();
            return image;

        }
    }
}

Also don't forget to use the custom slider control in the xamarin forms axml file

<local:CustomSlider Rotation="-90" Minimum="0" Maximum="80" Value="0" 
        AbsoluteLayout.LayoutBounds=".5,.5,500,90" AbsoluteLayout.LayoutFlags="PositionProportional"/>

Here is how the slider is going to look at the end.

I hope you enjoyed this blog ...You can find the complete source code here

https://github.com/pooja-kamath/VerticalSlider.git

I would been soon posting  a blog on how to change the height of the slider in android. Stay tuned..

Handling keyboard events in xamarin

Forms are the lynchpin of all mobile interactions. It stands in-between the user and what they are looking for. Forms are just a mean to an end, and the user must be able to complete them without any confusion.

The most important UI element which helps us fill a form is the keyboard and it is really important to provide the user with a keyboard which assists them to fill the form without any hassle. To achieve this it's really essential to handle the keyboard events.

The keyboard enter key provides convenience to the user when filling a form.It can either dismiss the keyboard or move the cursor to the next field which needs to be filled .

In this blogs we will be looking at ways to handle keyboard key events in a Xamarin.Forms application. In the sample we have considered the back button action.

For iOS  :

Step 1 : Create a custom entry class and create a delegate to handle the back button press

public class CustomEntry: Entry
{
    public delegate void BackButtonPressEventHandler(object sender, EventArgs e);

    public event BackButtonPressEventHandler OnBackButton;

    public CustomEntry() { }

    public void OnBackButtonPress() 
    {
        if (OnBackButton!= null)
        {
            OnBackButton(null, null);
        }
    }
}

Step 2 :Within the custom renderer namespace , create a custom text field class.

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace Origination.iOS.Renderers
{
    public class CustomTextField: UITextField
    {
    }
}

Step 3: Within the custom text field, create a event and delegate to handle the delete button click.

public class CustomTextField: UITextField
    {
        // A delegate type for hooking up change notifications.
        public delegate void DeleteBackwardKeyEventHandler(object sender, EventArgs e);

        // An event that clients can use to be notified whenever the
        // elements of the list change.
        public event DeleteBackwardKeyEventHandler OnDeleteBackwardKey;


        public void OnDeleteBackwardKeyPressed()
        {
            if (OnDeleteBackwardKey != null)
            {
                OnDeleteBackwardKey(null, null);
            }
        }

        public override void DeleteBackward()
        {
            base.DeleteBackward();
            OnDeleteBackwardKeyPressed();
        }
}

Step 4 :Within the custom renderer name space, Create custom renderer class.

 public class CustomEntryRenderer: EntryRenderer, IUITextFieldDelegate
 {
 }

Step 5:Within the custom renderer's OnElementChanged method create a text field of the custom text field type.

Step 6: Handle the custom text field delete event by passing it to the custom entry back button event handler.

Step 7: Assign the custom text field object to native control.

protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
            {
                if (Element == null) 
                {
                    return;
                }

                var entry = (CustomEntry)Element;
                var textField = new CustomTextField();

               textField.EditingChanged += OnEditingChanged;
                textField.OnDeleteBackwardKey += (sender, a) =>
                {
                    entry.OnBackButtonPress();
                };

                SetNativeControl(textField);

                base.OnElementChanged(e);
            }

Step 8 : Add the editing changed handler

IElementController ElementController => Element as IElementController;

 void OnEditingChanged(object sender, EventArgs eventArgs)
        {
            ElementController.SetValueFromRenderer(Entry.TextProperty, Control.Text);
        }

For Android:

In the custom renderer you can handle the key press event and look for the Keycode.Back.In android customising the text fields are not required.

((EditText)this.Control).KeyPress += (object sender, View.KeyEventArgs even) => { 
        even.Handled = false; 
       if (even.Event.Action == KeyEventActions.Down && even.KeyCode == Keycode.Back) 
       { 
          //your logic here even.Handled = true;
        }