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?
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 DataTrigger
instead of 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 ToggleButton
is optional, it changes only the Content
from Start to Stop (and vice versa).
Note2: Dont forget to insert your VisualBrush
in the Border, otherwise the animation is not recognized.
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()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.