Mega Code Archive

 

Categories / Silverlight / Animations

 

Animation with DoubleAnimationUsingKeyFrames

<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="SquaretoCircleStoryboard">       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Rectangle.RadiusX)">         <SplineDoubleKeyFrame KeyTime="00:00:00" Value="12"/>         <SplineDoubleKeyFrame KeyTime="00:00:01" Value="75"/>         <SplineDoubleKeyFrame KeyTime="00:00:04" Value="12"/>       </DoubleAnimationUsingKeyFrames>       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Rectangle.RadiusY)">         <SplineDoubleKeyFrame KeyTime="00:00:00" Value="12"/>         <SplineDoubleKeyFrame KeyTime="00:00:03" Value="75"/>         <SplineDoubleKeyFrame KeyTime="00:00:04" Value="12"/>       </DoubleAnimationUsingKeyFrames>     </Storyboard>   </UserControl.Resources>   <StackPanel>     <Rectangle  Margin="1,4,7,8" Height="150" Width="150" RadiusX="12" RadiusY="12" x:Name="rectangle">       <Rectangle.Fill>         <LinearGradientBrush EndPoint="1,0.7" StartPoint="-0.3,0.1">           <GradientStop Color="Black" Offset="0.0"/>           <GradientStop Color="Yellow" Offset="0.5"/>           <GradientStop Color="Red" Offset="0.9"/>         </LinearGradientBrush>       </Rectangle.Fill>     </Rectangle>     <StackPanel Margin="8,8,8,8">       <TextBlock Height="Auto" FontFamily="Comic Sans MS" Text="Square to Circle" TextWrapping="Wrap" Width="150" Margin="15,2,2,2"/>       <Button Content="Animate!" Height="35" Width="104" Margin="0,2,2,2" Click="Button_Click">         <Button.Background>           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">             <GradientStop Color="#FF050505"/>             <GradientStop Color="#FF60DD23" Offset="1"/>           </LinearGradientBrush>         </Button.Background>       </Button>     </StackPanel>   </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)     {       SquaretoCircleStoryboard.Begin();     }   } }