Mega Code Archive

 

Categories / C# / WPF

 

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();         }     } }