How to add a close button in the busy indicator?

[Minwei]

Hi telerik,

 My requirement is to add a close button to hide the busy indicator which is means cancel the busy. Can you show me an example?


Thanks

[Konstantina]

Hello Minwei,

To achieve this you need to edit the style of the BusyIndicator and add the Button at the desired place.
Please find attached a sample project in which this is illustrated. Initially, instead of the Click event of the button you can create a Command for closing the BusyIndicator.

Hope this helps.

Best wishes,
Konstantina
the Telerik team

[Maurizio]

Hello,

i am using the style for the busyindicator from your sample project. When i use the busyindicator with IsIndeterminate = false everything is fine, but when i change the property to true i get the following error.

System.Windows.Media.Animation.AnimationException wurde nicht behandelt.
  Message=Die Eigenschaft "Visibility" auf "System.Windows.Shapes.Path" kann nicht mithilfe von "System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames" animiert werden. Detaillierte Informationen finden Sie bei der inneren Ausnahme.
  Source=PresentationCore
  StackTrace:
       bei System.Windows.Media.Animation.AnimationStorage.OnCurrentTimeInvalidated(Object sender, EventArgs args)
       bei System.Windows.Media.Animation.Clock.FireEvent(EventPrivateKey key)
       bei System.Windows.Media.Animation.Clock.RaiseAccumulatedEvents()
       bei System.Windows.Media.Animation.TimeManager.RaiseEnqueuedEvents()
       bei System.Windows.Media.Animation.TimeManager.Tick()
       bei System.Windows.Media.MediaContext.RenderMessageHandlerCore(Object resizedCompositionTarget)
       bei System.Windows.Media.MediaContext.RenderMessageHandler(Object resizedCompositionTarget)
       bei System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
       bei MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen(Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)
       bei System.Windows.Threading.DispatcherOperation.InvokeImpl()
       bei System.Windows.Threading.DispatcherOperation.InvokeInSecurityContext(Object state)
       bei System.Threading.ExecutionContext.runTryCode(Object userData)
       bei System.Runtime.CompilerServices.RuntimeHelpers.ExecuteCodeWithGuaranteedCleanup(TryCode code, CleanupCode backoutCode, Object userData)
       bei System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
       bei System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean ignoreSyncCtx)
       bei System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
       bei System.Windows.Threading.DispatcherOperation.Invoke()
       bei System.Windows.Threading.Dispatcher.ProcessQueue()
       bei System.Windows.Threading.Dispatcher.WndProcHook(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
       bei MS.Win32.HwndWrapper.WndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
       bei MS.Win32.HwndSubclass.DispatcherCallbackOperation(Object o)
       bei System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
       bei MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen(Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)
       bei System.Windows.Threading.Dispatcher.InvokeImpl(DispatcherPriority priority, TimeSpan timeout, Delegate method, Object args, Int32 numArgs)
       bei MS.Win32.HwndSubclass.SubclassWndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam)
       bei MS.Win32.UnsafeNativeMethods.DispatchMessage(MSG& msg)
       bei System.Windows.Threading.Dispatcher.PushFrameImpl(DispatcherFrame frame)
       bei System.Windows.Threading.Dispatcher.PushFrame(DispatcherFrame frame)
       bei System.Windows.Threading.Dispatcher.Run()
       bei System.Windows.Application.RunDispatcher(Object ignore)
       bei System.Windows.Application.RunInternal(Window window)
       bei System.Windows.Application.Run(Window window)
       bei System.Windows.Application.Run()
       bei Roka3.App.Main() in D:\Visual Studio 2010\Projects\roka3\Roka3\obj\x86\Debug\App.g.cs:Zeile 0.
       bei System.AppDomain._nExecuteAssembly(RuntimeAssembly assembly, String[] args)
       bei System.AppDomain.ExecuteAssembly(String assemblyFile, Evidence assemblySecurity, String[] args)
       bei Microsoft.VisualStudio.HostingProcess.HostProc.RunUsersAssembly()
       bei System.Threading.ThreadHelper.ThreadStart_Context(Object state)
       bei System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean ignoreSyncCtx)
       bei System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
       bei System.Threading.ThreadHelper.ThreadStart()
  InnerException: System.InvalidOperationException
       Message=Von der/den auf die Visibility-Eigenschaft angewendeten Animation(en) wird aktuell der Wert "Visible" berechnet, bei dem es sich um keinen gültigen Wert für die Eigenschaft handelt.
       Source=PresentationCore
       StackTrace:
            bei System.Windows.Media.Animation.AnimationStorage.GetCurrentPropertyValue(AnimationStorage storage, DependencyObject d, DependencyProperty dp, PropertyMetadata metadata, Object baseValue)
            bei System.Windows.Media.Animation.AnimationStorage.OnCurrentTimeInvalidated(Object sender, EventArgs args)
       InnerException:

Because the error message is in german i try to translate:

  Message=the Property "Visibility" from "System.Windows.Shapes.Path" can not be animated by "System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames" .

  InnerException: System.InvalidOperationException
       Message=From the Property " Visibility" used animation, the value "Visible" is calculated, this is not a valid Value for this Property.
       Source=PresentationCore

Any idea?

best regards

[Konstantina]

Hi Thomas,

The attached project is old and there is a chance that there are some changes in the theme of the RadBusyIndicator. So, could you please change the style with the latest one, which you could find in the installation folder of the Telerik controls on your machine. Usually this is:

C:\Program Files\Telerik\RadControls for Silverlight Q2 2012 SP1\Themes\OfficeBlack\Themes\Telerik.Windows.Controls.xaml

