Use StringAnimationUsingKeyFrames to Color

image_pdfimage_print


   
      

<Window x:Class="KeyFrameAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Key-Frame Animation" Height="200" Width="300">
  <StackPanel Margin="15">
    <TextBlock Name="label" Block.TextAlignment="Center" Foreground="Blue" />
    <Rectangle Name="rect" Width="200" Height="100" Stroke="Blue" Margin="10">
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
          <GradientStop Offset="0" />
          <GradientStop Offset="1" />
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="StackPanel.Loaded">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard>
              <StringAnimationUsingKeyFrames Storyboard.TargetName="label" Storyboard.TargetProperty="(TextBlock.Text)"
                RepeatBehavior="Forever">
                <DiscreteStringKeyFrame Value="Colormap: Spring" KeyTime="0:0:0" />
                <DiscreteStringKeyFrame Value="Colormap: Summer" KeyTime="0:0:5" />
                <DiscreteStringKeyFrame Value="Colormap: Autumn" KeyTime="0:0:10" />
                <DiscreteStringKeyFrame Value="Colormap: Winter" KeyTime="0:0:15" />
                <DiscreteStringKeyFrame Value="Colormap: Cool" KeyTime="0:0:20" />
                <DiscreteStringKeyFrame Value="Colormap: Spring" KeyTime="0:0:25" />
              </StringAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </StackPanel.Triggers>
  </StackPanel>
</Window>

   
    
    
    
    
    
     


Using DiscreteStringKeyFrame

image_pdfimage_print


   
      
<Window x:Class="KeyFrameAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Key-Frame Animation" Height="200" Width="300">
  <StackPanel Margin="15">
    <TextBlock Name="label" Block.TextAlignment="Center" Foreground="Blue" />
    <Rectangle Name="rect" Width="200" Height="100" Stroke="Blue" Margin="10">
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
          <GradientStop Offset="0" />
          <GradientStop Offset="1" />
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="StackPanel.Loaded">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard>
              <StringAnimationUsingKeyFrames Storyboard.TargetName="label" Storyboard.TargetProperty="(TextBlock.Text)"
                RepeatBehavior="Forever">
                <DiscreteStringKeyFrame Value="Colormap: Spring" KeyTime="0:0:0" />
                <DiscreteStringKeyFrame Value="Colormap: Summer" KeyTime="0:0:5" />
                <DiscreteStringKeyFrame Value="Colormap: Autumn" KeyTime="0:0:10" />
                <DiscreteStringKeyFrame Value="Colormap: Winter" KeyTime="0:0:15" />
                <DiscreteStringKeyFrame Value="Colormap: Cool" KeyTime="0:0:20" />
                <DiscreteStringKeyFrame Value="Colormap: Spring" KeyTime="0:0:25" />
              </StringAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </StackPanel.Triggers>
  </StackPanel>
</Window>

   
    
    
    
    
    
     


Animate Ball Height

image_pdfimage_print


   
      

<Window x:Class="asdf"
  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="ResizeEllipseStoryboard">
            <ParallelTimeline>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Height">
                    <LinearDoubleKeyFrame Value="150" KeyTime="0:0:1" />
                    <LinearDoubleKeyFrame Value="230" KeyTime="0:0:2" />
                    <LinearDoubleKeyFrame Value="150" KeyTime="0:0:2.5" />
                    <LinearDoubleKeyFrame Value="230" KeyTime="0:0:5" />
                    <LinearDoubleKeyFrame Value="40" KeyTime="0:0:9" />
                </DoubleAnimationUsingKeyFrames>

            </ParallelTimeline>
        </Storyboard>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>
        <Ellipse Height="40" Width="40" x:Name="ellipse" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.75,0.25">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Red" Offset="1.0" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Button Content="Start..." Margin="10" Grid.Row="1">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{DynamicResource ResizeEllipseStoryboard}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>

    </Grid>
</Window>

   
    
    
    
    
    
     


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>