CODEWITHSUNDEEP
iosxamarinslideruislider
shivanju0801
shivanju0801

Reputation: 141

Change the position of thumb image on the slider bar

I customised the slider with adding the thumb image as suggested in below link. https://github.com/xamarin/recipes/tree/master/Recipes/ios/standard_controls/sliders/specify_slider_appearance

By default, Image is attached to the bar at it's centre. I want to move that to the bottom of the image. Can anyone help me with that. i want it as shown here.

Upvotes: 0

Views: 1136

Answers (2)

ColeX
ColeX

Reputation: 14475

You can customize UISlider and override ThumbRectForBounds method. The method Returns the drawing rectangle for the slider’s thumb image.

Code :

public partial class ViewController1 : UIViewController 
{
    public ViewController1() : base("ViewController1", null)
    {
    }

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();

        MySlider slider = new MySlider();
        slider.Frame = new CGRect(50, 50, 100, 20);
        View.Add(slider);
    }
}


public class MySlider : UISlider
{
    public MySlider()
    {
        this.SetThumbImage(UIImage.FromFile("1.png"), UIControlState.Normal);
    }

    public override CGRect ThumbRectForBounds(CGRect bounds, CGRect trackRect, float value)
    {
        CGRect rect = base.ThumbRectForBounds(bounds, trackRect, value);
        return new CGRect(rect.X, -10, rect.Width, rect.Height);
    }
}

enter image description here

Upvotes: 1

glyvox
glyvox

Reputation: 58129

Create an image which has full transparency at its bottom half and set it as the thumb image. Something like this:

half transparent image

Upvotes: 0

Related Questions