Style BusyIndicator as a progressbar or a circular progress bar

8 posts, 2 answers
  1. Odne
    Odne avatar
    5 posts
    Member since:
    Jun 2012

    Posted 10 Jun 2014 Link to this post

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

    Posted 10 Jun 2014 Link to this post

    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Odne
    Odne avatar
    5 posts
    Member since:
    Jun 2012

    Posted 10 Jun 2014 in reply to Masha Link to this post

    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
  5. Odne
    Odne avatar
    5 posts
    Member since:
    Jun 2012

    Posted 10 Jun 2014 in reply to Odne Link to this post

    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
  6. Odne
    Odne avatar
    5 posts
    Member since:
    Jun 2012

    Posted 10 Jun 2014 in reply to Odne Link to this post

    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
  7. Answer
    Masha
    Admin
    Masha avatar
    355 posts

    Posted 10 Jun 2014 Link to this post

    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.
     
  8. Odne
    Odne avatar
    5 posts
    Member since:
    Jun 2012

    Posted 11 Jun 2014 in reply to Masha Link to this post

    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

  9. Answer
    Masha
    Admin
    Masha avatar
    355 posts

    Posted 11 Jun 2014 Link to this post

    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.
     
Back to Top
UI for WPF is Visual Studio 2017 Ready