Width and Height animation




//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.Shapes;
using System.Windows.Media.Animation;

namespace _360Timer
{

public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();

this.Show();

for (int i = 0; i < 24; ++i) { Ellipse e = new Ellipse(); e.Stroke = new SolidColorBrush(Color.FromArgb(5, 2, 200, 100)); e.StrokeThickness = 20; e.Width = 10.0; e.Height = 20.0; this.MainCanvas.Children.Add(e); e.SetValue(Canvas.LeftProperty, 300); e.SetValue(Canvas.TopProperty, 400); double duration = 6.0 ; double delay = 1.0 ; DoubleAnimation sizeAnimation = new DoubleAnimation(0.0, 512.0, new Duration(TimeSpan.FromSeconds(duration))); sizeAnimation.RepeatBehavior = RepeatBehavior.Forever; sizeAnimation.BeginTime = TimeSpan.FromSeconds(delay); e.BeginAnimation(Ellipse.WidthProperty, sizeAnimation); e.BeginAnimation(Ellipse.HeightProperty, sizeAnimation); } } } } [/csharp]

Opacity Animation




//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.Shapes;
using System.Windows.Media.Animation;

namespace _360Timer
{

public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();

this.Show();

for (int i = 0; i < 24; ++i) { Ellipse e = new Ellipse(); e.Stroke = new SolidColorBrush(Color.FromArgb(5, 2, 200, 100)); e.StrokeThickness = 20; e.Width = 10.0; e.Height = 20.0; this.MainCanvas.Children.Add(e); e.SetValue(Canvas.LeftProperty, 300); e.SetValue(Canvas.TopProperty, 400); double duration = 6.0 ; double delay = 1.0 ; DoubleAnimation opacityAnimation = new DoubleAnimation(duration-1.0, 0.0, new Duration(TimeSpan.FromSeconds(duration))); opacityAnimation.BeginTime = TimeSpan.FromSeconds(delay); opacityAnimation.RepeatBehavior = RepeatBehavior.Forever; e.BeginAnimation(Ellipse.OpacityProperty, opacityAnimation); } } } } [/csharp]

Markup for navigation transition animations

   
  

<Window x:Class="AnimateNavigateTransitions.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AnimateNavigateTransitions" Height="300" Width="300">
  <Window.Resources>
    <Storyboard x:Key="transitionAnimation" TargetName="transitionPlaceholder">
      <DoubleAnimation Storyboard.TargetProperty="Opacity"
                       From="1" To="0" DecelerationRatio="1"
                       Duration="0:0:0.4" />
    </Storyboard>
  </Window.Resources>

  <StackPanel>
    <Frame Name="mainFrame" Source="Page1.xaml" />
    <Canvas Name="transitionPlaceholder" IsHitTestVisible="False" />
  </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;
using System.Windows.Navigation;
using System.Windows.Media.Animation;


namespace AnimateNavigateTransitions
{
    public partial class Window1 : System.Windows.Window
    {
        VisualBrush lastPageBrush;
        public Window1()
        {
            InitializeComponent();
            mainFrame.Navigating += new System.Windows.Navigation.NavigatingCancelEventHandler(mainFrame_Navigating);
            mainFrame.Navigated += new NavigatedEventHandler(mainFrame_Navigated);
        }
        void mainFrame_Navigating(object sender, NavigatingCancelEventArgs e)
        {
            Page lastPage = mainFrame.Content as Page;
            if (lastPage == null){
                lastPageBrush = null;
               return;
            }
            lastPageBrush = new VisualBrush(lastPage);
            lastPageBrush.Viewbox = new Rect(0, 0, lastPage.ActualWidth,lastPage.ActualHeight);
            lastPageBrush.ViewboxUnits = BrushMappingMode.Absolute;
            lastPageBrush.Stretch = Stretch.None;

            Point pageOffset = lastPage.TransformToVisual(this).Transform(new Point());
            transitionPlaceholder.Margin = new Thickness(pageOffset.X, pageOffset.Y,0, 0);
        }
        void mainFrame_Navigated(object sender, NavigationEventArgs e)
        {
            if (lastPageBrush == null){
               return ;
            }    
            transitionPlaceholder.Background = lastPageBrush;
            lastPageBrush = null;
            Storyboard sb = (Storyboard) FindResource("transitionAnimation");
            sb.Begin(this);
        }
    }
}

   
    
     


Control the Progress of an Animation


   
  

<Window x:Class="WpfApplication1.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="" Height="300" Width="600">
    <Grid>
        <Rectangle x:Name="Rectangle" Height="100" Width="100" Fill="Firebrick">
            <Rectangle.RenderTransform>
                <MatrixTransform x:Name="RectangleMatrixTransform" />
            </Rectangle.RenderTransform>

            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <BeginStoryboard x:Name="RectangleStoryboard">
                        <Storyboard x:Name="Storyboard" CurrentTimeInvalidated="Storyboard_Changed">
                            <MatrixAnimationUsingPath Storyboard.TargetName="RectangleMatrixTransform" Storyboard.TargetProperty="Matrix" Duration="0:0:10"
                RepeatBehavior="Forever">
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <PathGeometry Figures="M -100,0 300, 0" />
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>

        <Slider x:Name="Seeker" Minimum="0" Maximum="1" SmallChange="0.001" ValueChanged="Seeker_ValueChanged">
            <Slider.Triggers>
                <EventTrigger RoutedEvent="Slider.MouseLeftButtonDown">
                    <StopStoryboard BeginStoryboardName="RectangleStoryboard" />
                </EventTrigger>
                <EventTrigger RoutedEvent="Slider.MouseLeftButtonUp">
                    <ResumeStoryboard BeginStoryboardName="RectangleStoryboard" />
                </EventTrigger>
            </Slider.Triggers>
        </Slider>
    </Grid>
