Circular Progress Bar

5 posts, 0 answers
  1. Eyal Noam
    Eyal Noam avatar
    10 posts
    Member since:
    Apr 2010

    Posted 28 Nov 2010 Link to this post

    Hi,
    I wondered if i can reach to this result with the rad progress bar (see attached file).
    I have tried to reach to this result without success....
  2. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 01 Dec 2010 Link to this post

    Hi Shmuel Tal,

    Creating a progress bar with that shape will require a complete change of the ControlTemplate of the ProgressBar and providing a custom logic for resolving the actual value in the ProgressBar's new template. Have you looked at our BusyIndicator as an alternative? Nevertheless, we will try to find some quick and simple way to modify the ProgressBar for this requirement and post a sample project here.

    Regards,
    Alex Fidanov
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for WPF
  3. UI for WPF is Visual Studio 2017 Ready
  4. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 01 Dec 2010 Link to this post

    Hello Shmuel Tal,

    In fact, in the Expression Dark theme, the style for the busy indicator is a circle. You can set its progress value from 0 to 100 and set the IsIndeterminate to false. If you want to display the value of the progress, you would have to edit the theme and use a TextBlock, bound to the ProgressValue property in the center.

    <telerik:RadBusyIndicator IsBusy="True" IsIndeterminate="False" BusyContent="{Binding Path=ProgressValue}" 
    Width="100" Height="100" 
    telerik:StyleManager.Theme="Expression_Dark" ProgressValue="30" />


    Kind regards,
    Alex Fidanov
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for WPF
  5. karteek
    karteek avatar
    2 posts
    Member since:
    Nov 2014

    Posted 24 Nov 2014 in reply to Alex Fidanov Link to this post

    i would like to know how I can increase the height and width of the ring and also the color which is displayed inside the ring. the Height and Width properties are applied at the control level but not exclusively for the ring. any help on this is appreciable.
  6. Kalin
    Admin
    Kalin avatar
    1209 posts

    Posted 26 Nov 2014 Link to this post

    Hello Karteek,

    What I can suggest you would to be to check this forum post where is explained how to make the ring smaller. Using the same approach the other way around will help you to achieve the required. As for the color inside of the ring you will have to modify the fill of the Rectangle named ProgressBarIndicator as needed.

    Hope this helps.

    Regards,
    Kalin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready