custom images for trackbar

6 posts, 0 answers
  1. vs vs
    vs vs avatar
    5 posts
    Member since:
    Jan 2010

    Posted 09 Feb 2010 Link to this post


    i want to apply my own custom images for trackbar. is there any way to do that?

  2. Nikolay
    Nikolay avatar
    1805 posts

    Posted 15 Feb 2010 Link to this post

    Hello vs vs,

    I presume that you want to apply a custom image to the thumb of RadTrackBar. This is possible thanks to the Telerik Presentation Framework which is the base of our RadControls for WinForms.

    In order to achieve your requirement you should first make a custom RadTrackBar control that inherits from the RadTrackBar class. Then, you should remove TrackBarThumb's BorderPrimitive and FillPrimitive, and add an ImagePrimitive. You can apply an image in the custom track bar class, which will be the default image and will appear at design time, or you can apply an image programmatically in the Form_Load event handler. I am attaching a sample project to demonstrate this approach.

    I hope that this information is helpful. If you have additional questions, feel free to contact me.

    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Kyle
    Kyle avatar
    1 posts
    Member since:
    Jul 2014

    Posted 07 Jul 2014 in reply to Nikolay Link to this post

    Hi Nikolay,

    I tried using this control but it blows up on the SlideAreaWidth , SliderColor1  , SliderColor2 and TicksColor properties.

    Which version allows for you to specify the background colors for the slider? i would like those to be transparent or my background color. i would like ticks to be invisible. i can't figure out how to program the slider to not show a "themed" background.

  4. George
    George avatar
    500 posts

    Posted 10 Jul 2014 Link to this post

    Hi Kyle,

    Thank you for writing.

    In Q2 2013 a new version of RadTrackBar was released, which explains the exceptions you are getting. You can see the changelog here. For the latest version of RadTrackBar you can set transparent background to the thumb as follows:
    TrackBarThumbElement thumb = (trackBar.TrackBarElement.BodyElement.IndicatorContainerElement.Children[0] as TrackBarIndicatorElement).EndThumbElement;
    thumb.GradientStyle = GradientStyles.Solid;
    thumb.BackColor = Color.Transparent;

    Hiding the ticks can happen by setting of the TickStyle​ property:
    trackBar.TickStyle = TickStyles.None;

    You can also read the documentation of RadTrackBar here.

    I hope this helps.

    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
  5. Laszlo
    Laszlo avatar
    3 posts
    Member since:
    Jan 2015

    Posted 30 Jan 2015 in reply to George Link to this post

    Hi George,

    I would like to set a custom image for the trackbar, and I would like to set its Margins too. I have tried the following code, but the image wont be displayed:

    var rtrb = new Telerik.WinControls.UI.RadTrackBar();
    rtrb.TrackBarMode = Telerik.WinControls.UI.TrackBarRangeMode.Range;
    rtrb.Ranges.Add(new Telerik.WinControls.UI.TrackBarRange());
    rtrb.TrackBarElement.BackgroundShape = new RadImageShape();
    rtrb.TrackBarElement.BackgroundShape.Image = new Bitmap(@"r:\value.bmp");
    rtrb.TrackBarElement.BackgroundShape.Margins = new Padding(10, 0, 0, 0);

    Can you help me please what should I set to get the background image?

    Thanks in advance

  6. Dess
    Dess avatar
    2423 posts

    Posted 03 Feb 2015 Link to this post

    Hello Laszlo,

    Thank you for writing.

    You should apply the BackgroundShape to the TrackBarElement.BodyElement.
    this.radTrackBar1.TrackBarMode = Telerik.WinControls.UI.TrackBarRangeMode.Range;
    this.radTrackBar1.Ranges.Add(new Telerik.WinControls.UI.TrackBarRange());
    this.radTrackBar1.TrackBarElement.BodyElement.BackgroundShape = new RadImageShape();
    this.radTrackBar1.TrackBarElement.BodyElement.BackgroundShape.Image = new Bitmap(@"..\..\..\ballons-image.jpg");

    In order to modify the BackgroundShape padding, you need to specify its Padding property.

    I hope this information helps. Should you have further questions, I would be glad to help.

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top