Style BusyIndicator as a progressbar or a circular progress bar

[Odne]

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

[Masha]

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

 

 

[Mahima]

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]

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).

[Odne]

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

[Odne]

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

[Odne]

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

[Masha]

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

 

 

[Odne]

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

[Masha]

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