Post
Ask Question

Animation In WPF

Let's create a basic animation window on a data trigger, where the size of the button changes on ButtonClick event and the background color of a button and panel changes for 8 seconds.
 
Also, let's add a heart shape path, which will be triggered with a boolean to visibility converter.
 
Let's build this:
 
Animation In WPF
 
Tip
 
We are following MVVM.
 
Button
 
Background, Height & Width are managed by animation.
  1. <Button x:Name="ClickMe"    
  2.                 Content="Start The Animation"    
  3.                 Height="20"    
  4.                 Width="120"    
  5.                 VerticalAlignment="Center"    
  6.                 HorizontalAlignment="Center"    
  7.                 Background="Transparent"    
  8.                 BorderBrush="salmon"    
  9.                 Margin="-10 110 0 0"    
  10.                 Command="{Binding AminationButtonClicked}">    
  11.             <Button.Style>    
  12.                 <Style TargetType="Button"    >    
  13.                 <Style.Triggers>    
  14.                         <DataTrigger Binding="{Binding IsButtonClicked}" Value="True">    
  15.                             <DataTrigger.EnterActions>    
  16.                                 <BeginStoryboard>    
  17.                                     <Storyboard Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" Duration="0:0:8">    
  18.                                         <ColorAnimation To="Gray" Duration="0:0:0"/>    
  19.                                         <ColorAnimation To="Coral" Duration="0:0:1"/>    
  20.                                         <ColorAnimation To="LightBlue" Duration="0:0:2"/>    
  21.                                         <ColorAnimation To="Salmon" Duration="0:0:3"/>    
  22.                                         <ColorAnimation To="White" Duration="0:0:4"/>    
  23.                                         <ColorAnimation To="Salmon" Duration="0:0:5"/>    
  24.                                         <ColorAnimation To="LightBlue" Duration="0:0:6"/>    
  25.                                         <ColorAnimation To="Coral" Duration="0:0:7"/>    
  26.                                         <ColorAnimation To="Gray" Duration="0:0:8"/>    
  27.                                     </Storyboard>    
  28.                                 </BeginStoryboard>    
  29.                                 <BeginStoryboard>    
  30.                                     <Storyboard Storyboard.TargetProperty="Width" Duration="0:0:8">    
  31.                                         <DoubleAnimationUsingKeyFrames>    
  32.                                             <LinearDoubleKeyFrame Value="150" KeyTime="0:0:0"/>    
  33.                                             <LinearDoubleKeyFrame Value="200" KeyTime="0:0:1"/>    
  34.                                             <LinearDoubleKeyFrame Value="250" KeyTime="0:0:2"/>    
  35.                                             <LinearDoubleKeyFrame Value="300" KeyTime="0:0:3"/>    
  36.                                             <LinearDoubleKeyFrame Value="350" KeyTime="0:0:4"/>    
  37.                                             <LinearDoubleKeyFrame Value="300" KeyTime="0:0:5"/>    
  38.                                             <LinearDoubleKeyFrame Value="250" KeyTime="0:0:6"/>    
  39.                                             <LinearDoubleKeyFrame Value="200" KeyTime="0:0:7"/>    
  40.                                             <LinearDoubleKeyFrame Value="150" KeyTime="0:0:8"/>    
  41.                                         </DoubleAnimationUsingKeyFrames>    
  42.                                     </Storyboard>    
  43.                                 </BeginStoryboard>    
  44.                                 <BeginStoryboard>    
  45.                                     <Storyboard Storyboard.TargetProperty="Height" Duration="0:0:8">    
  46.                                     <DoubleAnimationUsingKeyFrames>    
  47.                                         <LinearDoubleKeyFrame Value="20" KeyTime="0:0:0"/>    
  48.                                         <LinearDoubleKeyFrame Value="100" KeyTime="0:0:1"/>    
  49.                                         <LinearDoubleKeyFrame Value="250" KeyTime="0:0:2"/>    
  50.                                         <LinearDoubleKeyFrame Value="300" KeyTime="0:0:3"/>    
  51.                                         <LinearDoubleKeyFrame Value="350" KeyTime="0:0:4"/>    
  52.                                         <LinearDoubleKeyFrame Value="300" KeyTime="0:0:5"/>    
  53.                                         <LinearDoubleKeyFrame Value="250" KeyTime="0:0:6"/>    
  54.                                         <LinearDoubleKeyFrame Value="100" KeyTime="0:0:7"/>    
  55.                                         <LinearDoubleKeyFrame Value="20" KeyTime="0:0:8"/>    
  56.                                     </DoubleAnimationUsingKeyFrames>    
  57.                                 </Storyboard>    
  58.                                 </BeginStoryboard>    
  59.                             </DataTrigger.EnterActions>    
  60.                         </DataTrigger>    
  61.                     </Style.Triggers>    
  62.             </Style>    
  63.             </Button.Style>    
  64.         </Button>    
