Animation In Code


   
  

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006"
  mc:Ignorable="d" Background="#FFFFFFFF" x:Name="DocumentRoot"
  x:Class="AnimationExamples.AnimationInCode" Width="640" Height="480">
  <Grid.Resources>
    <Storyboard x:Key="OnLoaded"/>
  </Grid.Resources>

  <Grid.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
      <BeginStoryboard x:Name="OnLoaded_BeginStoryboard" Storyboard="{DynamicResource OnLoaded}"/>
    </EventTrigger>
  </Grid.Triggers>
  
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition/>
  </Grid.RowDefinitions>
  <Slider d:LayoutOverrides="Width, Height" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,212,87" Width="105" Height="33" x:Name="WidthControl" Maximum="100" Minimum="0"/>
  <Label d:LayoutOverrides="Width, Height" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="208,0,0,97.893333333333" Width="100" Height="23.2766666666667" x:Name="ContentLabel" Content="Circle Opacity:" RenderTransformOrigin="0.5,0.5" TabIndex="4"/>
  <Ellipse Stroke="{x:Null}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="228,163,233,138" Width="Auto" Height="Auto" x:Name="MyControl">
    <Ellipse.Fill>
      <RadialGradientBrush>
        <GradientStop Color="#FFFFFFFF" Offset="0"/>
        <GradientStop Color="#FF87001C" Offset="0.73735921399473"/>
        <GradientStop Color="#FF4C000F" Offset="1"/>
      </RadialGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
</Grid>
//File:Window.xaml.cs
using System;
using System.IO;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace AnimationExamples
{
  public partial class AnimationInCode
  {
    public AnimationInCode()
    {
      this.InitializeComponent();
    }
    
    protected override void OnInitialized(EventArgs e)
    {
      base.OnInitialized(e);
      
      DoubleCollection tickMarks = new DoubleCollection();
      tickMarks.Add(0);
      tickMarks.Add(100);
      
      this.WidthControl.Ticks = tickMarks;
      this.WidthControl.TickPlacement = TickPlacement.BottomRight;
      this.WidthControl.AutoToolTipPlacement = AutoToolTipPlacement.TopLeft;
        this.WidthControl.AutoToolTipPrecision = 0;
      this.WidthControl.Value = this.WidthControl.Maximum;
      this.WidthControl.PreviewMouseUp += new MouseButtonEventHandler(WidthControl_MouseUp);
    }

    private void WidthControl_MouseUp(object sender, MouseButtonEventArgs e)
    {
      DoubleAnimation moveAnimation = new DoubleAnimation();
      moveAnimation.From = this.MyControl.Opacity;
      moveAnimation.To = this.WidthControl.Value / this.WidthControl.Maximum;
      moveAnimation.Duration = new Duration(TimeSpan.FromSeconds(.5));
      moveAnimation.DecelerationRatio = .5;
      
      MyControl.BeginAnimation(Shape.OpacityProperty, moveAnimation);
    }
  }
}

   
    
     


Velocity animation


   
  
<Page x:Class="Microsoft.Samples.PerFrameAnimations.FrameIndependentFollowExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Canvas x:Name="containerCanvas" Background="Transparent">
    <Rectangle x:Name="followRectangle" Canvas.Left="0" Canvas.Top="0" 
      Fill="red" Width="50" Height="50" />
  </Canvas>
</Page>
//File:Window.xaml.cs


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace Microsoft.Samples.PerFrameAnimations
{
    public partial class FrameIndependentFollowExample : Page
    {
        private Vector _rectangleVelocity = new Vector(0, 0);
        private Point _lastMousePosition = new Point(500, 500);

        private TimeSpan _lastRender;

        public FrameIndependentFollowExample(): base()
        {
            _lastRender = TimeSpan.FromTicks(DateTime.Now.Ticks);
            CompositionTarget.Rendering += UpdateRectangle;
        }

        private void UpdateRectangle(object sender, EventArgs e)
        {
            RenderingEventArgs renderArgs = (RenderingEventArgs)e;
            Double deltaTime = (renderArgs.RenderingTime - _lastRender).TotalSeconds;
            _lastRender = renderArgs.RenderingTime;

            Point location = new Point(0,0);

            Vector toMouse = _lastMousePosition - location;

            double followForce = 1.00;
            _rectangleVelocity += toMouse * followForce;

            double drag = 0.9;
            _rectangleVelocity *= drag;

            location += _rectangleVelocity * deltaTime;

            Canvas.SetLeft(followRectangle, location.X);
            Canvas.SetTop(followRectangle, location.Y);
        }
    }
}

   
    
     


Animation with code


   
  
<Window x:Class="SimpleCodeAnimation.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="SimpleCodeAnimation" Height="300" Width="300">
    <Grid>
      <Ellipse Name="myEllipse" Fill="Red" Height="100" Width="10" />
    </Grid>
</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;
using System.Windows.Media.Animation;


namespace SimpleCodeAnimation
{
    public partial class Window1 : System.Windows.Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        protected override void OnMouseDown(MouseButtonEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                DoubleAnimation animate = new DoubleAnimation();
                animate.To = 300;
                animate.Duration = new Duration(TimeSpan.FromSeconds(5));
                animate.RepeatBehavior = RepeatBehavior.Forever;
                myEllipse.BeginAnimation(Ellipse.WidthProperty, animate);
            }
            else
            {
                DoubleAnimation animate = new DoubleAnimation();
                animate.By = 200;
                animate.Duration = new Duration(TimeSpan.FromSeconds(5));
                myEllipse.BeginAnimation(Ellipse.WidthProperty, animate);
            }
        }
    }
}

   
    
     


Code Animation Accelerate Decelerate


   
  
<Window x:Class="SimpleCodeAnimation.AccelerateDecelerate"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Acceleration and Deceleration" Height="300" Width="300">
    <Grid>
      <Ellipse Name="myEllipse" Fill="Red" Height="100" Width="10" />
    </Grid>
</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;
using System.Windows.Media.Animation;

namespace SimpleCodeAnimation
{
    public partial class AccelerateDecelerate : System.Windows.Window
    {
        public AccelerateDecelerate()
        {
            InitializeComponent();
        }
        protected override void OnMouseDown(MouseButtonEventArgs e)
        {
            DoubleAnimation animate = new DoubleAnimation();
            animate.By = 100;
            animate.Duration = new Duration(TimeSpan.FromSeconds(3));

            animate.AccelerationRatio = 0.2;
            animate.DecelerationRatio = 0.1;

            myEllipse.BeginAnimation(Ellipse.WidthProperty, animate);
        }
    }
}

   
    
     


A simple, finite animation


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

   
    
     


Rotate Button Animation With Layout


   
  

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

    }
}

   
    
     


Rotate Button Animation


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

    }
}