RadBusyIndicator + StoryBoard Animation + Collection was modified; enumeration operation may not execute.

0 Answers 26 Views
BusyIndicator Styling
Ramanan
Top achievements
Rank 1
Ramanan asked on 30 Nov 2023, 12:45 PM

Target Application : WPF

.Net Framework : 4.6.2

Telerik Version : 2017.2.503.45 (Telerik.Windows.Controls)

 

Hi

We are using RadBusyIndicator control for the client application, which raising the bellow exception randmoly on Production for long time.

Unfortunately it is not reproducible in development environment.

But as per the AppInsight log, assuming that happens on StoaryBoard animation as highlighted in the below style code.


Collection was modified; enumeration operation may not execute.

Type: System.InvalidOperationException
Message: Collection was modifined; enumeration operation may not execute.
Source:mscrolib
Help link:
Data: System.Collection.ListDictionaryInternal
TargetSite: System.ThrowHelper.ThrowInvalidOperationException(ExceptionResource resource)
Stack Trace: at System.ThrowHelper.ThrowInvalidOperationException(ExceptionResource resource)
   at System.Collections.Generic.List`1.Enumerator.MoveNextRare()
   at Telerik.Windows.Controls.Animation.AnimationManager.InvkokeCallbacks(Storyboard storyboard)
   at Telerik.Windows.Controls.Animation.AnimationManager.OnStoryboardCompleted(Object sender, EventArgs e)
   at System.Windows.Media.Animation.Clock.FireEvent(EventPrivateKey key)
   at System.Windows.Media.Animation.Clock.RaiseAccumulatedEvents()
   at System.Windows.Media.Animation.TimeManager.RaiseEnqueuedEvents()
   at System.Windows.Media.Animation.TimeManager.Tick()
   at System.Windows.Media.MediaContext.RenderMessageHandlerCore(Object resizedCompositionTarget)
   at System.Windows.Media.MediaContext.AnimatedRenderMessageHandler(Object resizedCompositionTarget)
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
   at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Int32 numArgs, Delegate catchHandler)

And following is the style used for the busy indicator. There is no clue to find the root cause except this exception log.

<Style x:Key="RadBusyIndicatorStyle"
           TargetType="{x:Type telerik:RadBusyIndicator}">
        <Setter Property="BusyContent"
                Value="Loading..." />
        <Setter Property="IsTabStop"
                Value="False" />
        <Setter Property="DisplayAfter"
                Value="0:0:0.1" />
        <Setter Property="BorderBrush"
                Value="#FFD0D0D0" />
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                    <GradientStop Color="White"
                                  Offset="0" />
                    <GradientStop Color="#A9DCDADA"
                                  Offset="1" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness"
                Value="1" />
        <Setter Property="ProgressBarStyle">
            <Setter.Value>
                <Style TargetType="{x:Type telerik:RadProgressBar}">
                    <Setter Property="Margin"
                            Value="15,15,15,5" />
                    <Setter Property="IsIndeterminate"
                            Value="True" />
                    <Setter Property="Maximum"
                            Value="100" />
                    <Setter Property="Orientation"
                            Value="Horizontal" />
                    <Setter Property="IsTabStop"
                            Value="False" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type telerik:RadProgressBar}">
                                <Grid>
                                    <Path x:Name="IndeterminateBackgroundDonut"
                                          Height="44"
                                          RenderTransformOrigin="0.5,0.5"
                                          Stroke="#FF133E80"
                                          Width="44">
                                        <Path.Data>
                                            <GeometryGroup FillRule="EvenOdd">
                                                <EllipseGeometry Center="22,22"
                                                                 RadiusY="20"
                                                                 RadiusX="20" />
                                                <EllipseGeometry Center="22,22"
                                                                 RadiusY="14"
                                                                 RadiusX="14" />
                                            </GeometryGroup>
                                        </Path.Data>
                                        <Path.Fill>
                                            <RadialGradientBrush>
                                                <GradientStop Color="#FF224272"
                                                              Offset="0" />
                                                <GradientStop Color="#FF224272"
                                                              Offset="0.921" />
                                                <GradientStop Color="#FFC8DCFB"
                                                              Offset="0.254" />
                                                <GradientStop Color="#FF335A95"
                                                              Offset="0.877" />
                                            </RadialGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path x:Name="IndeterminateDonut"
                                          Height="44"
                                          RenderTransformOrigin="0.5,0.5"
                                          Visibility="Collapsed"
                                          Width="44">
                                        <Path.Data>
                                            <GeometryGroup FillRule="EvenOdd">
                                                <EllipseGeometry Center="22,22"
                                                                 RadiusY="20"
                                                                 RadiusX="20" />
                                                <EllipseGeometry Center="22,22"
                                                                 RadiusY="14"
                                                                 RadiusX="14" />
                                            </GeometryGroup>
                                        </Path.Data>
                                        <Path.Fill>
                                            <RadialGradientBrush Center="0.5,-0.23"
                                                                 GradientOrigin="0.8,0.25"
                                                                 RadiusY="0.68"
                                                                 RadiusX="0.68">
                                                <GradientStop Color="#BFFFFFFF"
                                                              Offset="0" />
                                                <GradientStop Color="Transparent"
                                                              Offset="1" />
                                                <GradientStop Color="#21FFFFFF"
                                                              Offset="0.65" />
                                            </RadialGradientBrush>
                                        </Path.Fill>
                                        <Path.RenderTransform>
                                            <RotateTransform />
                                        </Path.RenderTransform>
                                    </Path>
                                    <Grid x:Name="ProgressBarTrack"
                                          Height="24"
                                          RenderTransformOrigin="0.5,0.5"
                                          Width="24">
                                        <Grid.Clip>
                                            <EllipseGeometry Center="12,12"
                                                             RadiusY="12"
                                                             RadiusX="12" />
                                        </Grid.Clip>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RenderTransform>
                                            <RotateTransform Angle="-90" />
                                        </Grid.RenderTransform>
                                        <Rectangle x:Name="SkipValueSpacer" />
                                        <Rectangle x:Name="ProgressBarIndicator"
                                                   Grid.Column="1">
                                            <Rectangle.Fill>
                                                <RadialGradientBrush>
                                                    <GradientStop Color="#FFCCCCCC"
                                                                  Offset="1" />
                                                    <GradientStop Color="White" />
                                                </RadialGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                    </Grid>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsIndeterminate"
                                             Value="True">
                                        <Trigger.EnterActions>
                                            <BeginStoryboard x:Name="MouseOverStoryboard_BeginStoryboard">
                                                <Storyboard RepeatBehavior="Forever">
                                                    <DoubleAnimationUsingKeyFrames BeginTime="0"
                                                                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                                                   Storyboard.TargetName="IndeterminateDonut">
                                                        <SplineDoubleKeyFrame KeyTime="0:0:1"
                                                                              Value="360" />
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </Trigger.EnterActions>
                                        <Trigger.ExitActions>
                                            <StopStoryboard BeginStoryboardName="MouseOverStoryboard_BeginStoryboard" />
                                        </Trigger.ExitActions>
                                        <Setter Property="Visibility"
                                                TargetName="IndeterminateDonut"
                                                Value="Visible" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Telerik_Windows_Controls_Animation:AnimationManager.AnimationSelector">
            <Setter.Value>
                <Telerik_Windows_Controls_Animation:AnimationSelector>
                    <Telerik_Windows_Controls_Animation:FadeAnimation AnimationName="Hide"
                                                                      Direction="Out"
                                                                      Easing="{x:Null}"
                                                                      MaxOpacity="1"
                                                                      MinOpacity="0"
                                                                      SpeedRatio="0"
                                                                      TargetElementName="Indicator" />
                    <Telerik_Windows_Controls_Animation:FadeAnimation AnimationName="Show"
                                                                      Direction="In"
                                                                      Easing="{x:Null}"
                                                                      MaxOpacity="1"
                                                                      MinOpacity="0"
                                                                      SpeedRatio="0"
                                                                      TargetElementName="Indicator" />
                </Telerik_Windows_Controls_Animation:AnimationSelector>
            </Setter.Value>
        </Setter>
        <Setter Property="OverlayStyle">
            <Setter.Value>
                <Style TargetType="{x:Type Rectangle}">
                    <Setter Property="Fill"
                            Value="#88FFFFFF" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadBusyIndicator}">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentControl x:Name="Content"
                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                        Content="{TemplateBinding Content}"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        IsEnabled="False"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsTabStop="{TemplateBinding IsTabStop}"/>
                        <Rectangle x:Name="Overlay"
                                   Style="{TemplateBinding OverlayStyle}" />
                        <Border x:Name="Indicator"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="2"
                                HorizontalAlignment="Center"
                                MinWidth="180"
                                VerticalAlignment="Center"
                                Background="#FFBCBCBC"
                                BorderBrush="#FF254474"
                                SnapsToDevicePixels="True">
                            <StackPanel>
                                <telerik:RadProgressBar x:Name="ProgressBar"
                                                        IsIndeterminate="{TemplateBinding IsIndeterminate}"
                                                        Maximum="100"
                                                        Style="{TemplateBinding ProgressBarStyle}"
                                                        Value="{TemplateBinding ProgressValue}" />
                                <ContentPresenter ContentTemplate="{TemplateBinding BusyContentTemplate}"
                                                  Content="{TemplateBinding BusyContent}"
                                                  HorizontalAlignment="Center"
                                                  Margin="15,5,15,15"/>
                            </StackPanel>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsBusyIndicationVisible"
                                 Value="False">
                            <Setter Property="Visibility"
                                    TargetName="Indicator"
                                    Value="Collapsed" />
                            <Setter Property="Visibility"
                                    TargetName="Overlay"
                                    Value="Collapsed" />
                            <Setter Property="IsIndeterminate"
                                    TargetName="ProgressBar"
                                    Value="False" />
                            <Setter Property="IsEnabled"
                                    TargetName="Content"
                                    Value="True" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

Any suggestion? And thanks in advance!

Stenly
Telerik team
commented on 05 Dec 2023, 11:18 AM

I tested the provided code snippet in a sample project using the 2017.2.503 version, however, I was not able to observe the mentioned exception.

I have attached the application, so, could you give it a try and let me know if I am missing something?

No answers yet. Maybe you can help?

Tags
BusyIndicator Styling
Asked by
Ramanan
Top achievements
Rank 1
Share this question
or