When you are building a new Windows Phone 7 using using Blend (or Visual Studio), you can select the Windows Phone Panorama Application project type. This style of application allows you to define a Canvas object, which contains a graphic much longer than the view port is capable of showing at once.
When the user uses their finger (for a real phone; you'll use the mouse to achieve a similar effect), the view port will smoothly scroll to the next part of the larger graphic.
To illustrate, launch Blend and access the the File | New Project menu option, create a new Windows Phone Panorama Application project named PanoramaDemoApp.
Take a look at the Objects and Timeline editor, and notice that your LayoutRoot Grid object defines a single child object of type Panorama. This object is responsible for smoothly transiting between its set of PanoramaItem objects, of which there are currently two, each of which contains a single ListBox:
Now, run your application. Once it loads in the emulator, you can use your mouse to "swipe" to the left or right to smoothly scroll the view port, and view the data in each PanoramaItem objects.
Now, open the XAML editor for your MainPage.xaml artboard, and notice that each PanoramaItem object has been configured to pull data from a related data template, for example:
1: <!--Panorama item one-->
2: <controls:PanoramaItem Header="first item">
3: <!--Double line list with text wrapping-->
4: <ListBox ItemsSource="{Binding Items}" Margin="0,0,-12,0">
5: <ListBox.ItemTemplate>
6: <DataTemplate>
7: <StackPanel Margin="0,0,0,17" Width="432">
8: <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap"
9: Style="{StaticResource PhoneTextExtraLargeStyle}" />
10: <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap"
11: Margin="12,-6,12,0"
12: Style="{StaticResource PhoneTextSubtleStyle}" />
13: </StackPanel>
14: </DataTemplate>
15: </ListBox.ItemTemplate>
16: </ListBox>
17: </controls:PanoramaItem>
The containing Panorama control, beyond maintaining the PanoramaItem objects, also establishes which image file to use as the background, which is currently set to a starter file added to your project named PanoramaBackground.png:
1: <!--Panorama control-->
2: <controls:Panorama Title="my application">
3: <controls:Panorama.Background>
4: <ImageBrush ImageSource="PanoramaBackground.png"/>
5: </controls:Panorama.Background>
6: ...
7: </controls:Panorama>
To continue tinkering with this Windows Phone project type, let's change the default background image with a custom image file. Select the Panorama object in the Objects and Timeline panel, and locate the Background property. You'll notice that it is currently using an Image brush, connected to PanoramaBackground.png:
Before we change this background, what I would recommend is to open a digital image file into the Windows Paint application, and then resize the image to 1024 * 768 pixels in size (which is the size of the original image) and save it as a PNG file format. Once you have done so, click ellipse button next to the ImageSource property, locate a new custom graphic of your choosing. Now, run your program once again, and you will see your graphic scrolling in the background, thanks to the Panorama object:
The final modification we will make here is to add a third PanoramaItem to the collection maintained by the Panorama parent node. The simplest way to do so is to right click on the Panorama object via the Objects and Timeline panel, and select the Add PanoramaItem menu option:
As soon as you activate this menu option, the artboard will display the new PanoramaItem object, to which you are able to add any number of controls, graphics or what have you. Here, you might just want to change the Header property of the PanoramaItem object (via the Properties window) and perhaps add a new Button to the internal Grid object (really anything will do here; we just need something to test). Now, run your program once again, and you should be able to smoothly scroll between each of your views, while your custom graphic passes in the background!