Create an interactive animation using XAML and the Storyboard
<Window x:Class="WpfApplication1.CombineTransformAnimation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animating Combine Transforms" Height="320" Width="300">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
<Setter Property="Margin" Value="10" />
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="40" />
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
</TransformGroup>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Name="StoryboardBegin">
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
To="1.5" Duration="0:0:1" RepeatBehavior="1x" />
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
To="1.5" Duration="0:0:1" RepeatBehavior="1x" />
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Children[1].AngleX"
To="30" Duration="0:0:1" RepeatBehavior="1x" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Rectangle.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
Duration="0:0:0.5" />
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
Duration="0:0:0.5" />
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Children[1].AngleX"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel Margin="20" HorizontalAlignment="Center">
<Button Click="btn1_Click" x:Name="btn1">Button1</Button>
<Button Click="btn2_Click" x:Name="btn2">Button2</Button>
<Button Click="btnClose_Click">Close</Button>
<TextBlock Name="tb1" Margin="5,40,5,5" />
</StackPanel>
</Window>
//File:Window.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;
namespace WpfApplication1
{
public partial class CombineTransformAnimation : Window
{
public CombineTransformAnimation()
{
InitializeComponent();
}
private void btn1_Click(object sender,RoutedEventArgs e)
{
tb1.Text = "You are clicking on " + btn1.Content;
}
private void btn2_Click(object sender,RoutedEventArgs e)
{
tb1.Text = "You are clicking on " + btn2.Content;
}
private void btnClose_Click(object sender,RoutedEventArgs e)
{
this.Close();
}
}
}
Related examples in the same category
