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

Gradient background color

4 Answers 112 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Adrien
Top achievements
Rank 1
Adrien asked on 05 Nov 2010, 12:33 PM
Hello,

Could you please tell me if and how these scenarios can be achieved:

(i)
Assume the user gives a grade using a slider. Other users have given grades to the same object and thus some average grade is known.
I need the slider to have a gradient background color (e.g. going from red="bad", yellow="average", to green="good") but stopping at the current average grade. In fact, the user can move the slider cursor to set a grade but the background always indicates what is the current average grade whatever his selection.

(ii)
Now using a range slider, I would like the background color of the range to be a gradient again, but this time it changes according to the selection of the user. Example: assuming a slider from 0-10, if the user selected the range 5-10, the region 0-5 should be neutral (something like grey) but 5-10 should be a gradient from yellow to green.

Thanks in advance.

Adrien

4 Answers, 1 is accepted

Sort by
0
Zarko
Telerik team
answered on 08 Nov 2010, 04:24 PM
Hello Adrien,

 Currently the RadSlider doesn't support the first scenario and the only work around is to construct a new LinearGradientBrush on every AverageGrade change.
 The easiest solution for the second scenario is to edit the RadSlider template and more specifically the HorizontalRangeSelectionThumbTemplate in Blend.
I've attached you a project with a sample work around for the first scenario and an updated template for the second, so could you please examine it and if you have further questions feel free to ask?

Regards,
Zarko
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
Adrien
Top achievements
Rank 1
answered on 08 Nov 2010, 05:39 PM
Dear Zarko,

Thank you very much for your efforts.

The first control you propose perfectly matches what I'm trying to achieve, thanks.

I'll have a more precise look on the second scenario with the range slider as the example you provide does not exactly fit my requirements:
Your control draws the range background with a gradient from color X to color Y, whatever the position of the two handles. I need that the starting color of the range (at the left handle) and the end color (at the right handle) depend on the absolute position of the handles. Let me explain through an example:
Let a range slider from 0 to 10.
- Selecting the full range of the slider draws a gradient from 0=red to 5=yellow, to 10=green
- Selecting 0-3 leads to a gradient from 0=red to 3=red/yellow for the range
- Selecting 3-10 leads to a gradient from 3=red/yellow to 10=green for the range

Is there a way to do it properly through Styles and binding, or should I go into the code, as for the first scenario?

Thank you in advance.

Best

0
Accepted
Zarko
Telerik team
answered on 09 Nov 2010, 10:54 AM
Hello Adrien,

 Sorry for the misunderstanding, the new scenario can be achieved by adding two new borders in the template.  I've updated the attached project, so could you please examine it and if you have further questions feel free to ask?

Greetings,
Zarko
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
Adrien
Top achievements
Rank 1
answered on 09 Nov 2010, 12:39 PM
Dear Zarko,

Thank you very much, it is exactly what I needed.

Best,

Adrien
Tags
Slider
Asked by
Adrien
Top achievements
Rank 1
Answers by
Zarko
Telerik team
Adrien
Top achievements
Rank 1
Share this question
or