Bring Back Page Transitions to the Windows Phone List Application Template

Url: http://wilderminds.blob.core.windows.net/downloads/PhoneListWithTr…

The new Windows Phone 7 Tools dropped this week and since I am writing a book on the subject, I decided to upgrade immediately. The upgrade was pretty clean.  I could repeat a bunch of other bloggers with instructions for migrating your projects to the Beta, but go Google it with Bing™ if that’s what you need.

As I am writing a book on the subject, I am less dealing with migrating my applicaitons than seeing what has changed.  The first thing I did with the new tools was create a new Windows Phone List Application to see what was new in the way it worked.

For the uninitiated, the Windows Phone List Application is a simple model-driven application that shows a data-bound list of items on a first page and handles navigating to a second page for the details of the individual items. In the CTP version of the template switching pages would cause a page-flip animation to happen that was quite cool to see. The problem was that in the CTP the code that they included in the template was nasty. It was all done at the page level and I am glad to see they removed it.  But to my dismay they didn’t replace it with anything.

Since I am in the business of doing demos (as evidenced by the upcoming Silverlight for the Windows Phone classes in Atlanta and Seattle), I wanted something sexier to show aspiring students.  At the same time I wanted to do it in a better way than the old template code did it.

The way that the page-based applications on the Windows Phone work is with a PhoneApplicationFrame class that hosts the application (deriving from the Navigation Framework’s Frame class) and each page is an instance of the PhoneApplicationPage class. In the old template, all the transitions were done at the page level. I wanted something better. It seemed to me that if we could hide the transitions in the frame, it would be mostly transparent.  I could have derived from PhoneApplicationFrame do add the transitions, but I thought it was be nicer to use the Silverlight ecosystem to do it right.

To accomplish it, I used styling (at Jeff Wilcox’s suggestion) to do the transitions. In the Silverlight Toolkit (remember to use the November 2009 toolkit that is compatible with Silverlight 3), there is a control called the TransitioningContentControl. This control can be used as a traditional content control but allows you to specify the kind of transition that takes place. By overriding the ControlTemplate for the PhoneApplicationFrame, I was able to replace the ContentControl with a TransitioningContentControl:

<Style x:Key="mainFrameStyle"
        TargetType="phone:PhoneApplicationFrame">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="phone:PhoneApplicationFrame">
        <Border x:Name="ClientArea"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Background="{TemplateBinding Background}"
                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                VerticalAlignment="{TemplateBinding VerticalAlignment}">
          <layout:TransitioningContentControl 
                  ContentTemplate="{TemplateBinding ContentTemplate}"
                  Content="{TemplateBinding Content}"
                  Margin="{TemplateBinding Padding}">
          </layout:TransitioningContentControl>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Since Silverlight 3 (which the Phone SDK is based on) does not support implicit styling, we have to apply the style manually. In the Windows Phone List Application project, the frame is created in the App.xaml implementation file (e.g. .cs or .vb file). Inside the InitializePhoneApplication method, I simply added the style to the construction of the frame like so:

// App.xaml.cs
private void InitializePhoneApplication()
{
  if (phoneApplicationInitialized)
    return;

  // Create the frame but don't set it as RootVisual yet; 
  // this allows the splash
  // screen to remain active until the 
  // application is ready to render.
  RootFrame = new PhoneApplicationFrame()
  {
    // Use a style to use the Template 
    // with the TransitioningContentControl
    Style = (Style)Resources["mainFrameStyle"]
  };
  RootFrame.Navigated += CompleteInitializePhoneApplication;

  // Handle navigation failures
  RootFrame.NavigationFailed += RootFrame_NavigationFailed;

  // Ensure we don't initialize again
  phoneApplicationInitialized = true;
}

At this point the transition control worked but the default fadein/fadeout transition was too subtle.  I wanted the page-turn transition.  To do this, I had to override the TransitioningContentControl’s template.  Since I was not going to re-use this template, I simply set it as the Template inline in the ControlTemplate for the PhoneApplicationFrame template like so:

<Style x:Key="mainFrameStyle"
        TargetType="phone:PhoneApplicationFrame">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="phone:PhoneApplicationFrame">
        <Border x:Name="ClientArea"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Background="{TemplateBinding Background}"
                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                VerticalAlignment="{TemplateBinding VerticalAlignment}">
          <layout:TransitioningContentControl 
                  ContentTemplate="{TemplateBinding ContentTemplate}"
                  Content="{TemplateBinding Content}"
                  Margin="{TemplateBinding Padding}">
            <layout:TransitioningContentControl.Template>
              <ControlTemplate 
                TargetType="layout:TransitioningContentControl">
                <!-- See example code for complete control template
                     ... -->
              </ControlTemplate>
            </layout:TransitioningContentControl.Template>
          </layout:TransitioningContentControl>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Go grab the code and improve on it.  I am sure its not perfect:

http://wilderminds.blob.core.windows.net/downloads/PhoneListWithTransitions.zip