Oct 18

Written by:
10/18/2011 8:49 AM 

In this article we will take a look at one of the new project templates bundled with Microsoft Visual Studio 2010 called a “Windows Phone Pivot Application”. This template allows you to define a maximum of seven (7) screens, similar to tabs, in your Windows Phone application.

In our sample application we will create two (2) screens, a “Main” screen and an “About Us” screen, we will then write code to change the currently selected screen and finally we will write some more code to detect when a screen is selected and which screen was selected. Let’s get started.

Start Microsoft Visual Studio 2010 and select from the menu File > New > Project…



From the subsequent dialog box, select the template type ‘Silverlight for Windows Phone’ from the left-hand side of the screen. From the right-hand side of the screen select the project template called ‘Windows Phone Pivot Application’. Create the project.



Your screen should look similar to the following.



You will notice that Visual Studio automatically created several screens for you called “first” and “second”. Each screen has a list control in it that loads a list of information for you. At this point you should run the project to see what functionality you get out of the box. Notice that to navigate from one screen to the next while your application is running, you can use a horizontal flick-like gesture to navigate from one screen to the next or you can click on the words "first" and "second" to change the currently selected screen.

Let us go back to the code, so you can stop the debugger and return to your code window. The first thing we will do is delete the list boxes from both of our screens so that we can add our own controls. So locate the XAML code that is similar to the following:

Click on the plus sign to the left of this line, then select the entire "ListBox" code chunk and delete it. Repeat this for the other "ListBox" item that begins with a line similar to the following:



So now your XAML code should look similar to the following: 

01.

02.    <Grid x:Name="LayoutRoot" Background="Transparent">

03.        

04.        <controls:Pivot Title="MY APPLICATION">

05.            

06.            <controls:PivotItem Header="first">

07.                

08.                 

09.            controls:PivotItem>

10.  

11.            

12.            <controls:PivotItem Header="second">

13.                

14.                   

15.            controls:PivotItem>

16.        controls:Pivot>

17.    Grid>


  
Now we will just change the line:

1.<controls:PivotItem Header="first">

To:

1.<controls:PivotItem Header="Main">

And change the other line:

1.<controls:PivotItem Header="second">

To:

1.<controls:PivotItem Header="About">

Inside of your tag:

1.<controls:PivotItem Header="Main">

Add a “Grid” tag similar to the following:

1.<Grid>Grid>

Do a similar thing for your other “PivotItem” that is labeled “About”.

You can now add items from the Toolbar to each of your screens. In the XAML code, when you place your cursor inside either of the following lines:

1.<controls:PivotItem Header="Main">

Or 

1.<controls:PivotItem Header="About">

The display will change in the “Preview” panel so that you can drag items to the respective screen. Place a "Button" on the “Main” screen and a “TextBox” on the “About” screen.





Run your application to see the results.

To add additional screens simply copy any of the “PivotItem” control chunks and change the “Name” and “Header” for the item.

Now let us take a look at how to change the currently selected screen via code. So for example, when the user clicks on our button that we added to the “Main” screen we will jump to the “About” screen.

Firstly, we have to give a name to our “Pivot” control that contains the “PivotItems” called “Main" and “About”. So click on the XAML tag that looks like the following:

1.<controls:Pivot Title="MY APPLICATION">

And go into the “Properties” panel on the right-hand side of the screen and enter a name for the control into the “Name” field. We will call it "mainPivotList".



Double-click on the button that you added to the “Main” screen. You will be taken to the code-behind screen where you can enter the following code:

1.mainPivotList.SelectedIndex = 1;

This line will change the currently selected screen to the “About” screen. The “Main” screen will have an index value of zero (0) and the “About” screen will have an index value of one (1) and if you added a third screen after the “About” screen it would have an index value of two (2) etc.



Run your code to see the results.

If you would like to perform some action when a new screen is selected you will need to register to receive notification when the event “SelectionChanged” is triggered for your “Pivot” control. 

Make sure that you have the “Pivot” item selected from the XAML code view and now from the “Properties” window click on the lightning bolt to view the list of events for the “Pivot” control.



Find the event called “SelectionChanged” and double-click on it to be taken to the code-behind page.



We will simply show a message box indicating which screen is currently selected but you may want to add conditional statements to perform a different action based on which screen was selected.



Run your application to see the results.



Enjoy!