Rotate Button Animation

image_pdfimage_print


   
  
<Window x:Class="Animation.RotateButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="RotateButton" Height="300" Width="300">
  <Window.Resources>
    <Style TargetType="{x:Type Button}">
      <Setter Property="HorizontalAlignment" Value="Center"></Setter>
      <Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>
      <Setter Property="RenderTransform">
        <Setter.Value>
          <RotateTransform></RotateTransform>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard Name="rotateStoryboardBegin">
              <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
                 To="360" Duration="0:0:0.8" RepeatBehavior="Forever"></DoubleAnimation>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Button.MouseLeave">
          <EventTrigger.Actions>
           <!-- <RemoveStoryboard BeginStoryboardName="rotateStoryboardBegin"></RemoveStoryboard> -->
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
                   Duration="0:0:0.2"></DoubleAnimation>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Style.Triggers>        
    </Style>
           
  </Window.Resources>
  <StackPanel Margin="5" Button.Click="cmd_Clicked">
    <Button>One</Button>
    <Button>Two</Button>
    <Button>Three</Button>
    <Button>Four</Button>
  </StackPanel>
</Window>

//File:Window.xaml.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace Animation
{
    public partial class RotateButton : System.Windows.Window
    {

        public RotateButton()
        {
            InitializeComponent();
        }

        private void cmd_Clicked(object sender, RoutedEventArgs e)
        {
            Console.WriteLine( ((Button)e.OriginalSource).Content);
        }

    }
}

   
    
     


Rotate Button Animation With Layout

image_pdfimage_print


   
  

<Window x:Class="Animation.RotateButtonWithLayout"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="RotateButtonWithLayout" Height="300" Width="300">
  <Window.Resources>
    <Style TargetType="{x:Type Button}">
      <Setter Property="HorizontalAlignment" Value="Center"></Setter>
      <Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>
      <Setter Property="LayoutTransform">
        <Setter.Value>
          <RotateTransform></RotateTransform>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard Name="rotateStoryboardBegin">
              <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.Angle"
                 To="360" Duration="0:0:0.8" RepeatBehavior="Forever"></DoubleAnimation>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Button.MouseLeave">
          <EventTrigger.Actions>
           <!-- <RemoveStoryboard BeginStoryboardName="rotateStoryboardBegin"></RemoveStoryboard> -->
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.Angle"
                   Duration="0:0:0.2"></DoubleAnimation>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Style.Triggers>        
    </Style>
           
  </Window.Resources>
  <StackPanel Margin="5" Button.Click="cmd_Clicked">
    <Button>One</Button>
    <Button>Two</Button>
    <Button>Three</Button>
    <Button>Four</Button>
  </StackPanel>
</Window>
//File:Window.xaml.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace Animation
{
    public partial class RotateButtonWithLayout : System.Windows.Window
    {
        public RotateButtonWithLayout()
        {
            InitializeComponent();
        }

        private void cmd_Clicked(object sender, RoutedEventArgs e)
        {
            Console.WriteLine( ((Button)e.OriginalSource).Content );
        }

    }
}

   
    
     


A simple, finite animation

image_pdfimage_print


   
  
<Window x:Class="Holding.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="FillingExample" Height="300" Width="300">
  <Canvas>
    <Ellipse Name="myEllipse" Height="100" Fill="Red">
      <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Ellipse.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation BeginTime="0:0:2" Duration="0:0:5"
                  Storyboard.TargetProperty="(Ellipse.Width)"
                  From="10" To="300" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Ellipse.Triggers>
    </Ellipse>
  </Canvas>
</Window>

//File:Window.xaml.cs
using System;
using System.Windows;
using System.Windows.Threading;
using System.Diagnostics;

namespace Holding
{
    public partial class Window1 : Window
    {

        DispatcherTimer t = new DispatcherTimer();
        DateTime start;

        public Window1()
        {
            InitializeComponent();

            t.Tick += new EventHandler(OnTimerTick);
            t.Interval = TimeSpan.FromSeconds(0.5);
            t.Start();
            start = DateTime.Now;
        }

        void OnTimerTick(object sender, EventArgs e)
        {
            TimeSpan elapsedTime = DateTime.Now - start;
            Debug.WriteLine(elapsedTime.ToString() + ": " + myEllipse.Width);
        }
    }
}

   
    
     


Bouncing Ball

image_pdfimage_print


   
     

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s="clr-namespace:System;assembly=mscorlib">


    <Ellipse Name="elips" Width="20" Height="20" Fill="Red" Canvas.Left="96">

        <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.Loaded">
                <BeginStoryboard>
                    <Storyboard TargetName="elips" 
                                TargetProperty="(Canvas.Top)"
                                RepeatBehavior="Forever">
                        <DoubleAnimationUsingKeyFrames>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="96" />
                            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="480" 
                                                  KeySpline="0.25 0, 0.6 0.2" />
                            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="96"
                                                  KeySpline="0.75 1, 0.4 0.8" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>
