Introduction
In this earlier blog, I showed how to create a simple transition effect of moving an Image into view from left to right.   This time I’m going to tweak that example by adding some additional Images and daisy chaining animations.  

Adding a Second (Visible) Image
The first change I’m going to make is to place a second Image in the StackPanel.  This Image will be overlaid by the Egg Timer image when it animates.  Here is the markup for the StackPanel:

The key point to note is the use of the ZIndex property for the second image.  By pushing it back a level I ensure that when the Timer image moves from left to right it will appear in front of the Question Mark image.  Without this property setting, the Timer would be behind the Question Mark.   In the design pane, the layout looks like this:

The markup for the animation is unchanged from the earlier blog (I will post up all the markup for the Window at the end of this item).  When the application is run and the button clicked, the effect is as you would expect:

I really only included this example in order to show you an instance where you do need to change the ZIndex property of a control.

Adding a Third Image that Slides Right to Left
In the original blog item I made life easy for myself by having the hidden Image and the Rectangle at the far left side of a StackPanel.   The horizontal orientation of the panel meant that the Image automatically sat at the left edge.   I then positioned the Rectangle and the Button on top of the StackPanel by placing them in the main Grid and setting their HorizontalAlignment to Left.   This forced them to crowd into the left hand corner of the Grid, one on top of the other; both on top of the StackPanel and its first Image.    

If I want to move an Image from right to left though, it’s much more difficult to use exactly the same trick.   I could fiddle with Margins, but I might come unstuck if the user resizes the Window.    So my best approach is to place the Rectangle and Image inside the StackPanel, making them the next children in line, which will put them over at the right hand side.   A StackPanel, however, wants to stack everything and will place the Rectangle and Image side by side, not on top of each other.   So I  have to devise a way of overcoming the StackPanel’s behaviour.  

Thanks to the layout system of WPF this is very easy.  What I will do is add a Grid to the StackPanel’s children and place the Image and the Rectangle inside this Grid.   This will ensure that all the elements are in the correct place and also that the Image is once again hidden by a Rectangle.  Here is the markup for the extended StackPanel:

The new material start with the opening tag of the Grid shown in bold in the markup above.  The StackPanel has the Grid as its next child and the Grid has both the Image and Rectangle as its children.  In the absence of any other layout instructions, the Image is drawn on the Grid and then the Rectangle is drawn on top of that.

The animation is almost the same as the one used for the original image movement:

The only real difference being that the ‘By’ value is set to a negative number to make it move backwards.

In the EventTrigger, BeginStoryboard points to that TransformThirdImage Storyboard. 

As you can see from the screenshot below, this works as you would expect.

Daisy Chaining Animations
One way of running two or more animations consecutively is to set a BeginTime on the subsequent storyboards. 

This example allows 5 seconds to elapse before it begins.  The first four seconds will be taken up by the first image moving left to right, then I’ve allowed a 1 second pause before the UK Map image moves right to left.  

These kind of fairly simple animations can be hand coded in the XAML pane.  If your requirements become more complex than this then your best resource is to use Expression Blend to create the animations.  Unfortunately that requires another learning curve to get to grips with Blend, but overall will probably take less time than trying to build really complicated animations in the XAML pane by hand.  I’ll probably write some blog items on using Blend for animations in the future.

As promised, here is the full markup for the Window that contains these animated Images: