How can I stop a custom storyboard with a data trigger? - wpf

Question

I have a storyboard for a canvas and I want to stop it as soon as the ShowError property has changed.
<UserControl.Resources>
<Storyboard x:Key="LoaderAnimation" Name="LoaderAnimation" >
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
Storyboard.TargetName="canvas"
RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Viewbox x:Name="LayoutRoot" HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="0" Height="150" Width="250">
<Canvas Height="323" Width="308" RenderTransformOrigin="0.5,0.5" x:Name="canvas">
<Canvas.RenderTransform>
<RotateTransform/>
</Canvas.RenderTransform>
<Ellipse Fill="{Binding Foreground, ElementName=userControl}" Height="71" Canvas.Left="121" Canvas.Top="21" Width="69" Opacity="0.3"/>
<Ellipse Fill="{Binding Foreground, ElementName=userControl}" Height="71" Width="69" Canvas.Left="194" Canvas.Top="52" Opacity="0.4"/>
<Ellipse Fill="{Binding Foreground, ElementName=userControl}" Width="69" Height="71"
</Canvas>
</Viewbox>
<TextBlock Grid.Row="1" TextWrapping="Wrap" FontSize="20" Margin="0 20 0 0">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding ShowError}" Value="false">
<Setter Property="Text" Value="{loc:Translate LogIn.TestSpsConnection}" />
<Setter Property="Foreground" Value="Black" />
</DataTrigger>
<DataTrigger Binding="{Binding ShowError}" Value="true">
<Setter Property="Text" Value="{loc:Translate LogIn.FailSpsConnection}" />
<Setter Property="Foreground" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
I've tried every idea but I can't access the storyboard from the style of the TextBlock.
Is there any way I can stop the animation when ShowError goes true ?
thank you for your help

Answer 1

Try applying a style trigger onto your Canvas that stops the storyboard when ShowError goes true, instead of doing it from your TextBlock.
Example:
<UserControl.Resources>
<Storyboard x:Key="LoaderAnimation" Name="LoaderAnimation" >
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
...
<Canvas Height="323" Width="308" RenderTransformOrigin="0.5,0.5" x:Name="canvas">
...
<Canvas.Style>
<Style TargetType="Canvas">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard x:Name="beginStoryboard" Storyboard="{StaticResource LoaderAnimation}"/>
</EventTrigger.Actions>
</EventTrigger>
<DataTrigger Binding="{Binding ShowError}" Value="True">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="beginStoryboard"/>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Canvas.Style>
</Canvas>
Also, notice that I removed the Storyboard.TargetName from your resource, or else it violates some XAML rules when used the way that I did it. You'll get runtime errors if you keep it there.