PageRenderTime 10ms CodeModel.GetById 1ms app.highlight 3ms RepoModel.GetById 1ms app.codeStats 0ms

/Visual Studio 2008/VBSL3Animation/UsingKeyFrames.xaml

#
XAML | 68 lines | 52 code | 1 blank | 15 comment | 0 complexity | f21af6d71d7c66352e3fc91041a6ffd0 MD5 | raw file
 1<!--/****************************** Module Header ******************************\
 2* Module Name:  UsingKeyFrames.xaml
 3* Project:      VBSL3Animation
 4* Copyright (c) Microsoft Corporation.
 5* 
 6* This module shows how to create KeyFrames based animation in Silverilght
 7* 
 8* This source is subject to the Microsoft Public License.
 9* See http://www.microsoft.com/opensource/licenses.mspx#Ms-PL.
10* All other rights reserved.
11* 
12* History:
13* * 9/10/2009 03:00 PM Allen Chen Created
14\***************************************************************************/-->
15    
16    <UserControl x:Class="VBSL3Animation.UsingKeyFrames"
17    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
18    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
19    Width="400" Height="300">
20    <UserControl.Resources>
21        <Storyboard x:Name="MyAnimationStoryboard">
22            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
23                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
24                <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="-4" KeySpline="1,0,1,1"/>
25                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-5" KeySpline="0,0,0,1"/>
26                <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="-4" KeySpline="1,0,1,1"/>
27            </DoubleAnimationUsingKeyFrames>
28            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
29                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
30                <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="167" KeySpline="1,0,1,1"/>
31                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="109" KeySpline="0,0,0,1"/>
32                <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="167" KeySpline="1,0,1,1"/>
33            </DoubleAnimationUsingKeyFrames>
34        </Storyboard>
35    </UserControl.Resources>
36    <Grid x:Name="LayoutRoot" Background="White">
37        <Grid.RowDefinitions>
38            <RowDefinition Height="1*"></RowDefinition>
39            <RowDefinition Height="9*"></RowDefinition>
40        </Grid.RowDefinitions>
41        <StackPanel Grid.Row="0">
42            <Button Content="Please click me to play animation" Click="Button_Click"></Button>
43        </StackPanel>
44        <StackPanel x:Name="MyStackPanel" Background="Orange"  Grid.Row="1">
45            <Path x:Name="path" RenderTransformOrigin="0.5,0.5">
46                <Path.RenderTransform>
47                    <TransformGroup>
48                        <ScaleTransform/>
49                        <SkewTransform/>
50                        <RotateTransform/>
51                        <TranslateTransform/>
52                    </TransformGroup>
53                </Path.RenderTransform>
54                <Path.Fill>
55                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
56                        <GradientStop Color="#FFF1F7FB" Offset="0"/>
57                        <GradientStop Color="#FF3794E4" Offset="1"/>
58                    </LinearGradientBrush>
59                </Path.Fill>
60                <Path.Data>
61                    <!-- Describes an ellipse. -->
62                    <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
63          Center="50,50" RadiusX="15" RadiusY="15" />
64                </Path.Data>
65            </Path>
66        </StackPanel>
67    </Grid>
68</UserControl>