The last thing that you should know is about using Key
Frames. Suppose you want to declare an animation that moves from one frame to
another, but not by default increments. In this case you can declare all
frames for your animation using one of KeyFrame elements.
Listing 7 is an example that shows everything you need. It
changes the width of a Button on the basis of custom frames that are declared
using LinearDoubleKeyFrames which are declared in a
DoubleAnimationUsingKeyFrames.
Listing 7
<Window x:Class="AnimationsInXAML.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animations In XAML" Height="180" Width="300"
>
<StackPanel>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnSend"
Storyboard.TargetProperty="Width">
<DoubleAnimationUsingKeyFrames Duration="0:0:5">
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:1" />
<LinearDoubleKeyFrame Value="110" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="120" KeyTime="0:0:3" />
<LinearDoubleKeyFrame Value="130" KeyTime="0:0:4" />
<LinearDoubleKeyFrame Value="140" KeyTime="0:0:5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
<Button Name="btnSend"
Width="100"
Height="40"
Margin="40"
Background="Aquamarine">
ASP Alliance
</Button>
</StackPanel>
</Window>
Some frames of the results are shown in Figure 19, Figure 20
and Figure 21.
Figure 19
Figure 20
Figure 21
