How to create a panorama app for Windows Phone 8

Article
05/20/2016

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

There are multiple ways in Visual Studio to create a panorama experience in Windows Phone.

You can use a custom template named Windows Phone Panorama App when creating a new project. This template will come pre-populated with content and you can modify the template accordingly.
The Panorama control can be added to the Toolbox in Visual Studio and dropped into your project.
You can add a Windows Phone Panorama Page to an existing project.

This topic will show you how to create a panorama app by adding a Windows Phone Panorama Page to an existing project. For a panorama sample, see Samples gallery on Windows Phone Dev Center.

This topic contains the following sections.

Creating the base panorama app
Setting the background image
Adding controls and content to PanoramaItem controls
Related Topics

Creating the base panorama app

In this section, you will create a panorama app in Visual Studio and add three PanoramaItem controls. The process will be to add a Windows Phone Panorama Page to your project that comes pre-populated with a Panorama control and some PanoramaItem controls. You will add an additional PanoramaItem and apply a background image to the Panorama control.

To create the base panorama app

Launch Visual Studio from the Start menu.
Create a new project by selecting the File | New Project menu command.
The New Project window will be displayed. Expand the Visual C# templates, and then select the Windows Phone templates.
Select the **Windows Phone App ** template. Fill in the project Name as desired.
Click OK. A new project will be created and MainPage.xaml will be opened in the Visual Studio designer window.
Right-click the project in Solution Explorer, click Add, and click New Item. Select Windows Phone Panorama Page and click Add at the bottom of the page. The default name of PanoramaPage1.xaml is used for this project.
In MainPage.xaml, add the following code to the XAML code within the grid named ContentPanel:
```
<HyperlinkButton Content="Panorama Application Example" Height="57" 
HorizontalAlignment="Left" Margin="49,116,0,0" Name="hyperlinkButton1" 
VerticalAlignment="Top" Width="383" NavigateUri="/PanoramaPage1.xaml"/>
```
The purpose of creating this hyperlink is to create a start point for your app. At application run time, users will tap this hyperlink to proceed to the panorama experience. You do not have to use a hyperlink as a default entry mechanism for a panorama app; a hyperlink is used only as an example in this exercise. You can configure the panorama experience to be visible immediately when a user starts the app.

In PanoramaPage1.xaml, the following code in the XAML code should be visible:

   <!--LayoutRoot contains the root grid where all other page content is placed.-->
    <Grid x:Name="LayoutRoot">
        <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>
    </Grid>

The preceding code creates a single Panorama control and assigns a title to it. Next, you will create two PanoramaItem controls with each assigned to a header. For this project, we will create three PanoramaItem controls and will create an additional PanoramaItem in the next step.

After the  section, add an additional PanoramaItem control to the following code:

<!--Panorama item three.-->
       <controls:PanoramaItem Header="item3">
           <Grid/>
      </controls:PanoramaItem>

The following illustrates how the base panorama control and the PanoramaItem controls should appear at this stage of the exercise:

Setting the background image

In this section, you will apply an image to the Panorama control. For this topic, a sample image of samplePhoto.jpg is used. Use a properly sized image in your app. Background images should be between 480 x 800 pixels and 1024 x 800 pixels (width x height) to ensure good performance, minimal load time, and no scaling. If your image does not have a height of 800 pixels, it will be stretched to that height without preserving the aspect ratio.

To set the background image

Add the following code to the XAML code after the Panorama control code, <controls:Panorama Title="my application">:
```

     <controls:Panorama.Background>
        <ImageBrush ImageSource="samplePhoto.jpg"/>
     </controls:Panorama.Background>
```
As an alternative, you can change the Background for the control programmatically in the code-behind file or the page. Add a using directive for the System.Windows.Media.Imaging namespace to the code-behind file. To change the Background programmatically, add the following code to the page constructor, an OnNavigatedTo override, or some other place in the code where you want to set the Background of the Panorama control. This code assumes you have named the Panorama control PanoControl.
```
BitmapImage bitmapImage = new BitmapImage(new Uri(“samplePhoto.jpg”,UriKind.Relative));
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = bitmapImage;
PanoControl.Background = imageBrush;
```

Adding controls and content to PanoramaItem controls

