BusyIndicator doesn't disable interactions

Thread is closed for posting
3 posts, 0 answers
  1. Cesar Vinas
    Cesar Vinas avatar
    13 posts
    Member since:
    May 2003

    Posted 11 Nov 2011 Link to this post


    I have a BusyIndicator in my page with a level of opacity, The IsRunning property is bound to my ViewModel. The problem is that when the IsRunning property is true and the animation is displayed, if I click on the buttons or textboxes that are behind the animation (I can see them because of the opacity set to like 70%), the application actually responds so I can continue clicking on the button that is actually triggering the process even though the animation is running. I've been looking for a property that I can use in order to make impossible for the user to interact with the controls that are behind the BusyIndicator, but it seems that doesn't exist. What should I do?

  2. Deyan
    Deyan avatar
    2147 posts

    Posted 15 Nov 2011 Link to this post

    Hello César,

    This behavior is achievable by setting the IsHitTestVisible property of RadBusyIndicator to true while it is displayed and running. This can be easily done in its style by using the VisualStateManager. We are going to update the style to set this property in the running visual state, and reset it otherwise. By that time you could use the following style in your app that does this:

    <Style TargetType="telerikPrimitives:RadBusyIndicator">
        <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="FontSize" Value="15"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Padding" Value="0, 10, 0, 0"/>
        <Setter Property="Template">
                <ControlTemplate TargetType="telerikPrimitives:RadBusyIndicator">
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}">
                            <VisualStateGroup x:Name="CommonStates">
                                    <VisualTransition From="NotRunning" To="Running">
                                                <DoubleAnimation From="0" To="1" Duration="0:0:0.5" Storyboard.TargetName="PART_LayoutRoot" Storyboard.Target
                                    <VisualTransition From="Running" To="NotRunning">
                                                <DoubleAnimation From="1" To="0" Duration="0:0:0.5" Storyboard.TargetName="PART_LayoutRoot" Storyboard.Target
                                <VisualState x:Name="NotRunning">
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_LayoutRoot" Storyboard.TargetProperty="Opacity">
                                            <DiscreteDoubleKeyFrame KeyTime="0"  Value="0"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_LayoutRoot" Storyboard.TargetProperty="IsHitTestVisible">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                                <VisualState x:Name="Running">
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_LayoutRoot" Storyboard.TargetProperty="Opacity">
                                            <DiscreteDoubleKeyFrame KeyTime="0"  Value="1"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_LayoutRoot" Storyboard.TargetProperty="IsHitTestVisible">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                                <RowDefinition Height="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                Style="{TemplateBinding IndicatorAnimationStyle}"
                                IsRunning="{TemplateBinding IsRunning}"
                                Foreground="{TemplateBinding Foreground}"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Margin="{TemplateBinding Padding}"

    I hope this helps.

    Kind regards,
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. Cesar Vinas
    Cesar Vinas avatar
    13 posts
    Member since:
    May 2003

    Posted 23 Nov 2011 Link to this post

    Thanks Deyan. I solved this by adding this to the RadBusyIndicator:


    IsHitTestVisible="{Binding IsDataLoading}"


    where IsDataLoading is a property in my ViewModel that changes to true when my async call starts and to false when it finishes.
Back to Top