Tutorial: How to use the Silverlight Toolkit transitions without writing XAML by using the Toolkit behavior extensions

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”add reference

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

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

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

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”PhoneApplicationFrame

And Change it to “TransitionFrame”TransitionFrame

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

behavior

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.

objectsandtimeline

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.properties

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

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Comments are closed.