I want to split the progress bar. i.e Upto particular point i want one color, remaining will be another color.
For example with following code
<
telerik:RadProgressBar x:Name="pb" Width="220" Height="15" Minimum="0" Maximum="100" Value="10" Margin="40,4,0,4" />
Upto say value=30 i want grey color and above that point i need default color.
Please suggest/provide sample code.
Regards
Sreeju
9 Answers, 1 is accepted
You can use a combination of the SkipValue and Value properties to achieve this. When the Value is less than 30, you can set the foreground of the progress bar to gray. When the value becomes greater than 30, you can set the SkipValue to 30 and start incrementing the value from 0. Then you can set the Background of the progressbar with a gradient so that only the first 30% of the background is gray and the rest is the default color. I have put together and attached a small project of the suggested approach.
Regards,
Alex Fidanov
the Telerik team


I need to draw a line at skip value point. For example suppose SKipValue = 20, i need to draw line at point 20.
Please suggest/provide sample code.
Thanks & Regards
Sreeju
Please find the attached solution where I`ve edited the control Template of the RadProgressBar and added an additional Rectangle. Hope this satisfies your needs.
Kind regards,
Petar Mladenov
the Telerik team

Hi Alex,
I need three different color in rad progress bar could you please help me .
1)for 30 gray
2)between 30-60% yellow.
3)after 60 should be green.
Kind Regards,
Arvind Kuar Singh
Please check out the following help article describing how to set up the basin background / foreground colors of RadProgressBar:
RadProregssBar Styling and Appearance
The rest of the work is to set LinearGradientBrush with Gradient Stops. They will give you the ability to combine several colors into sections of the Brush.
LinearGradient Brush MSDN
Regards,
Petar Mladenov
Telerik by Progress

Thank You Petar.
I am very new in wpf, Can we use Skipvalue property for fill the different color,in progress bar.
we require 3 different color.
0-30% --yellow
30-60%--Green
60-100% Red
All three color should we persist in progress bar
could you please provide any sample code.
Appreciate your help .
Kind Regards,
Arvind Kumar Singh
Please find the following setup and the result in the attached picture. As previously described, you need only the foreground property which can accept LinearGradientBrush with gradient stops.
<
telerik:RadProgressBar
VerticalAlignment
=
"Center"
HorizontalAlignment
=
"Stretch"
Margin
=
"30"
Value
=
"9"
Minimum
=
"1"
Maximum
=
"10"
>
<
telerik:RadProgressBar.Foreground
>
<
LinearGradientBrush
StartPoint
=
"0, 0.5"
EndPoint
=
"1, 0.5"
>
<
GradientStop
Color
=
"Yellow"
Offset
=
"0.3"
/>
<
GradientStop
Color
=
"Green"
Offset
=
"0.3"
/>
<
GradientStop
Color
=
"Green"
Offset
=
"0.6"
/>
<
GradientStop
Color
=
"Red"
Offset
=
"0.6"
/>
</
LinearGradientBrush
>
</
telerik:RadProgressBar.Foreground
>
</
telerik:RadProgressBar
>
Regards,
Petar Mladenov
Telerik by Progress
