Forum Xamarin Xamarin.iOS

Custom vertical uislider, example anywhere?

EmilyChristyEmilyChristy GBMember ✭✭

I've got the basics of my app working using the standard uislider but I want to create a custom slider using custom images and I want it to be vertical. Are there any examples of any part of this for xamarin ios?


  • EmilyChristyEmilyChristy GBMember ✭✭

    or even just an example on creating any custom control? Or a control that inherits one of the standard controls..... anyone?

  • BrainloopBrainloopBrainloopBrainloop DEBeta, University ✭✭

    You can transform the slider. The following example will place the minimum value to the top. Use Math.Pi * 0.5f to put it to the bottom:

    var slider = new UISlider(...);
    slider.Transform = CGAffineTransformation.MakeRotation(Math.Pi * -0.5f);

    Alternatively, you can implement your own by placing a knob like thing on the screen and add a gesture recognizer to it.

  • CodeMonkeyCodeMonkey GBMember ✭✭✭
    edited April 2013


    I achieved the following slider:

    Using this code:

    UISlider textColorSlider = new UISlider(new RectangleF(100, 100, 205, 28));
                textColorSlider.BackgroundColor = UIColor.Clear;
                textColorSlider.MinimumTrackTintColor = UIColor.Clear;
                textColorSlider.MaximumTrackTintColor = UIColor.Clear;
                textColorSlider.SetMaxTrackImage(UIImage.FromBundle("Images/Common/1pxTransparent.png"), UIControlState.Normal);
                textColorSlider.SetMinTrackImage(UIImage.FromBundle("Images/Common/1pxTransparent"), UIControlState.Normal);
                textColorSlider.ThumbTintColor = UIColor.White;
                UIImageView image = new UIImageView(new RectangleF(0,0, textSizeSlider.Frame.Width, textSizeSlider.Frame.Height));
                image.Image = UIImage.FromFile("Images/Common/textColorBG.png");

    I don't know if this is the most efficient method (probably not) but it did what I needed.

    textColorBG.png is an image with rounded ends containing the color spectrum you see in the screenshot.
    1pxTransparent.png is just that, a 1px by 1px transparent png .

    You can use Krumelur's code to then rotate the slider.

Sign In or Register to comment.