In my last post I announced the new Codeplex project I’ve started called the Windows Phone Silverlight toolkit behavior extensions. In this post I’ll explain how to use the behaviors in this project in Expression Blend to create beautiful page transitions supplied by the Silverlight Toolkit for windows Phone without writing any code or XAML!

how to get started

Download the silverlight toolkit for windows phone and the Windows Phone Silverlight toolkit behavior extensions and install both libraries on your system.

After the installation start Expression Blend and create a new Windows Phone 7 Project.

In the projects window right click “References” and select “Add Reference”

Select the Microsoft.Phone.Controls.Toolkit.dll file and press “Open”

Select the PhoneToolkit.Extensions.Behaviors.dll and press “Open”

You should now have Microsoft.Phone.Controls.Toolkit.dll and PhoneToolkit.Extensions.Behaviors.dll in your References list.

Before the transition behaviors work you will have to change 1 thing in the code because that is just how the Silverlight Toolkit Transitions work. so open App.xaml.cs and locate the following Class: “PhoneApplicationFrame”

And Change it to “TransitionFrame”

Build the project and after building the new behaviors will be added to the Assets window.

You can drag and drop the new behaviors on your PhoneApplicationPage to enable the tilt effect or enable a page transition. In the Example below I’ve added the EnableTiltEffectBehavior to enable the tilting effect on every clickable usercontrol and I’ve added a TransitionTurnstileInBehavior to show a turnstile animation on entering the page and a TransitionTurnstileOutBehavior to show a turnstile animation on leaving the page.

The transition behaviors have 2 properties where you can set the animation for forward and backward transitions. by default the most common animations are selected.

To test if everything is working drag a button on the content grid and add a second page to your application. The button should now have a tilt effect and you should have turnstile animations when navigating between the pages.

If you want to disable the tilt effect for a specific usercontrol you can add the SuppressTiltEffectBehavior on that control and the control will no longer have a tilt effect.

I’ve added a complete sample application showing all the transitions and tilt effect behaviors on the codeplex site of the Windows Phone Toolkit Behavior Extensions

If anything isn’t working contact me on twitter or post a comment

Geert van der Cruijsen