Silverlight Working with StoryBoard Events in VB.NET
In this article you will see how to Working with StoryBoard Events in Silverlight.
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 theStoryboardEventHelper 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.