The Windows Phone Panorama control makes creating a wrap-around list of items very quick and easy to accomplish. In this short blog post I will show you how to create a nice panorama of a collection of photos. You will be able to take a set of your photos, drop them into this project and try out this sample right away. In Figure 1 you can see the sample application that you will create. I named it “My Life in Panorama” and it simply shows a list of pictures from your life. In this picture I show me at the top of Kilimanjaro in 2004.

Figure 1: My Life in Panorama Sample

Create the Panorama Page

To start, open VS.NET 2010 and choose New Project. Click on the Silverlight for Windows Phone tab, then click on Windows Phone Application and set the name to WPPanoramaSample as shown in Figure 2. NOTE: For this particular sample, do NOT choose the “Windows Phone Panorama Application”. We just want to create a simple panorama page and not worry about all the data stuff.

Figure 2: Create a new Windows Phone Application

Once VS.NET has your new project created, click on MainPage.xaml and delete this page. Right mouse click on the project and select Add | Add New Item… from the context menu. Select Windows Phone Panorama Page from the item list and set the Name to MainPage.xaml (Figure 3).

Figure 3: Add a Panorama Page

Click the OK button and your new main page will be ready for you to start adding pictures to in the Panorama control.

Locate the XAML for the Panorama control within this page; it will look like the following.

<controls:Panorama Title="my application">
  <!--Panorama item one-->
  <controls:PanoramaItem Header="item1">
    <Grid />
  </controls:PanoramaItem>
  <!--Panorama item two-->
  <controls:PanoramaItem Header="item2">
    <Grid />
  </controls:PanoramaItem>
</controls:Panorama>

A Panorama control is located in the Microsoft.Phone.Controls.dll, so an assembly reference was added to your project. An xml namespace with an alias of “controls” was added to the MainPage.xaml. This is why there is a “controls:” prefix on the Panorama control you see in the XAML.

Each Panorama control allows you to create a title that will be displayed across all items that make up your Panorama page. Go ahead and modify the Title property to “My Life in Panorama”.

Add Pictures and PanoramaItem Controls

You are now ready to start adding your own pictures to your project and to the panorama. The Panorama control is made up of one or many PanoramaItem controls. Within the content for each of these PanoramaItem controls you may put any XAML you want. For our purposes here you will replace the <Grid /> control with an <Image> control.

First, you need to create an Images folder in this project. Then gather any amount of pictures from your life that wish to display and copy them into this \Images folder in the VS.NET project.

Now, you are ready to take each picture and create 1 PanoramaItem control for each picture. Modify the XAML in the MainPage.xaml to look like the following. Replace my image file names with your image file names and modify the Header of each PanoramaItem controls with appropriate headers. Keep the headers short so they are not chopped off. I find less than 12 characters works best for the Header attribute.

<controls:Panorama Title="My Life in Panorama">
  <controls:PanoramaItem Header="Me in 1963">
    <Image Source="Images/MeIn1963.jpg" />
  </controls:PanoramaItem>
  <controls:PanoramaItem Header="Me in 1967">
    <Image Source="Images/MeIn1967.jpg" />
  </controls:PanoramaItem>
  <controls:PanoramaItem Header="Me in 1971">
    <Image Source="Images/MeIn1971.jpg" />
  </controls:PanoramaItem>
</controls:Panorama>

After putting in your images go ahead and run your application and you will be able to pan through all your images both forward and backward. When you get to the beginning (or the end) you will see that the control simply continues around in a continuous loop.

Summary

A Panorama control is ideal for a mobile application when you don’t really care where the user starts or ends up while browsing the data. It is very simple to create a Panorama control and the various PanoramaItem controls that make this up. You could easily extend this control to read the list of images to display from an XML file, or from a WCF service. You could then create the PanoramaItem controls in C# or VB.NET and add them to the Panorama control on the fly at runtime.

Good Luck with your Coding,
Paul Sheriff

** SPECIAL OFFER FOR MY BLOG READERS **
We frequently offer a FREE gift for readers of my blog. Visit http://www.pdsa.com/Event/Blog for your FREE gift!