/Visual Studio 2008/VBSL3Animation/UsingKeyFrames.xaml

<!--/****************************** Module Header ******************************\

* Module Name:  UsingKeyFrames.xaml

* Project:      VBSL3Animation

* Copyright (c) Microsoft Corporation.

* 

* This module shows how to create KeyFrames based animation in Silverilght

* 

* This source is subject to the Microsoft Public License.

* See http://www.microsoft.com/opensource/licenses.mspx#Ms-PL.

* All other rights reserved.

* 

* History:

* * 9/10/2009 03:00 PM Allen Chen Created

\***************************************************************************/-->

    

    <UserControl x:Class="VBSL3Animation.UsingKeyFrames"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    Width="400" Height="300">

    <UserControl.Resources>

        <Storyboard x:Name="MyAnimationStoryboard">

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">

                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

                <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="-4" KeySpline="1,0,1,1"/>

                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-5" KeySpline="0,0,0,1"/>

                <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="-4" KeySpline="1,0,1,1"/>

            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

                <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="167" KeySpline="1,0,1,1"/>

                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="109" KeySpline="0,0,0,1"/>

                <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="167" KeySpline="1,0,1,1"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.RowDefinitions>

            <RowDefinition Height="1*"></RowDefinition>

            <RowDefinition Height="9*"></RowDefinition>

        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0">

            <Button Content="Please click me to play animation" Click="Button_Click"></Button>

        </StackPanel>

        <StackPanel x:Name="MyStackPanel" Background="Orange"  Grid.Row="1">

            <Path x:Name="path" RenderTransformOrigin="0.5,0.5">

                <Path.RenderTransform>

                    <TransformGroup>

                        <ScaleTransform/>

                        <SkewTransform/>

                        <RotateTransform/>

                        <TranslateTransform/>

                    </TransformGroup>

                </Path.RenderTransform>

                <Path.Fill>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="#FFF1F7FB" Offset="0"/>

                        <GradientStop Color="#FF3794E4" Offset="1"/>

                    </LinearGradientBrush>

                </Path.Fill>

                <Path.Data>

                    <!-- Describes an ellipse. -->

                    <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"

          Center="50,50" RadiusX="15" RadiusY="15" />

                </Path.Data>

            </Path>

        </StackPanel>

    </Grid>

</UserControl>