Adding a Page Control item template (for Windows Store apps using C#/VB/C++ and XAML)

You can add the Page Control item template to a Windows Store app to provide easy navigation between pages. For descriptions of the Windows Store item templates, see C#, VB, and C++ item templates for Windows Store apps.

Let's create a project in the Blank App project template, which is a minimal template that doesn't contain any controls. Like the Grid App and Split App templates, the Blank App template creates a frame and navigates to an empty page.

There are several pages you can add to an app, including each page that makes up the grid app and split app, the Blank Page, and the Basic Page. All pages except for the Blank Page derive from LayoutAwarePage rather than page. Each item page template creates a new XAML file and the associated code-behind files (.vb, .cs, .h, .cpp).

We'll start by creating a navigation app in the Blank App template.

Creating the blank app

1. On the Visual Studio menu, click File > New Project.
2. In the left pane of the New Project dialog box, click the Visual C#, Visual Basic, or Visual C++ node.
3. In the center pane, click Blank App.
4. In the Name box, type BlankApp, and then click OK.

   The solution is created and the project files appear in Solution Explorer. For more info about the project files, see C#, VB, and C++ project templates for Windows Store apps.

   Important  When you run Visual Studio for the first time, it prompts you to obtain a developer license. For more info, see Get a developer license.

5. To run the program, on the Visual Studio menu, click Debug > Start Debugging, or press F5.

   A blank page is displayed.

6. Press Shift+F5 to stop debugging and return to Visual Studio.

Next, we'll add a second page.

Adding the basic page

1. In Solution Explorer, right-click the BlankApp project node and click Add > New Item.
2. In the Add New Item dialog box, click Blank Page in the middle pane.
3. In the Name box, type page2 and click Add.

   The page2.xaml file is created, along with one (or two if using Visual C++) other project files: page2.xaml.vb, page2.xaml.cs, or page2.xaml.cpp and page2.xaml.h.

Now we'll add code to navigate between the pages. The navigation app we're creating uses a button-click event to move from one page to another.

Adding navigation code

1. In Solution Explorer, open MainPage.xaml.
2. From the Toolbox, drag a Button onto the design surface.
3. Double-click the button to create an event handler for the Click event.

   The event-handling code uses the Frame.navigate function to move to the new page.

4. In the new event handler, add the following code:
   C#

   Copy

   
   this.Frame.Navigate(typeof(page2));
   
   

5. To run the app, press F5.

   When you click the Next Page button, page2.xaml loads and displays its default content.

   Click the back button to return to the first page of the app.

Related topics

C#, VB, and C++ item templates for Windows Store apps

Adding a Search Contract item template

Build date: 3/11/2013