Storyboard Events : Storyboard « Animations « Silverlight

1. Silverlight
2. Animations
3. Storyboard

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" Completed="MoveRed_Completed">
            <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" Completed="MoveBlue_Completed">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BlueRectangle" 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="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="#FFFF0000" 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">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle Height="54" x:Name="GreenRectangle" Width="149" RadiusX="12" RadiusY="12" Fill="#FF00FF00" Stroke="#FF000000" Canvas.Left="65" Canvas.Top="207" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas>
</UserControl>

//File:Page.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication3
{
    public partial class MainPage : UserControl
    {

        public MainPage()
        {
            InitializeComponent();
        }

        private void Red_MouseUp(object sender, MouseButtonEventArgs e)
        {
            MoveRed.Begin();
        }

        private void MoveRed_Completed(object sender, EventArgs e)
        {
            MoveBlue.Begin();
        }

        private void MoveBlue_Completed(object sender, EventArgs e)
        {
            MoveGreen.Begin();
        }
    }
}

   
    
    
    
  

Related examples in the same category

1.	Rectangle Trigger and Storyboard
2.	Storyboard Properties
3.	Storyboard as Resource
4.	Events of StoryBoard
5.	Use two storyboards to control the slidein and slideout
6.	Defining a Storyboard as a resource
7.	Starting a Storyboard from code-behind
8.	Syntax of Storyboard element with multiple animations
9.	Animation overriding target of its parent Storyboard
10.	Start a story board with code
11.	An animation that uses the playback methods and the Completed event
12.	Pausing and resuming a storyboard with triggers