Busy Indicator Size

9 posts, 0 answers
  1. Dean
    Dean avatar
    66 posts
    Member since:
    Aug 2011

    Posted 01 Oct 2012 Link to this post

    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...
  2.
  3. Masha
    Admin
    Masha avatar
    358 posts

    Posted 04 Oct 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  5. Joel Palmer
    Joel Palmer avatar
    175 posts
    Member since:
    May 2009

    Posted 24 Oct 2012 Link to this post

    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.
  7. Dean
    Dean avatar
    66 posts
    Member since:
    Aug 2011

    Posted 01 Nov 2012 Link to this post

    Completely agree Joel, resizing a control should be a very simple task, we purchase 3rd party controls to make our development easier, not harder...
  8.
  9. Masha
    Admin
    Masha avatar
    358 posts

    Posted 02 Nov 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  11. Robert
    Robert avatar
    32 posts
    Member since:
    Apr 2011

    Posted 12 Sep 2014 in reply to Masha Link to this post

    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.





  13. Kalin
    Admin
    Kalin avatar
    1363 posts

    Posted 17 Sep 2014 Link to this post

    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
     
    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.
     
  14.
  15. Thomas
    Thomas avatar
    18 posts
    Member since:
    Oct 2012

    Posted 02 Jun 2017 Link to this post

    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! ;-)

  17. Tristan
    Tristan avatar
    1 posts
    Member since:
    Dec 2018

    Posted 03 Apr 2019 Link to this post

    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>
Back to Top