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

Style BusyIndicator as a progressbar or a circular progress bar

7 Answers 385 Views
BusyIndicator
This is a migrated thread and some comments may be shown as answers.
Odne
Top achievements
Rank 1
Odne asked on 10 Jun 2014, 11:02 AM
Hi!

Is it possible to style the BusyIndicator as a regular progressbar with progress indicator and a custom text under it?
Even better if I could style it as a circular progressbar with custom text under it.

For now I only manage to change the color of the spinning wheel.

Regards
Odne Roev

7 Answers, 1 is accepted

Sort by
0
Masha
Telerik team
answered on 10 Jun 2014, 12:40 PM
Hi,

In order to apply a custom text to RadBusyIndicator control you need to set its BusyContent property.
Also you can changed IsIndeterminate property to False to have a regular ProgressBar.

I've created a sample project using Windows8Touch theme to achieve different look of RadBusyIndicatorl. 

I hope it helps.


Regards,
Masha
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Mahima
Top achievements
Rank 1
commented on 04 Aug 2022, 05:39 AM | edited

Hi,

I tried to change the color of RadBusyIndicator . For that I customized using ProgressBarStyle. But before the color change the progress bar is in circular shape. when i changed the style it turns to vertical progress bar.

Can you please help me.

Below I attached the code.

Regards
Mahima B

 

Stenly
Telerik team
commented on 05 Aug 2022, 01:24 PM

The reason behind this result is because of the way that the BasedOn property is set. With its current implementation, the custom style will be based on the RadProgressBarStyle style and it will use its Template property, which is not in a circular shape. The custom style would have to be based on the BusyIndicatorProgressBarStyle.

However, in order to modify the background of the circular visual, one way would be to extract the ControlTemplate that is set to the Template property of the BusyIndicatorProgressBarStyle, from the used theme, and manually edit the used elements.

Another approach that could be used, is to traverse the visual tree using the ChildrenOfType extension method and find the needed elements for modification, when RadBusyIndicator is loaded (this logic is best utilized in the Loaded event of the control). To find which elements are required for modification, you could use a spying utility such as Snoop to inspect the visual tree. 

I have prepared a sample project, which shows the extracted ControlTemplate from the BusyIndicatorProgressBarStyle style from the Office_Black theme. The application is intended for the NoXaml version of the assemblies.

In addition, our next major release, which is scheduled for the middle of September, will include a new control, which will be a circular progress bar (similar to the one in the busy indicator).

0
Odne
Top achievements
Rank 1
answered on 10 Jun 2014, 01:51 PM
Nice!
Thank you for the quick response.

I try to implement this in our solution, but we are using and older version of the Telerik wpf components, version 2013.1.403.40.

I get this error when I try to use it.

'Cannot create unknown type '{clr-namespace:Telerik.Windows.Controls.External}Windows8TouchThemeExternal'.' Line number '29' and line position '3'.

It is possible to get a precompiled version of the themes files?

Second, when I set IsIndeterminate property yo false I did not get a regular progressbar, as you stated in above message.

Regards
Odne Roev
0
Odne
Top achievements
Rank 1
answered on 10 Jun 2014, 02:01 PM
Reading documentation online is quit smart!
There I found that "Telerik includes the .xaml files in separate theme DLLs located in the Binaries.NoXaml folder"
If I added the Telerik.Windows.Themes.Windows8Touch.dll from there for my version of Telerik components, it worked.

So thank you very much for your help.

Regards
Odne Roev
0
Odne
Top achievements
Rank 1
answered on 10 Jun 2014, 02:07 PM
Since we are creating a plain wpf desktop application, the rest of our application looks quit strange.
All Buttons and textboxes get a font size that is totally wrong.

Is there an easy way to avoid it or do I have to make a style for text inside textboxes and buttons to overcome this problem?

Regards,
Odne Roev
0
Accepted
Masha
Telerik team
answered on 10 Jun 2014, 02:21 PM
Hello,

In case you wish to have only RadBusyIndicator to look like in WIndows8Touch theme you can use only CustomBusyIndicatorProgressBarStyle and EllipseStyle from my previous project. This way you do not need to merge Windows8Touch theme.

Send the project again with version 2013.1.403.40.
Hope it helps.

Regards,
Masha
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Odne
Top achievements
Rank 1
answered on 11 Jun 2014, 07:09 AM
Thank you very much for your marvelous support Masha. :-)
Almost perfect (Is this guy never satisfied....?)

The last thing I wonder about is if it is possible to make the canvas/panel for the busy indicator larger.
See attached images and you will see what I mean.
Now the circular image is outside the border of the busy indicator panel.

I have tested with setting Background and BoderBrush to null and then you get now visible panel for the busy indicator, but if you want that.

Best regards
Odne Roev

0
Accepted
Masha
Telerik team
answered on 11 Jun 2014, 08:42 AM
Hello,

I am glad you are happy with the results.

You can add some margins to the Grid of BusyContentTemplate DataTemplate in order to make the panel larger:
<DataTemplate x:Key="BusyContentTemplate">
    <StackPanel Orientation="Horizontal" Margin="40">
        <TextBlock Text="Loaded: " />
        <TextBlock Text="{Binding }" />
        <TextBlock Text=" %" />
    </StackPanel>
</DataTemplate>

The gray background comes from the default OfficeBlack Theme and you can easily remove it like setting transparent BorderBrush and Background properties as you said in previous post or using StyleManager and get the Windows8Touch control template like applying telerik:StyleManager.Theme="Windows8Touch" to desired RadBusyIndicator definition.

I hope this information would be helpful.


Regards,
Masha
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
BusyIndicator
Asked by
Odne
Top achievements
Rank 1
Answers by
Masha
Telerik team
Odne
Top achievements
Rank 1
Share this question
or