Let's put this button inside a grid. Notice grid has animation for background color.
  1. <Window x:Class="A.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  4.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.         mc:Ignorable="d"    
  7.         Title="MainWindow" Height="500" Width="500">    
  8.     <Window.Resources>    
  9.         <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>    
  10.     </Window.Resources>    
  11.     <Grid>    
  12.         <Button x:Name="ClickMe"    
  13.                 Content="Start The Animation"    
  14.                 Height="20"    
  15.                 Width="120"    
  16.                 VerticalAlignment="Center"    
  17.                 HorizontalAlignment="Center"    
  18.                 Background="Transparent"    
  19.                 BorderBrush="salmon"    
  20.                 Margin="-10 110 0 0"    
  21.                 Command="{Binding AminationButtonClicked}">    
  22.           <!-- Above code here -->  
  23.         </Button>    
  24.         <Grid.Style>    
  25.             <Style TargetType="Grid">    
  26.                 <Setter Property="Background" Value="White"/>    
  27.                 <Style.Triggers>    
  28.                     <DataTrigger Binding="{Binding IsButtonClicked}" Value="True">    
  29.                         <DataTrigger.EnterActions>    
  30.                             <BeginStoryboard>    
  31.                                 <Storyboard Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" Duration="0:0:8">    
  32.                                     <ColorAnimation To="#00897b" Duration="0:0:0"/>    
  33.                                     <ColorAnimation To="#363636" Duration="0:0:1"/>    
  34.                                     <ColorAnimation To="#969696" Duration="0:0:2"/>    
  35.                                     <ColorAnimation To="mistyrose" Duration="0:0:3"/>    
  36.                                     <ColorAnimation To="White" Duration="0:0:4"/>    
  37.                                     <ColorAnimation To="lightpink" Duration="0:0:5"/>    
  38.                                     <ColorAnimation To="#969696" Duration="0:0:6"/>    
  39.                                     <ColorAnimation To="#363636" Duration="0:0:7"/>    
  40.                                     <ColorAnimation To="#00897b" Duration="0:0:8"/>    
  41.                                 </Storyboard>    
  42.                             </BeginStoryboard>    
  43.                         </DataTrigger.EnterActions>    
  44.                     </DataTrigger>    
  45.                 </Style.Triggers>    
  46.             </Style>    
  47.         </Grid.Style>    
  48.     </Grid>    
  49. </Window>    
Let's add that heart shape. 
  1. <Path Stroke="Red" StrokeThickness="3"    
  2.         Data="M 241,200     
  3.               A 20,20 0 0 0 200,240    
  4.               C 210,250 240,270 240,270    
  5.               C 240,270 260,260 280,240    
  6.               A 20,20 0 0 0 239,200"    
  7.               Visibility="{Binding IsButtonClicked, Converter={StaticResource BooleanToVisibilityConverter}}">    
  8.             <Path.Style>    
  9.                 <Style TargetType="Path">    
  10.                     <Setter Property="Fill" Value="Black"/>    
  11.                     <Style.Triggers>    
  12.                         <DataTrigger Binding="{Binding IsButtonClicked}" Value="True">    
  13.                             <DataTrigger.EnterActions>    
  14.                                 <BeginStoryboard>    
  15.                                     <Storyboard Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)" Duration="0:0:8">    
  16.                                         <ColorAnimation To="Red" Duration="0:0:0"/>    
  17.                                         <ColorAnimation To="#161d20" Duration="0:0:1"/>    
  18.                                         <ColorAnimation To="#36498f" Duration="0:0:2"/>    
  19.                                         <ColorAnimation To="LightPink" Duration="0:0:3"/>    
  20.                                         <ColorAnimation To="Pink" Duration="0:0:4"/>    
  21.                                         <ColorAnimation To="LightPink" Duration="0:0:5"/>    
  22.                                         <ColorAnimation To="#36498f" Duration="0:0:6"/>    
  23.                                         <ColorAnimation To="#161d20" Duration="0:0:7"/>    
  24.                                         <ColorAnimation To="Red" Duration="0:0:8"/>    
  25.                                     </Storyboard>    
  26.                                 </BeginStoryboard>    
  27.                             </DataTrigger.EnterActions>    
  28.                         </DataTrigger>    
  29.                     </Style.Triggers>    
  30.                 </Style>    
  31.             </Path.Style>    
  32.         </Path>   
Let's see our entire MainWindow.xaml
  1. <Window x:Class="WPFAPP.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  4.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.         mc:Ignorable="d"    
  7.         Title="MainWindow" Height="500" Width="500">    
  8.     <Window.Resources>    
  9.         <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>    
  10.     </Window.Resources>    
  11.     <Grid>    
  12.         <Button x:Name="ClickMe"    
  13.                 Content="Start The Animation"    
  14.                 Height="20"    
  15.                 Width="120"    
  16.                 VerticalAlignment="Center"    
  17.                 HorizontalAlignment="Center"    
  18.                 Background="Transparent"    
  19.                 BorderBrush="salmon"    
  20.                 Margin="-10 110 0 0"    
  21.                 Command="{Binding AminationButtonClicked}">    
  22.             <Button.Style>    
  23.                 <Style TargetType="Button"    >    
  24.                 <Style.Triggers>    
  25.                         <DataTrigger Binding="{Binding IsButtonClicked}" Value="True">    
  26.                             <DataTrigger.EnterActions>    
  27.                                 <BeginStoryboard>    
  28.                                     <Storyboard Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" Duration="0:0:8">    
  29.                                         <ColorAnimation To="Gray" Duration="0:0:0"/>    
  30.                                         <ColorAnimation To="Coral" Duration="0:0:1"/>    
  31.                                         <ColorAnimation To="LightBlue" Duration="0:0:2"/>    
  32.                                         <ColorAnimation To="Salmon" Duration="0:0:3"/>    
  33.                                         <ColorAnimation To="White" Duration="0:0:4"/>    
  34.                                         <ColorAnimation To="Salmon" Duration="0:0:5"/>    
  35.                                         <ColorAnimation To="LightBlue" Duration="0:0:6"/>    
  36.                                         <ColorAnimation To="Coral" Duration="0:0:7"/>    
  37.                                         <ColorAnimation To="Gray" Duration="0:0:8"/>    
  38.                                     </Storyboard>    
  39.                                 </BeginStoryboard>    
  40.                                 <BeginStoryboard>    
  41.                                     <Storyboard Storyboard.TargetProperty="Width" Duration="0:0:8">    
  42.                                         <DoubleAnimationUsingKeyFrames>    
  43.                                             <LinearDoubleKeyFrame Value="150" KeyTime="0:0:0"/>    
  44.                                             <LinearDoubleKeyFrame Value="200" KeyTime="0:0:1"/>    
  45.                                             <LinearDoubleKeyFrame Value="250" KeyTime="0:0:2"/>    
  46.                                             <LinearDoubleKeyFrame Value="300" KeyTime="0:0:3"/>    
  47.                                             <LinearDoubleKeyFrame Value="350" KeyTime="0:0:4"/>    
  48.                                             <LinearDoubleKeyFrame Value="300" KeyTime="0:0:5"/>    
  49.                                             <LinearDoubleKeyFrame Value="250" KeyTime="0:0:6"/>    
  50.                                             <LinearDoubleKeyFrame Value="200" KeyTime="0:0:7"/>    
  51.                                             <LinearDoubleKeyFrame Value="150" KeyTime="0:0:8"/>    
  52.                                         </DoubleAnimationUsingKeyFrames>    
  53.                                     </Storyboard>    
  54.                                 </BeginStoryboard>    
  55.                                 <BeginStoryboard>    
  56.                                     <Storyboard Storyboard.TargetProperty="Height" Duration="0:0:8">    
  57.                                     <DoubleAnimationUsingKeyFrames>    
  58.                                         <LinearDoubleKeyFrame Value="20" KeyTime="0:0:0"/>    
  59.                                         <LinearDoubleKeyFrame Value="100" KeyTime="0:0:1"/>    
  60.                                         <LinearDoubleKeyFrame Value="250" KeyTime="0:0:2"/>    
  61.                                         <LinearDoubleKeyFrame Value="300" KeyTime="0:0:3"/>    
  62.                                         <LinearDoubleKeyFrame Value="350" KeyTime="0:0:4"/>    
  63.                                         <LinearDoubleKeyFrame Value="300" KeyTime="0:0:5"/>    
  64.                                         <LinearDoubleKeyFrame Value="250" KeyTime="0:0:6"/>    
  65.                                         <LinearDoubleKeyFrame Value="100" KeyTime="0:0:7"/>    
  66.                                         <LinearDoubleKeyFrame Value="20" KeyTime="0:0:8"/>    
  67.                                     </DoubleAnimationUsingKeyFrames>    
  68.                                 </Storyboard>    
  69.                                 </BeginStoryboard>    
  70.                             </DataTrigger.EnterActions>    
  71.                         </DataTrigger>    
  72.                     </Style.Triggers>    
  73.             </Style>    
  74.             </Button.Style>    
  75.         </Button>    
  76.         <Path Stroke="Red" StrokeThickness="3"    
  77.         Data="M 241,200     
  78.               A 20,20 0 0 0 200,240    
  79.               C 210,250 240,270 240,270    
  80.               C 240,270 260,260 280,240    
  81.               A 20,20 0 0 0 239,200"    
  82.               Visibility="{Binding IsButtonClicked, Converter={StaticResource BooleanToVisibilityConverter}}">    
  83.             <Path.Style>    
  84.                 <Style TargetType="Path">    
  85.                     <Setter Property="Fill" Value="Black"/>    
  86.                     <Style.Triggers>    
  87.                         <DataTrigger Binding="{Binding IsButtonClicked}" Value="True">    
  88.                             <DataTrigger.EnterActions>    
  89.                                 <BeginStoryboard>    
  90.                                     <Storyboard Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)" Duration="0:0:8">    
  91.                                         <ColorAnimation To="Red" Duration="0:0:0"/>    
  92.                                         <ColorAnimation To="#161d20" Duration="0:0:1"/>    
  93.                                         <ColorAnimation To="#36498f" Duration="0:0:2"/>    
  94.                                         <ColorAnimation To="LightPink" Duration="0:0:3"/>    
  95.                                         <ColorAnimation To="Pink" Duration="0:0:4"/>    
  96.                                         <ColorAnimation To="LightPink" Duration="0:0:5"/>    
  97.                                         <ColorAnimation To="#36498f" Duration="0:0:6"/>    
  98.                                         <ColorAnimation To="#161d20" Duration="0:0:7"/>    
  99.                                         <ColorAnimation To="Red" Duration="0:0:8"/>    
  100.                                     </Storyboard>    
  101.                                 </BeginStoryboard>    
  102.                             </DataTrigger.EnterActions>    
  103.                         </DataTrigger>    
  104.                     </Style.Triggers>    
  105.                 </Style>    
  106.             </Path.Style>    
  107.         </Path>    
  108.         <Grid.Style>    
  109.             <Style TargetType="Grid">    
  110.                 <Setter Property="Background" Value="White"/>    
  111.                 <Style.Triggers>    
  112.                     <DataTrigger Binding="{Binding IsButtonClicked}" Value="True">    
  113.                         <DataTrigger.EnterActions>    
  114.                             <BeginStoryboard>    
  115.                                 <Storyboard Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" Duration="0:0:8">    
  116.                                     <ColorAnimation To="#00897b" Duration="0:0:0"/>    
  117.                                     <ColorAnimation To="#363636" Duration="0:0:1"/>    
  118.                                     <ColorAnimation To="#969696" Duration="0:0:2"/>    
  119.                                     <ColorAnimation To="mistyrose" Duration="0:0:3"/>    
  120.                                     <ColorAnimation To="White" Duration="0:0:4"/>    
  121.                                     <ColorAnimation To="lightpink" Duration="0:0:5"/>    
  122.                                     <ColorAnimation To="#969696" Duration="0:0:6"/>    
  123.                                     <ColorAnimation To="#363636" Duration="0:0:7"/>    
  124.                                     <ColorAnimation To="#00897b" Duration="0:0:8"/>    
  125.                                 </Storyboard>    
  126.                             </BeginStoryboard>    
  127.                         </DataTrigger.EnterActions>    
  128.                     </DataTrigger>    
  129.                 </Style.Triggers>    
  130.             </Style>    
  131.         </Grid.Style>    
  132.     </Grid>    
  133. </Window>    
We need to bind command AminationButtonClicked and bool property to IsButtonClicked.
 
Let's see how MainWindowViewModel would look:
  1. using A.Entities;    
  2. using Prism.Commands;    
  3. using Prism.Mvvm;    
  4. using System;    
  5. using System.Collections.Generic;    
  6. using System.Linq;    
  7. using System.Text;    
  8. using System.Threading;    
  9. using System.Threading.Tasks;    
  10.     
  11. namespace WPFAPP  
  12. {    
  13.     class MainWindowViewModel : BindableBase    
  14.     {    
  15.         #region Properties    
  16.         private bool _isButtonClicked;    
  17.     
  18.         public bool IsButtonClicked    
  19.         {    
  20.             get { return _isButtonClicked; }    
  21.             set { SetProperty(ref _isButtonClicked , value); }    
  22.         }    
  23.     
  24.         public DelegateCommand<object> AminationButtonClicked { get; set; }    
  25.         #endregion    
  26.   
  27.         #region Constructor    
  28.         public MainWindowViewModel()    
  29.         {    
  30.             AminationButtonClicked = new DelegateCommand<object>(SetButtonClicked);    
  31.         }    
  32.         #endregion    
  33.     
  34.         private void SetButtonClicked(object obj)    
  35.         {    
  36.             IsButtonClicked = true;    
  37.         }    
  38.     }    
  39. }    
Perfect, you are all set.
 
Now, this is just to give you an idea of how you can develop basic animation in WPF.
 
You can, of course, do a lot with animation in WPF.
 
Take full advantage of this feature. Feel free to connect @
Thank you.  And as always, happy coding!
 


Similar Articles