This post is Day #16 in a series called the 31 Days of Windows Phone.
Yesterday, we talked about Isolated Storage, and how we can persist data on the device for our applications. Today, I’m going to completely switch gears, and visit a relatively new (but awesomely powerful) control available to us: the Panorama control.
What is a Panorama Control?
If you’ve seen videos or screenshots of the “hubs” in Windows Phone 7, Panorama controls are used extensively there. In short, they are that multi-screen scrolling menu of options, navigation, and data. Here’s a couple of examples:
OK, now that we know what a Panorama control looks like, let’s talk about implementing one.
Creating a Panorama Project
For the first 15 days of this series, every project has been based on the default Windows Phone Application template. For a Panorama, you can use the Windows Phone Panorama Application, if you’d like. Here it is in the list:
The important thing to note, however, is that you don’t HAVE to use this template to have a Panorama. This project template leverages an MVVM framework for its data (a great approach, by the way), and predefines a bunch of stuff for you. Put simply, the Panorama control is just another control at our disposal, and we can add it to any page that we’d like. That’s what I’m going to show you in this article.
Adding a Panorama To Your Toolbox
The first thing to know about adding a Panorama to your page is that it’s not one of the default controls that is always available to you (which is why it doesn’t show up in your Toolbox in Visual Studio 2010). You have to specifically add its namespace to your page before you can use it. The easy way to do this is to add it to your Toolbox, and then re-use it from there.
The first thing you’re going to want to do is open your Toolbox, and right click on the “Windows Phone controls” tab. Select “Choose Items…” from the list.
In the dialog box that appears, it automatically loads with the Windows Phone Components tab open for you. You’ll see that several of the controls are already checked. Those are the ones currently in your Toolbox. Scroll down until you find the Panorama, and add it. (We’re covering the Pivot control tomorrow, so you may as well add that one now, too.)
Once you’ve added those to your Toolbox, you’ve got a very easy way to add a Panorama control to your pages.
Adding a Panorama To Your Page
We took those previous steps to make your life easier. Delete all of the XAML elements from your page, and then add your Panorama. By dragging a Panorama from your Toolbox, you’re all set. The default syntax looks like this:
<controls:Panorama />
Not much to start with, huh? You should also note, however, that a new XML namespace was also added to your page:
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
Now that we’ve got the absolute MINIMUM amount of code on our page, let’s make this Panorama control actually look and feel like one. Here’s an illustration of what the different pieces of the Panorama control look like:
Setting the Panorama Background and Title
One of the cool features of the Panorama control is the ability to have one large image in the background, that scrolls slower than the rest of the content. Find a cool, representative image to use for your application. Here’s mine (my application is for filling the time you have to wait for your food in a restaurant. This is the Corner Grill in Bowling Green, OH.):
To apply this as the background of my Panorama control, I just need to add the image to my project, and create an ImageBrush with the photo as the source. You’ll notice that I’ve also set the Opacity of the image to 50%. This is because white text won’t show up on this light image very well.
<controls:Panorama Title="waiter"> <controls:Panorama.Background> <ImageBrush ImageSource="PanoramaBackground.jpg" Opacity=".5" /> </controls:Panorama.Background> </controls:Panorama>
Here’s what it looks like on the phone:
OK, we’ve got a background image. Now let’s start adding some content to it.
Creating a PanoramaItem (sections of the Panorama)
Right now, our application doesn’t work very well. It just shows our background image. It doesn’t scroll, or show anything at all. By adding PanoramaItems, we are creating the individual sections of the Panorama control, and within those PanoramaItems, we can add the XAML that will show up in those sections.
Each PanoramaItem is completely independent of another, so you can technically make each section look completely different. I’ll walk you through the code for a PanoramaItem, and then we can talk about the custom content in the next section. You’ll notice below that I have defined three PanoramaItems, and given each one of them a header. This is probably better illustrated with screenshots, so I’ll include those after the code.
<controls:Panorama Title="waiter"> <controls:Panorama.Background> <ImageBrush ImageSource="PanoramaBackground.jpg" Opacity=".5" /> </controls:Panorama.Background> <controls:PanoramaItem Header="learn"> </controls:PanoramaItem> <controls:PanoramaItem Header="play"> </controls:PanoramaItem> <controls:PanoramaItem Header="all"> </controls:PanoramaItem> </controls:Panorama>
Notice how the Background scrolls, as well as the title, but that they’re not really at the same speed? This gives the application a significant amount of visual depth as the user pans through it. But it’s still pretty empty. Let’s get some content in there, so that it looks more like this:
Adding Content to a PanoramaItem
You certainly don’t HAVE to, but I’d always recommend starting with a ListBox. This gives you the power to scroll your content vertically, if you have too much. You have many, many options when it comes to layout, but a ListBox is probably going to offer you the most convenience. (Plus, binding a list of items in code to it is WAY simple. Check out this tutorial from Scott Guthrie.)
For my example, I have 5 applications that I want you to be able to launch from this screen. I’ve created some custom XAML for this, and placed it inside my ListBox. Here’s what the XAML looks like, and a screenshot of the “Play” section in the emulator:
<controls:PanoramaItem Header="play"> <ListBox Margin="0,0,-12,0"> <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> <Image Height="100" Width="100" Source="icons/tictactoe.png" Margin="12,0,9,0"/> <StackPanel Width="311"> <TextBlock Text="tic tac toe" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <TextBlock Text="the classic two player game" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/> </StackPanel> </StackPanel> <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> <Image Height="100" Width="100" Source="icons/numbers.png" Margin="12,0,9,0"/> <StackPanel Width="311"> <TextBlock Text="numbers" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <TextBlock Text="learn your digits from 1 - 20" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/> </StackPanel> </StackPanel> <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> <Image Height="100" Width="100" Source="icons/wordsearch.png" Margin="12,0,9,0"/> <StackPanel Width="311"> <TextBlock Text="word search" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <TextBlock Text="find as many words as you can" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/> </StackPanel> </StackPanel> <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> <Image Height="100" Width="100" Source="icons/animals.png" Margin="12,0,9,0"/> <StackPanel Width="311"> <TextBlock Text="animals" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <TextBlock Text="hear and learn your favorites" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/> </StackPanel> </StackPanel> <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> <Image Height="100" Width="100" Source="icons/alphabet.png" Margin="12,0,9,0"/> <StackPanel Width="311"> <TextBlock Text="alphabet" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <TextBlock Text="learn your letters" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/> </StackPanel> </StackPanel> </ListBox> </controls:PanoramaItem>
So that’s about it! I have each of the icons link to their own individual XAML file, but this Panorama provides my user the ability to navigate through my application before actually playing any of the individual games.
Download the Code
This sample code includes everything we covered in this article. Download it and learn the Panorama control for yourself!
JEFF BLANKENBURG 
Leave a Reply