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();
}
}
}
Related examples in the same category
