EvenTiles from Start to Finish–Part 3

In the second part of this series about how to develop a Windows Phone application from scratch we looked at the ApplicationBar and Page Navigation. Today we will introduce the Silverlight Toolkit for Windows Phone, show how to use it inside an application and add page transitions to the application. We will take off where we finished in Part 2.

The Silverlight Toolkit for Windows Phone is a separate assembly that you can install after downloading it. It installs in the same location where the Windows Phone SDK’s are installed, making it very easy to add a reference to it in order to use functionality that can be found in the toolkit.

imageAfter you have installed the toolkit, you can add a reference to it inside your application by right-clicking the references field your project and selecting the toolkit in the dialog box that appears. After adding the toolkit to the references, you will see it under references inside solution explorer. The first thing we are going to do is adding page transitions. If you look at the video, you will see that the pages of our application are currently simply appearing without any animations. However, page transitions inside many applications are similar to turning pages in a book. This is for instance the case with applications that are already installed on your Windows Phone. The Silverlight Toolkit contains functionality to make it very easy to incorporate similar page transitions inside your own applications. There are many different transitions to choose from, but we will use the same page turning transitions that you probably already know when you activate an application from the start screen.

To add page transitions inside your own application, it is important to change the PhoneApplicationFrame for your application into a TransitionFrame. The latter is defined in the Silverlight toolkit and allows for page transitions. The RootFrame is a container to hold all pages that you will create inside your application. You will have to search for the method InitializePhoneApplication inside the source file App.xaml.cs that Visual Studio created for you when you created the EvenTiles project. Inside this method, you can see that a new RootFrame is created of type PhoneApplicationFrame. You will have to change this into a TransitionFrame in order to get your page transitions working.

Using a TransitionFrame
  1. // Do not add any additional code to this method
  2. private void InitializePhoneApplication()
  3. {
  4.     if (phoneApplicationInitialized)
  5.         return;
  6.  
  7.     // Create the frame but don't set it as RootVisual yet; this allows the splash
  8.     // screen to remain active until the application is ready to render.
  9.     // RootFrame = new PhoneApplicationFrame();
  10.     RootFrame = new TransitionFrame();
  11.     RootFrame.Navigated += CompleteInitializePhoneApplication;
  12.  
  13.     // Handle navigation failures
  14.     RootFrame.NavigationFailed += RootFrame_NavigationFailed;
  15.  
  16.     // Ensure we don't initialize again
  17.     phoneApplicationInitialized = true;
  18. }

In order to get page transitions working, the next thing you have to do is add some XAML that defines the different page transitions to each page on which you want to make use of page transitions. Instead of adding individual pieces of XAML for each page, you can also create a new style that you use inside all pages that you want to make use of page transitions. That is the approach we are taking in this sample. First thing to do is add the following XAML to the App.xaml file:

PageTransition Style
  1. <!–Application Resources–>
  2. <Application.Resources>
  3.     <Style x:Key="DefaultPageWithTransitions"
  4.             TargetType="phone:PhoneApplicationPage">
  5.         <Setter Property="sltk:TransitionService.NavigationInTransition">
  6.             <Setter.Value>
  7.                 <sltk:NavigationInTransition>
  8.                     <sltk:NavigationInTransition.Backward>
  9.                         <sltk:TurnstileTransition Mode="BackwardIn" />
  10.                     </sltk:NavigationInTransition.Backward>
  11.                     <sltk:NavigationInTransition.Forward>
  12.                         <sltk:TurnstileTransition Mode="ForwardIn" />
  13.                     </sltk:NavigationInTransition.Forward>
  14.                 </sltk:NavigationInTransition>
  15.             </Setter.Value>
  16.         </Setter>
  17.         <Setter Property="sltk:TransitionService.NavigationOutTransition">
  18.             <Setter.Value>
  19.                 <sltk:NavigationOutTransition>
  20.                     <sltk:NavigationOutTransition.Backward>
  21.                         <sltk:TurnstileTransition Mode="BackwardOut" />
  22.                     </sltk:NavigationOutTransition.Backward>
  23.                     <sltk:NavigationOutTransition.Forward>
  24.                         <sltk:TurnstileTransition Mode="ForwardOut" />
  25.                     </sltk:NavigationOutTransition.Forward>
  26.                 </sltk:NavigationOutTransition>
  27.             </Setter.Value>
  28.         </Setter>
  29.     </Style>
  30. </Application.Resources>

Here we define different transitions that will run when you are navigating to and from pages inside the application. The transitions that you can see in the code snippet are all TurnStileTransitions which are commonly used for page transitions inside a Windows Phone application. The Silverlight Toolkit contains other transition types as well.

imageAfter having defined the transitions and after having changed the RootFrame to be able to host transitions, the only thing that is left to do is assigning newly created transition style to each individual page. This can for instance be done using Expression Blend. When you now would run the application, it will blend in perfectly with applications that came with your Windows Phone. Navigating from page to page inside our application is now identical to navigating inside for instance the different settings on the Windows Phone. Of course it is not necessary to make use of page transitions, but it does make your application look better and even more professional.

 

The Silverlight Toolkit for Windows Phone contains much more useful items, like a number of cool user interface elements. To see already one of them in action, we are adding it to the Settings Page. On the SettingsPage we later need a switch that can enable / disable reading of location data. Right now we are just going to enter a dummy switch and we are choosing a nice control from the Silverlight Toolkit, the ToggleSwitch. This control looks like a light switch and has (like a CheckBox) two different states, checked and unchecked. This control looks extremely good inside a Windows Phone application, as you can see in the following screenshot:

image

Inside Visual Studio 2010 Express Edition you can see the SettingsPage in designer mode. In it, you can also see a ToggleSwitch (in checked mode). The ToggleSwitch is added to the content grid, filling up as much space as it needs in the last row of the grid. How to layout UI controls inside a grid and in other container controls is something we will cover later in this series about Windows Phone Application Development.

In the following video you can see all the steps that are needed to add transitions to your Windows Phone Application and how to be able to use functionality from the Silverlight Toolkit inside your own application.

Using the Silverlight Toolkit to add Page Transitions to EvenTiles

LiveTiles will be extended soon. In the next episode we will create the SettingsPage UI and make sure that we can store data entered on the SettingsPage. Make sure to lookout for part four in this series about Windows Phone application development which will be published soon.

Advertisements
Both comments and trackbacks are currently closed.

Comments

  • Dave Erwin  On December 2, 2011 at 4:44 PM

    Thanks very much for doing this. I’m getting alot out of it, The small steps are great and only adding what’s needed to start is making everything clear without cluttering it up with MVVM setup etc. I like MVVM but it’s nice to see these steps without the overhead.

    • Maarten Struys  On December 2, 2011 at 5:59 PM

      It is a lot of fun making this series. Right now the idea is to finish the entire application, continuing the step-by-step approach, simply making use of code behind. Once the application is entirely finished, I will cover alternative solutions, including rebuilding the same application using MVVM (light).

  • johnvisiomvp  On December 2, 2011 at 7:37 PM

    Interesting article, but I am missing a reference to sltk: Can you post a sample?

    • Maarten Struys  On December 2, 2011 at 8:22 PM

      If you watch the video, running at 1.09 the reference to the Silverlight toolkit is added to the project. The namespace is imported in the app.xaml file around 2.28 in the video. The code snippets in the article are a subset. The video contains the entire solution each and every episode. Hope this helps.

      • johnvisiomvp  On December 2, 2011 at 8:31 PM

        The video fills in the gaps and shows a few extras. Definitely worth watching.

Trackbacks

%d bloggers like this: