Gradient background color

5 posts, 1 answers
  1. Adrien
    Adrien avatar
    10 posts
    Member since:
    Nov 2010

    Posted 05 Nov 2010 Link to this post

    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
  2. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 08 Nov 2010 Link to this post

    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
  3. DevCraft banner
  4. Adrien
    Adrien avatar
    10 posts
    Member since:
    Nov 2010

    Posted 08 Nov 2010 Link to this post

    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

  5. Answer
    Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 09 Nov 2010 Link to this post

    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
  6. Adrien
    Adrien avatar
    10 posts
    Member since:
    Nov 2010

    Posted 09 Nov 2010 Link to this post

    Dear Zarko,

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

    Best,

    Adrien
Back to Top
DevCraft banner