mike chang
Top achievements
Rank 1
mike chang
asked on 05 Oct 2010, 12:06 PM
i am working on styling radlider like http://demo.componentone.com/Silverlight/ControlExplorer/#Chart/Overview%20Plus%20Detail did,
can u show me how to do with telerik,
thank you
can u show me how to do with telerik,
thank you
4 Answers, 1 is accepted
0
Hello mike chang,
I am afraid I don't see a Slider in the link you sent. Can you please send us a snapshot of the slider style you need to create? Thank you in advance.
Regards,
Tina Stancheva
the Telerik team
I am afraid I don't see a Slider in the link you sent. Can you please send us a snapshot of the slider style you need to create? Thank you in advance.
Regards,
Tina Stancheva
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
mike chang
Top achievements
Rank 1
answered on 07 Oct 2010, 04:59 PM
thanks
0
Hi mike chang,
In order to modify the default style of the RadSlider you have to edit its ControlTemplate - read more.
I prepared a sample project containing a custom RadSlider style that looks like the snapshot you sent. Take a look at it and let us know if we can further assist you.
Also, bellow is the list of changes that I implemented in the default ControlTemplate of the RadSlider. I hope this information will help you.
1. Modify the "HorizontalRangeSelectionThumb" Template:
-remove Height property
-set Margin to 3
2. Modify the RadSlider ControlTemplate:
-Set HorizontalAlignment to Stretch
-Set the "HorizontalRangeStartThumb" thumb element HorizontalAlignment = Left
-Set the "HorizontalRangeEndThumb" thumb element HorizontalAlignment = Right
3. Also, change the following resources accordingly:
Kind regards,
Tina Stancheva
the Telerik team
In order to modify the default style of the RadSlider you have to edit its ControlTemplate - read more.
I prepared a sample project containing a custom RadSlider style that looks like the snapshot you sent. Take a look at it and let us know if we can further assist you.
Also, bellow is the list of changes that I implemented in the default ControlTemplate of the RadSlider. I hope this information will help you.
1. Modify the "HorizontalRangeSelectionThumb" Template:
- Modify "border" Border element by:
-remove Height property
-set Margin to 3
2. Modify the RadSlider ControlTemplate:
- Modify "HorizontalRangeTemplate" Grid element:
- Modify the "HorizontalRangeMiddleThumb" thumb element
-Set HorizontalAlignment to Stretch
- Rearrange the Thumbs elements so that the "HorizontalRangeMiddleThumb" element spans through the whole range. In order to do so:
-Set the "HorizontalRangeStartThumb" thumb element HorizontalAlignment = Left
-Set the "HorizontalRangeEndThumb" thumb element HorizontalAlignment = Right
3. Also, change the following resources accordingly:
- "SliderRangeMiddleThumb_Margin" Thickness controls the "HorizontalRangeMiddleThumb" element BorderTickness - set it to 1
- "SliderRangeMiddleThumb_Background" LinearGradientBrush controls the "HorizontalRangeMiddleThumb" element Normal state background - replace it with a SolidColorBrush with Color="Transparent"
- "SliderRangeMiddleThumb_Background_State" LinearGradientBrush controls the "HorizontalRangeMiddleThumb" element MouseOver state background - replace it with a SolidColorBrush with Color="Transparent"
Kind regards,
Tina Stancheva
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
mike chang
Top achievements
Rank 1
answered on 14 Oct 2010, 03:37 AM
that is what i want!, thank you!