</Window>

//File:Window.xaml.cs
using System;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Input;

namespace WpfApplication1
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
        private void Storyboard_Changed(object sender, System.EventArgs e)
        {
            ClockGroup clockGroup = sender as ClockGroup;
            AnimationClock animationClock = clockGroup.Children[0] as AnimationClock;
            if (animationClock.CurrentProgress.HasValue)
            {
                Seeker.Value = animationClock.CurrentProgress.Value;
            }
        }
        private void Seeker_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            Storyboard.Seek(Rectangle,
                            TimeSpan.FromTicks((long)(Storyboard.Children[0].Duration.TimeSpan.Ticks * Seeker.Value)),
                            TimeSeekOrigin.BeginTime);
        }
    }
}

   
    
     


Remove Animations


   
  

<Window x:Class="WpfApplication1.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="" Height="300" Width="300">
  <Window.Resources>
    <Storyboard x:Key="Storyboard1">
      <ParallelTimeline>
        <DoubleAnimation x:Name="Animation1" Storyboard.TargetProperty="Width" From="140" To="50"
          AutoReverse="True" RepeatBehavior="Forever" />
        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.5" AutoReverse="True" RepeatBehavior="Forever" />
      </ParallelTimeline>
    </Storyboard>
  </Window.Resources>

  <UniformGrid>
    <Button Margin="5" Content="Method 2" Click="MyClick">
      <Button.Triggers>
        <EventTrigger
          RoutedEvent="Button.Loaded">
          <BeginStoryboard Storyboard="{DynamicResource Storyboard1}" />
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </UniformGrid>
</Window>
//File:Window.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class Window1 : Window
    {
        private AnimationClock opacityClock;
        private AnimationClock widthClock;
        public Window1()
        {
            InitializeComponent();
        }

        private void MyClick(object sender, RoutedEventArgs e)
        {
            Button button2 = sender as Button;
            button2.BeginAnimation(Button.WidthProperty, null);
            button2.BeginAnimation(Button.OpacityProperty, null);
        }
    }
}

   
    
     


Remove Animations with AnimationClock


   
  

<Window x:Class="WpfApplication1.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="" Height="300" Width="300">
  <Window.Resources>
    <Storyboard x:Key="Storyboard1">
      <ParallelTimeline>
        <DoubleAnimation x:Name="Animation1" Storyboard.TargetProperty="Width" From="140" To="50"
          AutoReverse="True" RepeatBehavior="Forever" />
        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.5" AutoReverse="True" RepeatBehavior="Forever" />
      </ParallelTimeline>
    </Storyboard>
  </Window.Resources>

  <UniformGrid>
    <Button x:Name="button3" Content="Method 3" Click="Button3_Click" Loaded="Button3_Loaded" />
  </UniformGrid>
</Window>
//File:Window.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class Window1 : Window
    {
        private AnimationClock opacityClock;
        private AnimationClock widthClock;
        public Window1()
        {
            InitializeComponent();
        }

        private void Button3_Loaded(object sender, RoutedEventArgs e)
        {
            DoubleAnimation opacityAnimation = new DoubleAnimation(1d, 0.5d, TimeSpan.FromSeconds(1), FillBehavior.HoldEnd);
            opacityAnimation.RepeatBehavior = RepeatBehavior.Forever;
            opacityAnimation.AutoReverse = true;
            opacityClock = opacityAnimation.CreateClock();
            button3.ApplyAnimationClock(Button.OpacityProperty, opacityClock);

            DoubleAnimation widthAnimation = new DoubleAnimation(140d, 50d, TimeSpan.FromSeconds(1), FillBehavior.HoldEnd);
            widthAnimation.RepeatBehavior = RepeatBehavior.Forever;
            widthAnimation.AutoReverse = true;
            widthClock = widthAnimation.CreateClock();
            button3.ApplyAnimationClock(Button.WidthProperty, widthClock);
        }
        private void Button3_Click(object sender, RoutedEventArgs e)
        {
            opacityClock.Controller.Remove();
            widthClock.Controller.Remove();
        }        
    }
}

   
    
     


A Simple Animation in Code


   
  

<Window x:Class="WpfApplication1.SimpleAnimation" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Title="Simple Animation Example" Height="300" Width="300"> 
    <Canvas>
        <Rectangle x:Name="rect1" Width="100" Height="50" Fill="Blue"/> 
    </Canvas> 
</Window> 
//File:Window.xaml.cs

using System; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Media; 
using System.Windows.Shapes; 
using System.Windows.Media.Animation; 


namespace WpfApplication1 
{ 
    public partial class SimpleAnimation : Window 
    { 
        public SimpleAnimation() 
        { 
            InitializeComponent(); 
            DoubleAnimation da = new DoubleAnimation(); 
            da.From = 0; 
            da.To = 200; 
            da.Duration = TimeSpan.FromSeconds(5); 
            da.AutoReverse = true; 
            da.RepeatBehavior = RepeatBehavior.Forever; 
            rect1.BeginAnimation(Canvas.LeftProperty, da); 
            rect1.BeginAnimation(Canvas.TopProperty, da); 
        } 
    } 
}