BusyIndicator doesn't disable interactions

[Cesar Vinas]

Hi,

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?

Thanks,
Cesar

[Deyan]

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">
        <Setter.Value>
            <ControlTemplate TargetType="telerikPrimitives:RadBusyIndicator">
                <Border
                    x:Name="PART_LayoutRoot"
                    Background="{TemplateBinding Background}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="NotRunning" To="Running">
                                    <Storyboard>
                                        <Storyboard>
                                            <DoubleAnimation From="0" To="1" Duration="0:0:0.5" Storyboard.TargetName="PART_LayoutRoot" Storyboard.Target
                                        </Storyboard>
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition From="Running" To="NotRunning">
                                    <Storyboard>
                                        <Storyboard>
                                            <DoubleAnimation From="1" To="0" Duration="0:0:0.5" Storyboard.TargetName="PART_LayoutRoot" Storyboard.Target
                                        </Storyboard>
                                    </Storyboard>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="NotRunning">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_LayoutRoot" Storyboard.TargetProperty="Opacity">
                                        <DiscreteDoubleKeyFrame KeyTime="0"  Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_LayoutRoot" Storyboard.TargetProperty="IsHitTestVisible">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Running">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_LayoutRoot" Storyboard.TargetProperty="Opacity">
                                        <DiscreteDoubleKeyFrame KeyTime="0"  Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_LayoutRoot" Storyboard.TargetProperty="IsHitTestVisible">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <telerikPrimitivesBusyIndicator:BusyIndicatorAnimation
                            Grid.Row="1"
                            Grid.Column="1"
                            x:Name="PART_Animation"
                            VerticalAlignment="Center"
                            Style="{TemplateBinding IndicatorAnimationStyle}"
                            IsRunning="{TemplateBinding IsRunning}"
                            Foreground="{TemplateBinding Foreground}"
                        />
                        <ContentPresenter
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Margin="{TemplateBinding Padding}"
                        x:Name="PART_InfoContent"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I hope this helps.

Kind regards,
Deyan
the Telerik team

[Cesar Vinas]

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.