Split the progress Bar

[Sreeju]

Hi,

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

 

[Alex Fidanov]

Hello Sreeju,

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

[Sreeju]

Thank you very much for the great help

[Sreeju]

Hi,

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

[Petar Mladenov]

Hi 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

[Arvind]

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

[Petar Mladenov]

Hello Arvind,

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

[Arvind]

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

 

 

[Petar Mladenov]

Hello Arvind,

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

[Arvind]

Thank You So Much.