Search

In this article I will show you two situations to use Blend 4’s built-in TransitionEffects:

- Navigating between pages in Navigation Framework and

- switching between Views in an MVVM (Light Toolkit) scenario.

Ever since wooly mammoths roamed the earth, you have had the ability to move between visual states. Not only could you move between states, you could do it in style by altering the duration and specifying an easing function.
Starting with Expression Blend 4, the awesomeness of moving between states has been kicked up a few notches with the introduction of transition effects.

Put simply, we would like to be able to have a default transition for all pages, and then provide a list of custom transitions that will be used on a page-by-page basis.  You can also watch a screencast  making these changes.  Source is linked at the end of the article.

1- import an image and place on the artboard
2- add a rectangle with a radial gradient the same width and height as the image
3- add a rectangle with no fill and grey color as the border
4- select all 3 objects, right click and group into a canvas
5- right click and select make into usercontrol
6- select button as the type of usercontrol you want to create
7- right click and select “edit template/edit current”

8- select the states panel and go to the “mouseover” state and set the gradient’s opacity property to “0″ and change the stroke color of the rectangle from grey to white

9- change the transition duration to 0.3 sec and set the transition to “cubic in”

By default, Windows Phone page transitions really aren’t transitions at all.  The new PhoneNavigationPage is just popped into the root PhoneNavigationFrame.  Effective, yes. Cool, certainly not.  Face it, modern mobile applications need to not only be functional, but also stylish.  Simple “snap” transitions just don’t cut it.