How to add a close button in the busy indicator?

10 posts, 0 answers
  1. Minwei
    Minwei avatar
    31 posts
    Member since:
    Jul 2010

    Posted 10 Sep 2011 Link to this post

    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
  2. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 15 Sep 2011 Link to this post

    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

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

  3. DevCraft banner
  4. Maurizio
    Maurizio avatar
    43 posts
    Member since:
    Jan 2012

    Posted 16 Aug 2012 Link to this post

    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
  5. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 20 Aug 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Syed
    Syed avatar
    9 posts
    Member since:
    Oct 2011

    Posted 24 Feb 2014 in reply to Konstantina Link to this post

    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.

  7. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 26 Feb 2014 Link to this post

    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
     
     
  8. Syed
    Syed avatar
    9 posts
    Member since:
    Oct 2011

    Posted 07 Mar 2014 in reply to Konstantina Link to this post

    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.

  9. Kalin
    Admin
    Kalin avatar
    1207 posts

    Posted 10 Mar 2014 Link to this post

    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
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  10. Syed
    Syed avatar
    9 posts
    Member since:
    Oct 2011

    Posted 11 Mar 2014 in reply to Kalin Link to this post

    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.
  11. Syed
    Syed avatar
    9 posts
    Member since:
    Oct 2011

    Posted 11 Mar 2014 Link to this post

    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.
Back to Top
DevCraft banner