WP7: How To Create Beautiful Page Transition In 5 Minutes

Standard

If you ever wanted to create transition animations like the native hubs in Windows Phone 7, then there are 2 really simple ways to do so:

Using the Sliverlight for Windows Phone 7 Toolkit

  • First, of course you need to download the toolkit.
  • Add the reference Microsoft.Phone.Controls.Toolkit to your project.
  • Then you need to modify your App.xaml.cs file. Find the line where it sets the RootVisual to:
    RootFrame = new Microsoft.Phone.Controls.TransitionFrame();
    
  • Now you can add the transition in the page you want by adding the following code in your page XAML:
    1. Add the XML name space for toolkit in your page first if it is not already presented:
      xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
      
    2. Add the following XAML right under your page element
      <toolkit:TransitionService.NavigationInTransition>
          <toolkit:NavigationInTransition>
              <toolkit:NavigationInTransition.Backward>
                  <toolkit:TurnstileTransition Mode="BackwardIn"/>
              </toolkit:NavigationInTransition.Backward>
              <toolkit:NavigationInTransition.Forward>
                  <toolkit:TurnstileTransition Mode="ForwardIn"/>
              </toolkit:NavigationInTransition.Forward>
          </toolkit:NavigationInTransition>
      </toolkit:TransitionService.NavigationInTransition>
      <toolkit:TransitionService.NavigationOutTransition>
          <toolkit:NavigationOutTransition>
              <toolkit:NavigationOutTransition.Backward>
                  <toolkit:TurnstileTransition Mode="BackwardOut"/>
              </toolkit:NavigationOutTransition.Backward>
              <toolkit:NavigationOutTransition.Forward>
                  <toolkit:TurnstileTransition Mode="ForwardOut"/>
              </toolkit:NavigationOutTransition.Forward>
          </toolkit:NavigationOutTransition>
      </toolkit:TransitionService.NavigationOutTransition>
      

    Note that in the above example, the transition we are adding is the most common “Turnstile Transition”. There are also other transition available from the toolkit, they are: turnstile, slide, rotate, swivel, and roll.

Using the Telerik RAD Control for Windows Phone

Telerick’s solution is quite similar to the above but providing more transition options and less code required.

Note that by the time of writing, the control is still at beta stage. Therefore, it is unknown that if the behaviors would change in future releases.

  • First, get the control here and install it.
  • You need to add the reference Telerik.Windows.Controls.Primitives and Telerik.Windows.Core to your project, which is usually located at C:\Program Files\Telerik\RadControls for Windows Phone 7 [release time]\Binaries\WindowsPhone.
  • Similar to the toolkit example, modify your App.xaml.cs file:
    RootFrame = new Telerik.Windows.Controls.RadPhoneApplicationFrame();
    

    This is it! If you only need the turnstile transition like the native windows phone 7 hubs. The RadPhoneApplicationFrame has the turnstile transition by default. Alternatively, you can also set your desire transition in code:

    RadPhoneApplicationFrame frame = new RadPhoneApplicationFrame();
    frame.Transition = new RadTurnstileAndSlideTransition();
    RootFrame = frame;
    

Of course you can also manually specify different transition for each page. In the page you want to specify the transition, you simply put the following XAML code:

  1. Add the XML name space for telerik controls in your page first if it is not already presented:
    xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    
  2. Add the following XAML right under your page element:
    <telerikPrimitives:RadTransitionControl.Transition>
        <telerikPrimitives:RadTurnstileTransition/>
    </telerikPrimitives:RadTransitionControl.Transition>
    

Similar to the toolkit, Telerik has transitions other than turnstile. Look in the Object Browser of Visual Studio or play around with the installed demo to see more of them.

Style the transition for every page

An alternative way to apply transition to every page in your project, instead of copy-pasting some redundant code block, why not make them into a style in your application resource directory so that all pages can use them. Take the Toolkit solution as an example, in your App.xaml, simply add:

<Application.Resources>
    <Style x:Key="PageStyle" TargetType="phone:PhoneApplicationPage">
        <Setter Property="toolkit:TransitionService.NavigationInTransition">
            <Setter.Value>
                <toolkit:NavigationInTransition>
                    <toolkit:NavigationInTransition.Backward>
                        <toolkit:TurnstileTransition Mode="BackwardIn"/>
                    </toolkit:NavigationInTransition.Backward>
                    <toolkit:NavigationInTransition.Forward>
                        <toolkit:TurnstileTransition Mode="ForwardIn"/>
                    </toolkit:NavigationInTransition.Forward>
                </toolkit:NavigationInTransition>
            </Setter.Value>
        </Setter>
        <Setter Property="toolkit:TransitionService.NavigationOutTransition">
            <Setter.Value>
                <toolkit:NavigationOutTransition>
                    <toolkit:NavigationOutTransition.Backward>
                        <toolkit:TurnstileTransition Mode="BackwardOut"/>
                    </toolkit:NavigationOutTransition.Backward>
                    <toolkit:NavigationOutTransition.Forward>
                        <toolkit:TurnstileTransition Mode="ForwardOut"/>
                    </toolkit:NavigationOutTransition.Forward>
                </toolkit:NavigationOutTransition>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

Then in each page, you just need to use this style:

<phone:PhoneApplicationPage Style="{StaticResource PageStyle}" ... >

 

Update: With the Feb 2011 release of the Toolkit, its page transition animations are using better easing functions. Due to the fact that Telerik’s controls are still in beta stage, and there would probably be licensing costs when you need to use it commercially, I recommend the toolkit option.

Advertisements

7 thoughts on “WP7: How To Create Beautiful Page Transition In 5 Minutes

  1. alek

    Created a new phone app. followed the 3 steps.

    adding ‘RootFrame =new Microsoft.Phone.Controls.TransitionFrame();’ breaks it at

    InitializePhoneApplication();

    File or assembly name ‘Microsoft.Phone.Controls.Toolkit, Version=1.0.0.0, Culture=neutral, PublicKeyToken=B772AD94EB9CA604’, or one of its dependencies, was not found.

    lame, anybody have a clue?

  2. Hmm… almost seems like you haven’t got the Toolkit for WP7 installed properly.

    After the WP7 version of the Toolkit is installed, you should see the DLL file in the following path: C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\Microsoft.Phone.Controls.Toolkit.dll.

    And don’t forget to add the toolkit’s reference to your project.

    Some times, removing and re-adding the reference helps too.

  3. Thank you so much! I was beating my head against the keyboard trying to figure out how to use this toolkit for hours.

    They really need to do a better job with documentation and showing how to use this stuff.

    It’s real cool stuff, but frustrating for total newbies like me.

  4. Simba

    I am trying out that last one, and I get an where I apply the style to all pages, but I get an error in the App.xaml “The property ‘Value’ “. The error goes away when I remove the code for NavigationOutTransition. Any ideas?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s