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

You can add a page item template to a Windows Store app and 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. 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, choose File > New Project.

2. In the left pane of the New Project dialog box, choose the Visual C#, Visual Basic, or Visual C++ node.

3. In the center pane, choose Blank App.

4. In the Name box, enter BlankApp, and then choose the OK button.

   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, choose 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, open the shortcut menu for the BlankApp project node, and then choose Add > New Item.

2. In the Add New Item dialog box, choose Blank Page in the middle pane.

3. In the Name box, enter page2 and choose the Add button.

   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. In Extensible Application Markup Language (XAML) or design view, select the button that you added to MainPage.xaml.

4. In the Properties Window, click the Events button ().

5. Find the Click event at the top of the event list. In the text box for the event, type the name of the function that handles the Click event. For this example, type "Button_Click".

   

6. Press Enter. The event handler method is created and opened in the code editor so you can add code that's executed when the event occurs.

7. In the new event handler, add the following code:

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

   Me.Frame.Navigate(GetType(BlankPage1))
   

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

 

 

Send comments about this topic to Microsoft

Build date: 11/11/2013