This is a migrated thread and some comments may be shown as answers.

Circular Progress Bar

4 Answers 930 Views
ProgressBar
This is a migrated thread and some comments may be shown as answers.
Eyal Noam
Top achievements
Rank 1
Eyal Noam asked on 28 Nov 2010, 09:52 AM
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....

4 Answers, 1 is accepted

Sort by
0
Alex Fidanov
Telerik team
answered on 01 Dec 2010, 10:03 AM
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
0
Alex Fidanov
Telerik team
answered on 01 Dec 2010, 10:35 AM
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
0
karteek
Top achievements
Rank 1
answered on 24 Nov 2014, 06:28 AM
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.
0
Kalin
Telerik team
answered on 26 Nov 2014, 02:09 PM
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.

 
Tags
ProgressBar
Asked by
Eyal Noam
Top achievements
Rank 1
Answers by
Alex Fidanov
Telerik team
karteek
Top achievements
Rank 1
Kalin
Telerik team
Share this question
or