How to create a pivot app for Windows Phone 8

[ 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 pivot experience in Windows Phone.

• You can use a custom template named Windows Phone Pivot App when creating a new project. This template will come pre-populated with content and you can modify the template accordingly.

• The Pivot control can be added to the Toolbox in Visual Studio and can be easily dropped into your project.

• You can add a Windows Phone Pivot Page to an existing project.

This topic will show you how to create a pivot app by adding a Windows Phone Pivot Page to an existing project. You can find a pivot app sample in the Samples gallery on Windows Phone Dev Center.

This topic contains the following sections.

• Creating the base pivot app
• Adding controls and content to the pivot items
• Related Topics

 

Creating the base pivot app

In this section, you will create a pivot app in Visual Studio. The process will be to add a Windows Phone Pivot Page to your project that comes pre-populated with a Pivot control and some PivotItem controls. You will add an additional PivotItem.

To create the base pivot app

1. Launch Visual Studio from the Start menu.

2. Create a new project by selecting the File | New Project menu command.

3. The New Project window will be displayed. Expand the Visual C# templates, and then select the Windows Phone templates.

4. Select the **Windows Phone App ** template. Fill in the project Name as desired.

5. Click OK. A new project will be created and MainPage.xaml will be opened in the Visual Studio designer window.

6. Right-click the project in Solution Explorer, click Add, and click New Item. Select Windows Phone Pivot Page and click Add at the bottom of the page. The default name of PivotPage1.xaml is used for this project.

7. In MainPage.xaml, add the following to the XAML code within the grid named ContentPanel:

   <HyperlinkButton Content="Pivot Application Example" Height="57" 
   HorizontalAlignment="Left" Margin="49,116,0,0" Name="hyperlinkButton1" 
   VerticalAlignment="Top" Width="383" NavigateUri="/PivotPage1.xaml"/>
   

Note

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 pivot experience. You do not have to use a hyperlink as a default entry mechanism for a pivot app; a hyperlink is used only as an example in this exercise. You can configure the pivot experience to be visible immediately when a user starts the app.

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

   <!--LayoutRoot is the root grid where all page content is placed.-->
       <Grid x:Name="LayoutRoot" Background="Transparent">
           <!--Pivot Control-->
           <controls:Pivot Title="MY APPLICATION">
               <!--Pivot item one-->
               <controls:PivotItem Header="item1">
                   <Grid/>
               </controls:PivotItem>
   
               <!--Pivot item two-->
               <controls:PivotItem Header="item2">
                   <Grid/>
               </controls:PivotItem>
           </controls:Pivot>
       </Grid>
   

Note

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

9. After the <!--Pivot item two--> section, add an additional PivotItem control with the following code:

      <!--Pivot item three.-->
           <controls:PivotItem Header="item3">
              <Grid/>
           </controls:PivotItem>
   

Adding controls and content to the pivot items

In this section, you will add various controls and content to each of the PivotItem controls.

Adding content to the first pivot item

For the first PivotItem, you will add a TextBlock control containing wrapping text.

To add content to the first pivot item

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

  <Grid>
      <!--Added TextBlock control with formatted text.-->
      <TextBlock
         TextWrapping="Wrap"
         Style="{StaticResource PhoneTextLargeStyle}">
         <Run>This is a simple sample for the pivot control adding text.</Run>
         <LineBreak/>
         <LineBreak/>
         <Run>You can put any content you want here...</Run>
    </TextBlock>
  </Grid>
  

Note

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

Adding content to the second pivot item

For this page, you will add an assortment of content including a background image and wrapping text. For this topic, a sample image of samplePhoto.jpg is used. You must change the below code accordingly to accommodate your picture.

To add content to the second pivot item

• Add the following code to the XAML code after the second pivot item line of code, <controls:PivotItem Header="item2">. You must first delete the existing <Grid/> tag.

  <!--Added background image and text content.-->
      <Border
          BorderBrush="{StaticResource PhoneForegroundBrush}"
          BorderThickness="{StaticResource PhoneBorderThickness}">
               <Grid>
                   <Image
                      Source="samplePhoto.jpg"
                      Stretch="UniformToFill"/>
                   <TextBlock
                      Text="Here is some generic content to take up space."
                      TextWrapping="Wrap"
                      Style="{StaticResource PhoneTextExtraLargeStyle}" />
              </Grid>
       </Border>
  

Note

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

Adding content to the third pivot item

For the final PivotItem, 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 pivot item

1. In PivotPage1.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.

2. Add the following in the XAML code after the third PivotItem line of code, <controls:PivotItem 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>
   

Note

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

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

   

See Also

Other Resources

How to create a panorama app for Windows Phone 8