PhoneApplicationPage & PhoneApplicationFrame - so what exactly is the difference?

DZone 's Guide to

PhoneApplicationPage & PhoneApplicationFrame - so what exactly is the difference?

· Mobile Zone ·
Free Resource

When developing an application for Windows Phone 7, the default UI content placeholder is defined by a PhoneApplicationPage. However, there is also PhoneApplicationFrame available and it is often confusing on the purpose of both. So there's the question - what's the difference between these two?

PhoneApplicationFrame is the top level container that is one for the entire application. The PhoneApplicationFrame can contain other pages. By default, a PhoneApplicationFrame is created automatically when the application is initialized, and then the page specified in WMAppManifest.xaml is loaded. However, you can alter the default frame initialization.

For example, I created a custom XAML for my PhoneApplicationFrame instance:

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"


Now let's look at App.xaml.cs, where the frame initialization happens:

// Do not add any additional code to this method
private void InitializePhoneApplication()
if (phoneApplicationInitialized)

// Create the frame but don't set it as RootVisual yet; this allows the splash
// screen to remain active until the application is ready to render.
RootFrame = new PhoneApplicationFrame();
RootFrame.Navigated += CompleteInitializePhoneApplication;

// Handle navigation failures
RootFrame.NavigationFailed += RootFrame_NavigationFailed;

// Ensure we don't initialize again
phoneApplicationInitialized = true;

Look at the line that says new PhoneApplicationFrame. I am now going to replace it with my frame. Yes, I know that the comment above the method states that I shouldn't add any code to this method, but I am modifying it, so that falls in the "allowed actions" category. So simply modify this by using new MainFrame instead for testing purposes.

Instead of PhoneApplicationFrame, type MainFrame. Also, make sure that a page XAML is referenced in WMAppManifest.xml:

If a frame is referenced instead, an exception will be thrown before you will actually see the application UI. This is by design and currently there is no way around this - you cannot simply load an empty frame without nullifying its Content property.

Once you run the application, you should see something like this:

You might be wondering - what happened to the sample page and why it is cut? Now take a look the frame XAML - as you can see, it has MaxHeight declared and set to 300. That's what's limiting the display area. If you remove that property reference, the page will fill the entire screen.

If you think that the application bar will also be moved up, you are mistaken - it is tied to the bottom of the frame and even though the display area is reduced, the application bar will still be displayed normally:

A PhoneApplicationFrame can be used to navigate to other pages directly:

this.Navigate(new Uri("/Page2.xaml", UriKind.Relative));

Navigating this way will let you use the Back button to return to the initial page. You can also set the Content property for the frame, but you should remember that even if you change the Content to a specific UI element or Page, the actual loaded page will be the one passed through the Navigate method. Generally, I would not recommend setting the Content property for a PhoneApplicationFrame unless you absolutely needed.

A PhoneApplicationPage on the other side is designed to be a placeholder for UI components and you can use as many as you want in a Windows Phone 7 application. Pages should be used to display data and provide user interaction handles - avoid using a frame for this purpose (although you can). Pages by themselves do not allow navigation and delegate this process to NavigationService that is tied to the currently loaded frame.

For more information, I highly recommend reading this MSDN article:

Frame and Page Navigation Overview for Windows Phone


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}