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.
Set easing on both opacity and transform to make it look nice.
We’re done creating storyboards, now it’s time to wire them up. Go to Assets tab, select behaviors and drag & drop two ControlStoryboardAction behaviors onto the frame.
Set the first to react to event Navigating and play storyboard FadeOut and the second to react to event Navigated and play storyboard FadeIn.
And you’re done! If you’re not using blend, I hope I convinced you to give it a try. It’s one of a few (if not the only one) designer tools I actually enjoy using.