Not only you can animate your element by changing its
attributes, but you can animate it with different types of transforms in
several directions. You can use a Storyboard and one type of animation to
change the RenderTransform of an element on runtime.
Listing 5 shows an example of this. It changed the Angle
attribute of a RotateTransform which belongs to the Button on runtime from 0 to
90 degrees. Take a look at some frames of the results in Figure 13, Figure 14
and Figure 15.
Listing 5
<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="(RenderTransform).(RotateTransform.Angle)">
<DoubleAnimation From="0"
To="90"
Duration="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
<Button Name="btnSend"
Width="100"
Height="40"
Margin="40"
Background="Plum">
<Button.RenderTransform>
<RotateTransform Angle="0" CenterX="40" CenterY="40" />
</Button.RenderTransform>
ASP Alliance
</Button>
</StackPanel>
</Window>
Figure 13
Figure 14
Figure 15