</Canvas>






     


Animation along a path

image_pdfimage_print


   
     

<Window x:Class="Animation.PathBasedAnimation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="PathBasedAnimation" Height="400" Width="550">

    <Window.Resources>
        <PathGeometry x:Key="path">
            <PathFigure IsClosed="True">
                <ArcSegment Point="100,200" Size="15,10" SweepDirection="Clockwise"></ArcSegment>
                <ArcSegment Point="400,50" Size="5,5" ></ArcSegment>
                <ArcSegment Point="40,50" Size="5,5" ></ArcSegment>
            </PathFigure>
        </PathGeometry>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingPath Storyboard.TargetName="image"
                                      Storyboard.TargetProperty="(Canvas.Left)"
                                     PathGeometry="{StaticResource path}"
                                      Duration="0:0:5" RepeatBehavior="Forever" Source="X" />
                        <DoubleAnimationUsingPath Storyboard.TargetName="image"
                                      Storyboard.TargetProperty="(Canvas.Top)"
                                     PathGeometry="{StaticResource path}"
                                      Duration="0:0:5" RepeatBehavior="Forever" Source="Y" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>
    <Canvas Margin="10">
        <Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path}" Canvas.Top="10" Canvas.Left="10">
        </Path>
        <Rectangle Name="image" Width="10" Height="20" Stroke="Red">
        </Rectangle>
    </Canvas>
</Window>






     


Animate RadialGradient

image_pdfimage_print


   
     
<Window x:Class="Animation.AnimateRadialGradient"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AnimateRadialGradient" Height="300" Width="300">
  <Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Fill.GradientOrigin"
                                           RepeatBehavior="Forever" >
              <LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:0"></LinearPointKeyFrame>
              <DiscretePointKeyFrame Value="0.3,0.7" KeyTime="0:0:25"></DiscretePointKeyFrame>
              <DiscretePointKeyFrame Value="0.5,0.9" KeyTime="0:0:28"></DiscretePointKeyFrame>
              <DiscretePointKeyFrame Value="0.7,0.3" KeyTime="0:0:24"></DiscretePointKeyFrame>
            </PointAnimationUsingKeyFrames>
            <ColorAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Fill.GradientStops&#91;1&#93;.Color"
              To="Black"  Duration="0:0:10"
              AutoReverse="True" RepeatBehavior="Forever"></ColorAnimation>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Window.Triggers>
    <Grid>
      <Ellipse Name="ellipse" Margin="5" Grid.Row="1" Stretch="Uniform">
        <Ellipse.Fill>
          <RadialGradientBrush
             RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.3">
            <GradientStop Color="White" Offset="0" ></GradientStop>
            <GradientStop Color="Blue" Offset="1" ></GradientStop>            
          </RadialGradientBrush>
        </Ellipse.Fill>
      </Ellipse>
    </Grid>
</Window>






     


Animate RenderTransform Angle

image_pdfimage_print


   
     
<Window x:Class="Animation.AnimateVisual"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AnimateVisualBrush" Height="300" Width="300" Background="LightGoldenrodYellow">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
      </Grid.RowDefinitions>

      <Button Name="visual" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button.Content>Test</Button.Content>
        <Button.Triggers>
          <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
              <Storyboard  RepeatBehavior="Forever">
                <DoubleAnimation Storyboard.TargetName="rectangle"
                                 Storyboard.TargetProperty="RenderTransform.Children&#91;0&#93;.AngleY"
                                 To="180" Duration="0:0:15" AutoReverse="True"></DoubleAnimation>
                <DoubleAnimation Storyboard.TargetName="rectangle"
                                 Storyboard.TargetProperty="RenderTransform.Children&#91;1&#93;.Angle"
                                 To="180" Duration="0:0:20" AutoReverse="True"></DoubleAnimation>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Button.Triggers>
      </Button>
      
      <Rectangle Grid.Row="1" Name="rectangle" Width="100" Stretch="Uniform" ClipToBounds="False" RenderTransformOrigin="0.5,0.5">
        <Rectangle.Fill>
          <VisualBrush Visual="{Binding ElementName=visual}">
           
          </VisualBrush>
        </Rectangle.Fill>
        <Rectangle.RenderTransform>
          
            <TransformGroup>
              <SkewTransform CenterX="0.5"></SkewTransform>
              <RotateTransform CenterX="0.5" CenterY="0.5"></RotateTransform>
            </TransformGroup>
          
        </Rectangle.RenderTransform>
      </Rectangle>
    </Grid>
  </Window>