31 Days of Windows Phone | Day #16: The Panorama Control

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:

 peoplehub

 xboxlivehub

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:

 panoramaproject

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.

 chooseitems

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

 choosetoolboxitems

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:

pictureshub

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

 PanoramaBackground

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:

 backgroundscreenshot

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>

1stpanel   2ndpanel   3rdpanel

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:

 allshot

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>

 playshot

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!

download

17 thoughts on “31 Days of Windows Phone | Day #16: The Panorama Control

  1. Jeff,

    Do you know how those widescreen panorama screenshots are created, like the one at the top of this post? Is it just a Photoshop trick, or is there a way to grab that out of the phone somehow?

    Thanks,
    Kevin

  2. In your People Panorama screenshot above, there is a + button in the pano title/header. How do you get buttons there, since we are not supposed to use an application bar?

  3. A good man would prefer to be defeated than to defeat injustice by evil means.

  4. A man's dreams are an index to his greatness.

  5. Neither a wise man nor a brave man lies down on the tracks of history to wait for the train of the future to run over him.

  6. Liberty means responsibility. That is why most men dread it.

  7. Alcohol is a very necessary article… It makes life bearable to millions of people who could not endure their existence if they were quite sober. It enables Parliament to do things at eleven at night that no sane person would do at eleven in the morning.

  8. The only way to have a friend is to be one.

  9. People seem not to see that their opinion of the world is also a confession of their character.

  10. Nothing astonishes men so much as common sense and plain dealing.

  11. The creator of the universe works in mysterious ways. But he uses a base ten counting system and likes round numbers.

  12. It is the habit of mediocre minds to condemn all that is beyond their grasp.

  13. A classic is a book which people praise and don't read.

  14. The proper office of a friend is to side with you when you are wrong. Nearly anybody will side with you when you are right.

  15. Few sinners are saved after the fiirst twenty minutes of a sermon.

  16. A friend is a gift you give yourself.

  17. Genius means little more than the faculty of perceiving in an unhabitual way.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s