Page Types in Windows Phone 7

In this blog post I discuss the default pages in the Windows Phone SDK

Last time we talked about what prototyping is and why it is a good idea to prototype an application.  You can read it here.  As promised, this time I shall talk about the different standard types of Windows Phone 7 applications.

There are three main kinds: basic, panorama, and pivot.  Basic pages are simple because they don't contain multiple containers, just one (by default, a grid).  Here's an example.

At the top is the ApplicationTitle, the name of your application.  Visual Studio won't fill it in for you in the XAML, so look for the following line from the template.

<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

All you need to change is the text in bold.  Below the App Title is the PageName, displayed in a much larger font, so the user knows where they are.  Use this like a page title on the web, a short description of what the page offers.  The rest of the page is whatever you need it to be, which is by default placed inside of a grid called ContentPanel.

The other two page types are more container objects than straight up pages.  They contain a collection of PanoramaItems and PivotItems respectably.  First we'll look at a Panorama page.

As you can see, the idea is that the page is one “panorama” image and the user swipes across it.  At the top is a title placeholder, big and stretched across the entire “image.”  Below that are the PanoramaItems, in this case I only placed 2.  These can be used to hold whatever you want, much like the ContentPanel of the basic page, you simply have more of them.

The Pivot page is very similar in concept, but different in aesthetics.

At the top is a title, usually used for the application title.  Below are the PivotItem containers.  Just like the PanoramaItem, these can be used to display whatever content you want.  The user still swipes between the different items, but unlike the panorama page, the user's view doesn't move, the content does.

This has been a brief look over the default kinds of pages in the Windows Phone 7 SDK.  I've attached a demo application showing all three kinds. It has been target for 7.1, so if you haven't installed the Mango update yet, do so now.  Next time, we'll look over navigating between these pages in our application.

~Dan