Busy Indicator Size

[Dean]

How can we change the busy indicator size? Changing the Height and Width only changes the size of some outer border but the indicator itself remains the same size...

[Masha]

Hello Dean,

In order to resize RadBusyIndicator you should edit the ProgressBarStyle.
Firstly generate the Style for RadBusyIndicator in Expression Blend.
Inside it navigate to Indicator > StackPanel > ProgressBarStyle > Edit Current

The ProgressBarStyle contains three elements.You need to resize all of them manually to the desired size. Keep in mind that the IndeterminateBackgroundDonut and IndeterminateDonut contain GeometryGroups that should maintain relative sizes. For example, if you wish to have a 24px height donut (outer circle, for example, in default generated from Blend template), you need to set the EllipseGeometry parameters to 12px, as in the attached sample.

I prepared a basic sample project , which I hope will be helpful in the customization process.

If you need further help on the process of customization, please let us know.

Regards,
Maria
the Telerik team

[Joel Palmer]

I'm just going to put my 2 cents in here... I think this is way too complicated.  I should be able to resize this element.  Once it gets around the size of the animation then it should eliminate the text on the bottom and keep it as a tool tip.  Then, the size of the circle should compress and simplify as it gets smaller.  Likewise, the larger I make this control the fancier, more detailed and more animated it should get.

All that to say, after I looked at this solution I went with the progress bar instead.

[Dean]

Completely agree Joel, resizing a control should be a very simple task, we purchase 3rd party controls to make our development easier, not harder...

[Masha]

Hello Dean,

We are sorry to hear that you had difficulties using our controls. The changes seems to be a little bit more complicated, because of a custom animations which contributes for more interactive look of RadBusyIndicator.

If you need any help we will be glad to assist you.

Kind regards,
Maria
the Telerik team

[Robert]

I'm trying to make a smaller version of the busy indicator with just the spinning donut to appear in a 34px high status bar, so I need it to be about 28 px diameter.  (I am successfully using the RadBusyIndicator elsewhere in my app)

You say that the sample 'RESIZE-BusyIndicator.zip' demonstrates setting EllipseGeometry parameters to 12px, but I don't see that number in the sample xaml.  I searched the sample project for '24' and '12' and found no hits.   I'm wondering if the sample you attached is the one you meant to.   So the sample is helpful in explicating the style xaml, I just don't know what all needs changing.

I tried a couple of times making the changes you suggest to the sample, but got odd results each time, so I clearly am missing some details here.  Additional tips are welcome, thanks.

[Kalin]

Hello Robert,

In order to achieve the desired you would need to modify the IndeterminateDonut and IndeterminateBackgroundDonut paths as well as the EllipseGeometry in the Grid named ProgressBarTrack. What I can suggest you would be to proportionally decrease all of their sizes (Height, Width, Center, RadiusX and RadiusY). For example the IndeterminateBackgroundDonut in the default Template has Width and Height of 44px so you can decrease that to 65% which is 28.6px, after that you would need to decrease all other properties to 65% in order to proportionally make all of the elements smaller. For your convenience I have prepared a sample project which demonstrates the exact approach, using Implicit Styles as well as the latest Styles for the control.

Hope this helps.

Regards,
Kalin
Telerik

 

 

[Thomas]

Just if anyone else comes by this thread, and needs a "small" busyindicator for WPF:

I found this on SO: https://stackoverflow.com/questions/2934732/simplest-way-to-create-busy-animation-in-wpf

If you read a bit down this thread comes a hint for this very nice XAML-only busyindicator:

http://fredgrass.blogspot.dk/2015/07/wpf-busy-indicator.html

Works like a charm, and you don't have to struggle with extracting styles using Blend etc. etc.

Use the right tool for the right job! ;-)

[Tristan]

Sorry to revive an old topic, but I usually just wrap the control in a Viewbox if I want to increase or decrease size. Keeps it relatively simple without needing to bring templates and styles in:

 

<Viewbox Panel.ZIndex="2" Margin="0">
     <Viewbox.Style>
         <Style TargetType="Viewbox">
             <Style.Triggers>
                 <DataTrigger Binding="{Binding ClientService.ConnectionStatus}" Value="Reconnecting">
                     <Setter Property="Visibility" Value="Visible"/>
                 </DataTrigger>
             </Style.Triggers>
             <Setter Property="Visibility" Value="Collapsed"/>
         </Style>
     </Viewbox.Style>
     <telerik:RadBusyIndicator IsBusy="True"  BusyContent="">
         <telerik:RadBusyIndicator.OverlayStyle>
             <Style TargetType="Rectangle">
                 <Setter Property="Fill" Value="{x:Null}"/>
                 <Setter Property="Opacity" Value="0"/>
             </Style>
         </telerik:RadBusyIndicator.OverlayStyle>
     </telerik:RadBusyIndicator>
 </Viewbox>