Silverlight Working with StoryBoard Events in VB.NET

In this article you will see how to Working with StoryBoard Events in Silverlight.
  • 2438

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 ObjectByVal e As MouseButtonEventArgs)
        MoveRed.Begin()
    End Sub 
    Private Sub Blue_MouseUp(ByVal sender As ObjectByVal e As MouseButtonEventArgs)
        MoveBlue.Begin()
    End Sub
    Private Sub Green_MouseUp(ByVal sender As ObjectByVal e As MouseButtonEventArgs)
        MoveGreen.Begin()
    End Sub 
End Class

Output Window

1.gif
 

Conclusion

Hope this article would help you to understand how to Working with StoryBoard Events in Silverlight.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.