Creating two animations that animate synchronously is as
simple as declaring those animations and grouping them into a ParallelTimeline
element.
Listing 6 and its results in Figure 16, Figure 17 and Figure
18 are an example for the ParallelTimeline element. The Angle of
RenderTransform of a Button is changing while its width is decreasing.
Listing 6
<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>
<ParallelTimeline>
<Storyboard Storyboard.TargetName="btnSend"
Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)">
<DoubleAnimation From="0"
To="90"
Duration="0:0:5"/>
</Storyboard>
<Storyboard Storyboard.TargetName="btnSend"
Storyboard.TargetProperty="Width">
<DoubleAnimation From="100"
To="70"
Duration="0:0:5"/>
</Storyboard>
</ParallelTimeline>
</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 16
Figure 17
Figure 18
