custom images for trackbar

[vs vs]

hi,

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

[Nikolay]

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.

Regards,
Nikolay
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.

[Kyle]

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.

[George]

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.

Regards,
George
Telerik

 

 

[Laszlo]

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
Laszlo

[Dess | Tech Support Engineer, Principal]

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.
 
Regards,
Dess
Telerik