Creating Pages

October 21, 2011

Windows Phone applications are based on a Silverlight page model where users can navigate forward through different screens of content. To create each screen of your application, you typically create a separate page.

You Will Learn

• How to add new pages to your application.
• How to set properties on a page.
• How to add an Application Bar.
• How to add Application Bar icons.

Applies To

• Silverlight for Windows Phone OS 7.1

  

Adding New Pages

You can add pages to your project by using the Add New Item dialog box.

When you create a new Windows Phone Application project in Visual Studio, a default start page named MainPage is automatically created. You can move or rename this page, but if you do so, you must change the NavigationPage property of the DefaultTask element in the WMAppManifest.xml file. For more information about this manifest, see Application Manifest File for Windows Phone.

Setting Page Properties

By default, pages have an application title and a page title. The page title is an optional title for a page that does not scroll. You can change these titles in XAML view or the Properties window.

To add title information

1. In Design view, select the application title or page title.
2. In XAML view or the Properties window, change the Text property.

Design Guideline:
The application title in the title bar should be all capitals. Use all lower case letters for most other application text, including page titles and list titles.

Adding an Application Bar

The Application Bar is a good place to show common tasks or navigation aids that are always visible no matter if the page is scrolled or the on-screen keyboard is displayed. You can use ApplicationBarIconButton and ApplicationBarMenuItem controls in the Application Bar. You should use buttons for the most common tasks and menu items for less common tasks or tasks that are difficult to convey with an icon. The following illustration shows an example of an Application Bar in its expanded state.

Design Guideline:
Use the Application Bar for common application tasks. Place less frequently performed actions in the Application Bar menu.

When you create new pages, the XAML file automatically includes a commented out section that you can use to quickly add an Application Bar.

To add an Application Bar

1. In XAML view, uncomment the Application Bar section.
2. Modify the buttons, menu items, and text for your needs.

The following XAML shows the Application Bar code from the summary page in Fuel Tracker, which serves as the main navigation point for the application. In this example, the buttons are associated with click event handlers in C# or Visual Basic. The click-event handlers perform the actual navigation to another page.

<phone:PhoneApplicationPage.ApplicationBar>
  <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
    <shell:ApplicationBarIconButton IconUri="/Images/fillup.png"
      Text="add fill-up" Click=" " IsEnabled="False" />
    <shell:ApplicationBarIconButton IconUri="/Images/car.png"
      Text="car details" Click="CarButton_Click" />
    <shell:ApplicationBar.MenuItems>
      <shell:ApplicationBarMenuItem Text="about fuel tracker" 
        Click="AboutMenuItem_Click"/>
    </shell:ApplicationBar.MenuItems>
  </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Tip

In the Application Bar, any text you include is automatically displayed in all lowercase letters.

Application Bar Icons

There are several Application Bar icons that are installed as part of the Windows Phone SDK. You can find these icons in one of the following locations:

• On 32-bit operating systems: C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons
• On 64-bit operating systems: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons

If you need to create a custom Application Bar icon, the icon should meet the following requirements.

• 48 pixels by 48 pixels.
• Have a white foreground on a transparent background.
• The foreground graphic should fit in a 26 pixels by 26 pixels area in the center of the image.
• Does not include the circle because it is drawn by the Application Bar.

The following shows Application Bar icons used in Fuel Tracker.

The following shows how the Application Bar icons look in the dark and light themes.

To add an Application Bar icon

1. Add the icon file to the project and set the Build Action to Content.

2. In XAML, set the IconUri property for the ApplicationBarIconButton element to the relative URI of the image, as shown in the following markup.

   <shell:ApplicationBarIconButton IconUri="/Images/appbar.save.rest.png"
           Text="save car" Click="SaveButton_Click" />
   

For more information about the Application Bar and Application Bar icons, see Application Bar Icon Buttons for Windows Phone.

Next Topic | Previous Topic | Home