Mega Code Archive

 

Categories / Silverlight / Animations

 

Animating UI Elements with Keyframes

<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="BouncingBallStoryboard">       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">         <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>         <SplineDoubleKeyFrame KeyTime="00:00:01" Value="272">           <SplineDoubleKeyFrame.KeySpline>             <KeySpline ControlPoint1="0,0" ControlPoint2="1,0"/>           </SplineDoubleKeyFrame.KeySpline>         </SplineDoubleKeyFrame>         <SplineDoubleKeyFrame KeyTime="00:00:01.2" Value="200">           <SplineDoubleKeyFrame.KeySpline>             <KeySpline ControlPoint1="0,0" ControlPoint2="0,0"/>           </SplineDoubleKeyFrame.KeySpline>         </SplineDoubleKeyFrame>       </DoubleAnimationUsingKeyFrames>     </Storyboard>     <Storyboard x:Name="MultipleAnimations">       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">         <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>         <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="258"/>         <SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="8"/>       </DoubleAnimationUsingKeyFrames>       <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">         <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFF0000"/>         <SplineColorKeyFrame KeyTime="00:00:01.5000000" Value="#3F00FDFD"/>         <SplineColorKeyFrame KeyTime="00:00:02.6000000" Value="#FFFF0000"/>       </ColorAnimationUsingKeyFrames>       <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">         <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFFFF00"/>         <SplineColorKeyFrame KeyTime="00:00:01.5000000" Value="#FFFFA500"/>         <SplineColorKeyFrame KeyTime="00:00:02.6000000" Value="#FFFFA500"/>         <SplineColorKeyFrame KeyTime="00:00:04" Value="#FF000080"/>       </ColorAnimationUsingKeyFrames>     </Storyboard>   </UserControl.Resources>   <StackPanel>     <Ellipse Height="70" HorizontalAlignment="Stretch" Margin="49,43,66,0" VerticalAlignment="Top" Fill="#FF0000FF" Stroke="#FF000000" x:Name="ellipse" RenderTransformOrigin="0.5,0.5">       <Ellipse.RenderTransform>         <TransformGroup>           <ScaleTransform/>           <SkewTransform/>           <RotateTransform/>           <TranslateTransform/>         </TransformGroup>       </Ellipse.RenderTransform>     </Ellipse>     <Rectangle Height="15.23" HorizontalAlignment="Stretch" Margin="0,0,0,0"        VerticalAlignment="Bottom" Fill="#FF3A3A3F"        d:LayoutOverrides="Height"/>     <Rectangle Height="14.508" HorizontalAlignment="Left"        Margin="0,113,0,0" VerticalAlignment="Top" Width="49.56"        Fill="#FF352424" d:LayoutOverrides="Width, Height"/>     <Button Height="28" HorizontalAlignment="Stretch"        Margin="4,4,4,0" VerticalAlignment="Top" Content="Click to Drop the Ball"       Click="Button_Click"/>     <Rectangle Height="70" HorizontalAlignment="Left"        Margin="37,43,0,0" VerticalAlignment="Top" Width="70"       Grid.Column="1" Fill="#FF00FFFF" Stroke="#FF000000" x:Name="rectangle"        RenderTransformOrigin="0.5,0.5">       <Rectangle.RenderTransform>         <TransformGroup>           <ScaleTransform/>           <SkewTransform/>           <RotateTransform/>           <TranslateTransform/>         </TransformGroup>       </Rectangle.RenderTransform>     </Rectangle>     <Ellipse Height="70" HorizontalAlignment="Stretch"        Margin="145,43,199,0" VerticalAlignment="Top"        Fill="#FFFFFF00" Stroke="#FF000000" Width="70"        x:Name="ellipse1" RenderTransformOrigin="0.5,0.5">       <Ellipse.RenderTransform>         <TransformGroup>           <ScaleTransform/>           <SkewTransform/>           <RotateTransform/>           <TranslateTransform/>         </TransformGroup>       </Ellipse.RenderTransform>     </Ellipse>     <Ellipse HorizontalAlignment="Right" Margin="0,43,85,0"         VerticalAlignment="Top" Fill="#FFFF0000" Stroke="#FF000000"        Width="70" Height="70" x:Name="ellipse2" RenderTransformOrigin="0.5,0.5">       <Ellipse.RenderTransform>         <TransformGroup>           <ScaleTransform/>           <SkewTransform/>           <RotateTransform/>           <TranslateTransform/>         </TransformGroup>       </Ellipse.RenderTransform>     </Ellipse>     <Button Height="28" HorizontalAlignment="Left" Margin="4,4,0,0"         VerticalAlignment="Top" Width="151"        Content="Start Multi-Animation" Click="Button_Click_1"/>   </StackPanel> </UserControl> //File: Page.xaml.cs using System.Windows; using System.Windows.Controls; namespace SilverlightApplication3 {   public partial class MainPage : UserControl   {     public MainPage()     {       InitializeComponent();     }     private void Button_Click(object sender, RoutedEventArgs e)     {       BouncingBallStoryboard.Begin();     }     private void Button_Click_1(object sender, RoutedEventArgs e)     {       MultipleAnimations.Begin();     }   } }