Hope this information helps.

All the best,
Konstantina
the Telerik team

[Syed]

Hi Konstantina,

I have checked your sample project.
Can you explain me how can I exactly close the busy indicator by using command.

I have tried applying command using interactivity behavior but was not able to implement the close functionality.
Below is the code that I'd tried to implement :

<i:Interaction.Triggers>
     <i:EventTrigger EventName="Click">
     <i:InvokeCommandAction Command="{Binding Command, ElementName=button}" CommandName="CloseBusyIndicator"/>
    </i:EventTrigger>
</i:Interaction.Triggers>


Hereby I also add the style used for the custom busy indicator :

<Style x:Key="RadBusyIndicatorStyle1" TargetType="telerik:RadBusyIndicator">
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="DisplayAfter" Value="00:00:00.1"/>
            <Setter Property="Background" Value="{StaticResource BusyIndicatorBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource BusyIndicatorBorderBrush}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="ProgressBarStyle" Value="{StaticResource BusyIndicatorProgressBarStyle}"/>
            <Setter Property="telerik:AnimationManager.AnimationSelector">
                <Setter.Value>
                    <telerik:AnimationSelector>
                        <telerik:FadeAnimation AnimationName="Hide" Direction="Out" TargetElementName="Indicator"/>
                        <telerik:FadeAnimation AnimationName="Show" Direction="In" TargetElementName="Indicator"/>
                    </telerik:AnimationSelector>
                </Setter.Value>
            </Setter>
            <Setter Property="OverlayStyle">
                <Setter.Value>
                    <Style TargetType="Rectangle">
                        <Setter Property="Fill" Value="{StaticResource BusyIndicatorBusyOverlayBrush}"/>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:RadBusyIndicator">
                        <Grid DataContext="{Binding Source={StaticResource BaseCommandControlDataSource}}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="VisibilityStates">
                                    <VisualState x:Name="Hidden">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Indicator">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Overlay">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Visible">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Indicator">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Overlay">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="BusyStatusStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:2"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Idle">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="Content">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <System:Boolean>True</System:Boolean>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Busy">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="Content">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <System:Boolean>False</System:Boolean>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentControl x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsEnabled="False" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <Rectangle x:Name="Overlay" Style="{TemplateBinding OverlayStyle}"/>
                            <Border x:Name="Indicator" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2" HorizontalAlignment="Center" MinWidth="180" VerticalAlignment="Center">
                                <Grid Canvas.ZIndex="1">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Button x:Name="button"  Background="Transparent"  Height="27" Width="27" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0 -10 -10 0" Style="{StaticResource ButtonStyle1}" >
                                        <i:Interaction.Triggers>
                                            <i:EventTrigger EventName="Click">
                                                <i:InvokeCommandAction Command="{Binding Command, ElementName=button}" CommandName="CloseBusyIndicator"/>
                                            </i:EventTrigger>
                                        </i:Interaction.Triggers>
                                        <Image Canvas.ZIndex="2" Stretch="Fill" Height="25" Width="25" VerticalAlignment="Center" HorizontalAlignment="Center" Source="Busy.png"/>
                                    </Button>

                                    <telerik:RadProgressBar Grid.Row="0" Grid.ColumnSpan="2" x:Name="ProgressBar" IsIndeterminate="{Binding IsBusy, RelativeSource={RelativeSource TemplatedParent}}" Style="{TemplateBinding ProgressBarStyle}" Value="{TemplateBinding ProgressValue}"/>
                                    <ContentPresenter Grid.Row="1" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding BusyContentTemplate}" Content="{TemplateBinding BusyContent}" HorizontalAlignment="Center" Margin="15 5 15 15"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

It would be great if you provide me with the actual implementation of the command to close the busy indicator.

Thanking you in advance.

[Konstantina]

Hello Syed,

What I had in mind is to create a Command in a ViewModel and bind to it. Please find attached the updated project with the proposed approach.

Regards,
Konstantina
Telerik

 

 

[Syed]

Hi Konstantina,

Let me explain you the complete scenario.
I have used busy indicator in more than 200 pages. I need a centralized style of busy indicator which has close button. Thus, we need not to change busy indicator in all the 200 pages. 

What I am looking for is the command to handle the click event of the close button in styles.xaml.

The solution presented by you is functionally correct. I need the same functionality but in a generalized manner such that I don't need to change all the pages. 

As I need to meet the deadline, it would be grateful if you suggest the solution asap.

Thanking you in advance.

[Kalin]

Hi Syed,

What you can do is to move the style to App.xaml and apply it globally to all of the BusyIndicators in the application. As for the Command, you can handle the Click event - this way you won't need to have the IsBusy property bound to every ViewModel of every page where the BusyIndicator is used. Please check the attached project which demonstrates that the approach works for multiple BusyIndicators located in different places.

Hope this will work for you.

Regards,
Kalin
Telerik

 

 

[Syed]

HI Kalin,

I have done the same as you have mentioned in the post.But I couldn't find the attached project except posted on Posted 15 Sep 2011 that does not meet to my requirement. The only thing I wanted from you side is to provide me sample code for command implementation for closing the Busy Indicator  and just provide me where I need  write the command.

Please provide code for command implementation here itself so that will be easy for me to get required information.

[Syed]

Hello Konstantina and Kalin,

With the help of your sample code I found the solution. One thing though, I was not able to find the attached sample codes. But when I clicked the username on the post, we were able to see the  attachments.

Thanking you for the help. :)

Regards.