Split the progress Bar

10 posts, 0 answers
  1. Sreeju
    Sreeju avatar
    4 posts
    Member since:
    Dec 2010

    Posted 27 Dec 2010 Link to this post

    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

     

  2. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 29 Dec 2010 Link to this post

    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
    Browse the videos here>> to help you get started with RadControls for WPF
  3. Sreeju
    Sreeju avatar
    4 posts
    Member since:
    Dec 2010

    Posted 29 Dec 2010 Link to this post

    Thank you very much for the great help
  4. Sreeju
    Sreeju avatar
    4 posts
    Member since:
    Dec 2010

    Posted 30 Dec 2010 Link to this post

    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
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2942 posts

    Posted 30 Dec 2010 Link to this post

    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
    Browse the videos here>> to help you get started with RadControls for WPF
  6. Arvind
    Arvind avatar
    6 posts
    Member since:
    Jan 2017

    Posted 01 Feb Link to this post

    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

  7. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2942 posts

    Posted 02 Feb Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  8. Arvind
    Arvind avatar
    6 posts
    Member since:
    Jan 2017

    Posted 02 Feb in reply to Petar Mladenov Link to this post

    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

     

     

  9. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2942 posts

    Posted 07 Feb Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  10. Arvind
    Arvind avatar
    6 posts
    Member since:
    Jan 2017

    Posted 12 Feb in reply to Petar Mladenov Link to this post

    Thank You So Much.
Back to Top