This is a migrated thread and some comments may be shown as answers.

custom images for trackbar

5 Answers 191 Views
TrackBar
This is a migrated thread and some comments may be shown as answers.
vs vs
Top achievements
Rank 1
vs vs asked on 10 Feb 2010, 03:23 AM
hi,

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

5 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 15 Feb 2010, 11:57 AM
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.
0
Kyle
Top achievements
Rank 1
answered on 07 Jul 2014, 02:52 PM
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.


0
George
Telerik team
answered on 10 Jul 2014, 12:13 PM
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
 
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.
 
0
Laszlo
Top achievements
Rank 1
answered on 30 Jan 2015, 08:10 AM
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





0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 03 Feb 2015, 03:21 PM
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
 

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.

 
Tags
TrackBar
Asked by
vs vs
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Kyle
Top achievements
Rank 1
George
Telerik team
Laszlo
Top achievements
Rank 1
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or