Animated transitions between pages in WPF/Silverlight without any code

First of all, let me just start by saying this: if you are doing
WPF/Silverlight and are not using Expression Blend, go to this
page
and download it right away – you won’t regret it. I don’t know how I
would be able to create UI without it, especially when it comes to
animations and templates. Today I want to show you how easy it is to
create animated transitions when you navigate between pages in Frame
control. And, as title suggest, you won’t have to write a single line of
code to do it.

Let’s start by inserting a frame and creating a new storyboard called
FadeOut.

Storyboard recording will start right away. Now move to the 0.5 seconds
of the storyboard (the yellow marker) and set the opacity of the frame
to 0. This means that this storyboard will make the frame change its
opacity from 100% to 0 in 0.5 seconds.

Let’s also add an easing function to make it fade away quicker.

Next, create another storyboard. I called this one FadeIn. I set the
opacity to 0 and transform X axis by -40 at the beginning of the
storyboard. Then at 0.5 I transform X axis back to 0 and at 1 second I
set opacity to 100%. This will create an effect that will slide the
frame in and fade in at the same time. Feel free to customize the
animations as you want.