C# WPF Stop Storyboard

im on programming a slot machine. For spinning the wheel i have follwing animation that looks like:

<Border Height="300" Margin="68,434,1506,335">
<Border.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard >
<Storyboard Name="stb">
<RectAnimation Storyboard.TargetProperty="Background.(ImageBrush.Viewport)"
To="0,0,1,1" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

</Border.Triggers>
<Border.Background>
<VisualBrush TileMode="Tile" Viewport="0,1,1,1">
<VisualBrush.Visual>
<StackPanel>
<Image Source="test.jpg"></Image>
<Image Source="test.jpg"></Image>
<Image Source="test.jpg"></Image>
</StackPanel>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
</Border>
<Button Name="cmdStop"/>


How can i start/stop from Code behind? Thanks for your help.

EDIT

I want to it to start / stop with a button not when a page is loaded. how can i solve this ?
The problem is the button should be outside of the border... How can i access the button?

2 Answers
2

Have you tried to pause the anmation?

A good example is found here and when you want to pause it from the Code-Behind, use DataTriggerinstead of EventTrigger.

DataTrigger

EventTrigger

And maybe you are interested in the "Triple the speed of the Storyboard" too.

Edit
Your Question "I want to it to start / stop with a button not when a page is loaded. how can i solve this ?" cant be answered because when the Page (Border?) is not loaded, the animation cant be running. I Suggest to hide the Page/Border and only make it visible when the animation is paused.

I fiddled a bit around and tried to solve it with the Visibility

<!-- This Border is animated. -->
<Border Height="300" Margin="68,434,1506,335" >
<Border.Style>
<Style TargetType="x:Type Border">
<!-- Here is your animation -->
<Style.Triggers>
<EventTrigger RoutedEvent="Border.Loaded">
<BeginStoryboard Name="RandomStoryboard">
<Storyboard >
<RectAnimation Storyboard.TargetProperty="Background.(ImageBrush.Viewport)"
To="0,0,1,1" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
<!-- Stop the animation at the Start -->
<PauseStoryboard BeginStoryboardName="RandomStoryboard" />
</EventTrigger>
<!-- Control the animation according to the Togglebutton State -->
<DataTrigger Binding="Binding Path=IsChecked, ElementName=SpinControl" Value="True">
<DataTrigger.EnterActions>
<ResumeStoryboard BeginStoryboardName="RandomStoryboard" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<PauseStoryboard BeginStoryboardName="RandomStoryboard" />
</DataTrigger.ExitActions>
<!-- Hide the Border while the animation is running -->
<Setter Property="Border.Visibility" Value="Hidden"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>

<!-- This Button Controls the Animated Border -->
<ToggleButton Name="SpinControl">
<ToggleButton.Style>
<Style TargetType="x:Type ToggleButton">
<Setter Property="Content" Value="Start"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="Stop"/>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>


Note: The Style Section of the ToggleButtonis optional, it changes only the Content from Start to Stop (and vice versa).

Style

ToggleButton

Content

Note2: Dont forget to insert your VisualBrush in the Border, otherwise the animation is not recognized.

VisualBrush

DataTrigger

Storyboard.Seek

In general you can start/stop a storyboard using the start and stop method of the storyboard object.

In your example should be stb.Start() or stb.Stop()

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.