So far all the controls you’ve seen have
existed in other versions of XAML (e.g. WPF, Silverlight and Windows 8).
But some controls are specifically for use on the phone. The two most
obvious are the Pivot andPanorama control.
Panorama Control
The Panorama control creates a virtual canvas of several panels that the user can scroll into view as she wants. The Panorama
control allows you to build these virtual canvases out of one or more
panels. You can see an example of a panorama application in Figure 1.
Figure 1. Panorama application
The Panorama control requires that you add a reference to the Microsoft.Phone.Controls assembly. Likewise, you must import the new namespace into your XAML document, as shown here:1
<phone:PhoneApplicationPage
x:Class="MyFirstPanorama.MainPage"
xmlns:ctrls="clr-namespace:Microsoft.Phone.Controls;
assembly=Microsoft.Phone.Controls"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Once you have the new namespace you can use the Panorama and PanoramaItem elements to create the panorama:
<Grid x:Name="LayoutRoot"
Background="Transparent">
<ctrls:Panorama Title="my panorama">
<ctrls:PanoramaItem Header="first">
<Grid>
<ListBox />
</Grid>
</ctrls:PanoramaItem>
<ctrls:PanoramaItem Header="second">
<Grid>
<ListBox Width="500" />
</Grid>
</ctrls:PanoramaItem>
</ctrls:Panorama>
</Grid>
The Panorama element supports a Title attribute, which is used to display text that goes across the entire Panorama control. Inside the Panorama control you can use one or more PanoramaItem elements. Each PanoramaItem element represents one second in the panorama. The PivotItem’s Header property controls what is shown above each PanoramaItem section. You can see the panorama in Figure 2.
Figure 2. Panorama explained
The Panorama element’s Title property is labeled #1 in Figure 2.
You can see that the title is shown across all the panes, so it is
never shown in its entirety. The two panorama items in the design are
shown as individual panes. The area labeled #2 shows the first PanoramaItem element and the area labeled #3 shows the second PanoramaItem. Notice that the next panorama item is hinted at on the right side of the screen.
Panoramas commonly have a background image that slides behind the
panorama as the user moves from one panorama item to the next. To get
that behavior, you can set the Background element of the panorama using an ImageBrush. For example, you would use the following code to paint the background with an image in the .xap file:
<ctrls:Panorama Title="my panorama">
<ctrls:Panorama.Background>
<ImageBrush ImageSource="/back.jpg"
Opacity=".2" />
</ctrls:Panorama.Background>
...
While panorama sections (e.g., PanoramaItem elements)
are meant to take up most of a single screen on the phone, other
sections can be larger than a single screen. You can see that the
section labeled #1 in Figure 3
is larger than a single screen, while the section labeled #2 is sized
for a single page. This is consistent with the design paradigm for the
phone.
Figure 3. Landscape sections
To use landscape sections, you must make a couple of changes. By
default, a panorama section will take up most of a single page. To get
the larger panes you must both size the PanoramaItem’s contents to be as large as necessary (using the Width attribute) as well as set the orientation of the PanoramaItem to Landscape, as shown with the second PanoramaItem in the code that follows:
<ctrls:Panorama Title="my panorama">
<ctrls:Panorama.Background>
<ImageBrush ImageSource="/back.jpg"
Opacity=".2" />
</ctrls:Panorama.Background>
<ctrls:PanoramaItem Header="first">
<Grid>
<ListBox />
</Grid>
</ctrls:PanoramaItem>
<ctrls:PanoramaItem Header="second"
Orientation="Horizontal">
<Grid Width="750">
<ListBox />
</Grid>
</ctrls:PanoramaItem>
<ctrls:PanoramaItem Header="third">
<Grid>
<ListBox Width="750" />
</Grid>
</ctrls:PanoramaItem>
</ctrls:Panorama>
The design guidelines specify that you should have no more than four or five sections in your Panorama
controls; fewer than that if you are using landscape sections. The
general rule of thumb is to have the entire panorama less than 2,000
pixels wide, though the smaller it is the easier it will be for users to
understand the intent.
