You made use of several base controls that ship with
the Windows Phone 7 development tools, including text boxes, textblocks,
and buttons, the kinds of controls you'd expect with any UI framework.
But the Windows Phone developer tools include a number of unique
controls as well, including a web browser and a Bing maps control, both
of which we'll present in later chapters. Two others are the Panorama and Pivot controls, which are integral to Metro and the Windows Phone user experience.
The Panorama and Pivot controls offer two ways to develop an application that requires page navigation. With a Panorama
control, you can present the UI of an application on one horizontal
canvas that extends beyond the left and right boundaries of the device
screen and can be flicked to the left and right with touch gestures.
With a Pivot, you can present the UI of an
application as a series of pages—much like tabbed pages—by touching its
header or flicking through the pages. A Panorama is like a scroll; a Pivot is more like a series of cards laid down from left to right.
In the following section, you'll learn how to use a Panorama
control to create some engaging UI for an airport application that
displays arrivals and departures. You'll also take a brief look at the Pivot control, whose outfitting and use is nearly identical to the Panorama control, though its effects are quite different.
1. Using the Panorama Control
In every video ad for a Windows Phone 7 device, the scrollable UI of the Panorama
control is usually the first thing that people notice. The People hub
on the Start screen of Windows Phone 7 is implemented using this
control. These interactions essentially involve the ability to keep
scrolling horizontally far past the end of the screen. The Panorama control allows for a unique experience that is associated with the native Windows Phone 7 look and feel.
A Panorama control is essentially a long, horizontal canvas. A secondary control called a PanoramaItem serves as a container that hosts other content and controls such as TextBlocks, Buttons, and Links. There are three ways to incorporate Panorama behavior into your application:
Create
a new Windows Phone project and choose Windows Phone Panorama
Application as the template to use for the application. While this is an
extremely powerful approach, this type of template creates a
Model-View-ViewModel (MVVM)–based project.
Add the Panorama
control to the Visual Studio Toolbox (via right-clicking the Toolbox
and navigating to the assembly containing this control) and then drag
and drop it to your application.
Add a new page to your application that contains a Panorama control. This is perhaps the easiest way to quickly incorporate the Panorama control inside our application; this is the approach we will pursue in our walkthrough for this section.
In the following walkthrough,
you will create an application to display the arrival and departures of
flights at a fictional airport. In addition, you will add a search
capability (or just the user interface elements of it) to this
application. You will use the Panorama
control to implement this functionality where the long background gives
you the feeling that you are inside the airport as you navigate left or
right to the pages.
Your application will not contain any code, since your primary goal in this chapter is to explore the Windows Phone 7 Panorama control. You will use Option 3 from the list in the previous section, and use XAML to build a new page with a Panorama control:
Launch
Visual Studio 2010 Express and select the Windows Phone Application
template. Change the Project Name to "Panorama," select OK, and Visual
Studio will set up a new project.
Right-click the project name in Solution Explorer and select Add => New Item => Windows Phone Panorama Page. Accept the default name of PanoramaPage1.xaml for the file, and press the OK button.
You now have a page with the Panorama control in it within the application, but there is no way to get to it. You could either add navigation from MainPage.xaml, or simply make PanoramaPage1.xaml the main page within the application. To implement the second choice, rename the current MainPage.xaml to MainPage1.xaml and then rename PanoramaPage1.xaml to MainPage.xaml. Now the Panorama page should be the default page that comes up when the application is launched.
It is time to customize and add content to the Panorama control. Go ahead and change the <controls:Panorama... element to the following.
<controls:Panorama Title="airport" Foreground="Red">
To add new "tabs" or containers to the Panorama control, you would use the <controls:PanoramaItem... XAML element. Go ahead and add a third PanoramaItem that will contain a text box and a button to search for departures to a specific city right above the closing tag for the Panorama control </controls:Panorama>. Notice that as you add PanoramaItem, your designed view reflects the changes.
<!--Panorama item three-->
<controls:PanoramaItem Header="search" Foreground="{StaticResource
PhoneAccentBrush}">
<Grid>
<TextBox Height="72" HorizontalAlignment="Left" Margin="-12,-2,0,0"
Name="textBox1" Text="TextBox" VerticalAlignment="Top" Width="271" />
<Button Content="Search" Height="72" HorizontalAlignment="Left"
Margin="242,-4,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
</Grid>
</controls:PanoramaItem>
NOTE
Notice the use of Foreground="{StaticResource PhoneAccentBrush}" binding. It allows the foreground color of the text to be the current theme's accent color.
Make some minor adjustments to the first two Panorama items to bring them in line with the rest of the UI layout. Replace the top two <controls:PanoramaItem... elements with the following XAML:
<!--Panorama item one-->
<controls:PanoramaItem Header="arrivals" Foreground="{StaticResource
PhoneAccentBrush}">
<Grid>
</Grid>
</controls:PanoramaItem>
<!--Panorama item two-->
<controls:PanoramaItem Header="departures" Foreground="{StaticResource
PhoneAccentBrush}">
<Grid/>
</controls:PanoramaItem>
Finally, add a background image to the Panorama
control. The recommended size for the background image is 800 pixels
high (of course, that's the standard resolution of Windows Phone 7
devices) and 2,000 or fewer pixels wide. To specify the background
image, add the following XAML tag right below the <controls:Panorama ... tag:
<controls:Panorama.Background>
<ImageBrush ImageSource="PanoramaBackground.jpg"></ImageBrush>
</controls:Panorama.Background>
Press F5 to run the application. You should see a screen that looks very similar to Figure 1 (minus the background image, perhaps). Flicking the Panorama
control from right to left should allow you to see Arrivals and
Departures plus a separate tab designated for searching airport
schedules.
As you can see, it is pretty easy to use a Panorama control, and you can place different contents within the PanoramaItem tag. Using the Panorama control, together with the Pivot
control that we will discuss next, provides a very easy way to impress
your users with cool designs, layouts, and coding techniques.
Considering you didn't have to hire a graphics designer to get there,
that is a very powerful weapon in the Windows Phone 7 developer arsenal.
In the next section, we will take a look at another powerful
control—the Pivot control for Windows Phone 7.
NOTE
Microsoft recommends limiting the number of PanoramaItems to a maximum of four to ensure smooth application performance. In addition, it is considered best practice to hide PanoramaItem until it has content to display.
2. Using the Pivot Control
The Pivot control is a close cousin of the Panorama
control: the basic premise of having multiple pages easily accessible
is preserved; however, the ability to click the header to show the
contents of a new page is not possible with a Panorama control. There, a user could tap (or click in the emulator) the word
"departures" and be immediately presented with the portion of the
application dealing with airport departures.