In this section, you will add various controls and content to each of the PanoramaItem controls. You will also flip the second PanoramaItem orientation to horizontal, which will offer a unique viewing perspective for the content. For example, the content section will extend off the screen and the user must pan to expose the rest of it.

Adding content to the first PanoramaItem

For the first PanoramaItem, you will add a couple of TextBlock controls containing wrapping text. Both controls will be placed inside a StackPanel control. This is a simple representation of how to display content in a PanoramaItem control.

To add content to the first PanoramaItem

Add the following code to the XAML code after the first PanoramaItem, <controls:PanoramaItem Header="item1">. You must first delete the existing <Grid/> tag.

         <Grid>
         <!--This code creates two TextBlock controls and places them in a StackPanel control.-->
            <StackPanel>
                <TextBlock
                    Text="This is a text added to the first panorama item control"
                    Style="{StaticResource PhoneTextLargeStyle}"
                    TextWrapping="Wrap"/>
                <TextBlock Text=" "/>
                <TextBlock
                    Text="You can put any content you want here..."
                    Style="{StaticResource PhoneTextLargeStyle}"
                    TextWrapping="Wrap"/>
            </StackPanel>
         </Grid>

The first PanoramaItem should resemble the illustration seen at the bottom of this topic.

Adding content to the second PanoramaItem

In this section, you will change the orientation of a PanoramaItem control to horizontal. The resulting effect will be content that extends off the screen and a user must pan horizontally to expose the rest of the content.

To change the orientation of the second PanoramaItem

Change the orientation of the second PanoramaItem to horizontal. Set the Orientation attribute to Horizontal in the XAML code for the second PanoramaItem control:
```
<controls:PanoramaItem
      Header="item2"
      Orientation="Horizontal">
```

To add content to the second PanoramaItem

Add the following code to the XAML code after the second PanoramaItem, <controls:PanoramaItem Header="item2" Orientation=”Horizontal”>. You must first delete the existing <Grid/> tag.

   <!--Assigns a border to the PanoramaItem control and background for the content section.-->
        <Grid>
            <Border
                BorderBrush="{StaticResource PhoneForegroundBrush}"
                BorderThickness="{StaticResource PhoneBorderThickness}"
                Background="#80808080">

                <TextBlock
                    Text="This content is very wide and can be panned horizontally."
                    Style="{StaticResource PhoneTextExtraLargeStyle}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" >                  
                </TextBlock>

            </Border>
         </Grid>

The second PanoramaItem should resemble the illustration seen at the bottom of this topic.

Adding content to the third PanoramaItem

For the final PanoramaItem, you will place a series of string text values inside a ListBox control. The purpose is to show that you have the ability to navigate the hosted control. A user will be able to pan the list contents vertically, up or down.

To add content to the third PanoramaItem

In PanoramaPage1.xaml, add the following namespace declaration in the XAML code:
```
xmlns:sys="clr-namespace:System;assembly=mscorlib"
```

Note

This assembly is referenced to add multiple lines of string text to the ListBox control.

Add the following code to the XAML code after the third PanoramaItem, <controls:PanoramaItem Header="item3">. You must first delete the existing <Grid/> tag.

<!--This code adds a series of string text values.-->
<Grid>
            <ListBox FontSize="{StaticResource PhoneFontSizeLarge}">
                <sys:String>This</sys:String>
                <sys:String>item</sys:String>
                <sys:String>has</sys:String>
                <sys:String>a</sys:String>
                <sys:String>short</sys:String>
                <sys:String>list</sys:String>
                <sys:String>of</sys:String>
                <sys:String>strings</sys:String>
                <sys:String>that</sys:String>
                <sys:String>you</sys:String>
                <sys:String>can</sys:String>
                <sys:String>scroll</sys:String>
                <sys:String>up</sys:String>
                <sys:String>and</sys:String>
                <sys:String>down</sys:String>
                <sys:String>and</sys:String>
                <sys:String>back</sys:String>
                <sys:String>again.</sys:String>         
            </ListBox>
</Grid>

The third PanoramaItem should resemble the illustration seen at the bottom of this topic.

Run the app by selecting the Debug | Start Debugging menu command. This will open the emulator window and launch the app, or deploy to a device based on your selection.

Share via