Windows Phone 7 : Working with Controls and Themes - Panorama and Pivot Controls

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:

1. 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.

2. 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.

3. 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:

1. 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.

2. 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.

3. 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.

4. 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">

   
   

5. 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.

6. 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>
   
   					  

   
   

7. 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.

Figure 1. Panorama control example

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.