StoryBoard Events: The
Silverlight 4 Storyboard class only has one single event, which is the
Completed event. There a numerous needs to add additional events to a
storyboard but because the Storyboard class is sealed this isn't possible. So we
need a workaround which is provided by the
StoryboardEventHelper class. The StoryboardEventHelper class that is
build step by step in the article implements two addititional events (OnStoryboardStarted
and OnStoryboardPositionChanged) that provide for example the opportunity
to easily change the VisualState of any Object at a certain timeline position of
a running storyboard.
Example of StoryBoard Events
<UserControl
x:Class="SilverlightApplication3.MainPage"
xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
xmlns:d='http://schemas.microsoft.com/expression/blend/2008'
xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'
mc:Ignorable='d'
d:DesignWidth='640'
d:DesignHeight='480'>
<UserControl.Resources>
<Storyboard
x:Name="MoveRed">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="RedRectangle"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
BeginTime="00:00:00">
<SplineDoubleKeyFrame
KeyTime="00:00:02"
Value="520"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard
x:Name="MoveBlue">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="BlueRectangle"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
BeginTime="00:00:00">
<SplineDoubleKeyFrame
KeyTime="00:00:02"
Value="20"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard
x:Name="MoveGreen">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="GreenRectangle"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X
"
BeginTime="00:00:00">
<SplineDoubleKeyFrame
KeyTime="00:00:02"
Value="520"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Canvas
x:Name="LayoutRoot"
Background="White"
>
<Rectangle
Height="54"
Width="149"
Canvas.Left="65"
Canvas.Top="58"
Fill="Red"
Stroke="#FF000000"
RadiusY="12"
RadiusX="12"
x:Name="RedRectangle"
RenderTransformOrigin="0.5,0.5"
MouseLeftButtonUp="Red_MouseUp">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle
Height="54"
x:Name="BlueRectangle"
Width="149"
RadiusX="12"
RadiusY="12"
Fill="#FF0050FF"
Stroke="#FF000000"
Canvas.Left="65"
Canvas.Top="133"
RenderTransformOrigin="0.5,0.5"
MouseLeftButtonUp="Blue_MouseUp">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle
Height="54"
x:Name="GreenRectangle"
Width="149"
RadiusX="12"
RadiusY="12"
Fill="Blue"
Stroke="#FF000000"
Canvas.Left="65"
Canvas.Top="207"
RenderTransformOrigin="0.5,0.5"
MouseLeftButtonUp="Green_MouseUp">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</UserControl>
//MainPage.xaml.vb code
Imports
System.Collections.Generic
Imports
System.Linq
Imports
System.Net
Imports
System.Windows
Imports
System.Windows.Controls
Imports
System.Windows.Documents
Imports
System.Windows.Input
Imports
System.Windows.Media
Imports
System.Windows.Media.Animation
Imports
System.Windows.Shapes
Partial Public Class MainPage
Inherits
UserControl
Public Sub New()
InitializeComponent()
End Sub
Private Sub
Red_MouseUp(ByVal sender
As Object,
ByVal e As MouseButtonEventArgs)
MoveRed.Begin()
End Sub
Private Sub
Blue_MouseUp(ByVal sender
As Object,
ByVal e As MouseButtonEventArgs)
MoveBlue.Begin()
End Sub
Private Sub
Green_MouseUp(ByVal sender
As Object,
ByVal e As MouseButtonEventArgs)
MoveGreen.Begin()
End Sub
End Class
Output Window
Conclusion
Hope this article would help you to understand
how to Working with StoryBoard Events in Silverlight.