First look at Windows Phone

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

The Windows Phone user interface framework provides consistent system objects, events, and interactions that you can use to create beautiful, natural app experiences for people using their apps. This topic looks at each piece of the framework and discusses how it can be used or accommodated within app user interfaces.

The following figure shows off the Windows Phone screen real estate as it might look when an app is running.

Windows Phone screen

This topic contains the following sections.

• Status bar
• App space
• App bar
• App bar menu
• Start
• Screen orientations
• Hardware buttons
• Start button
• Search button
• Back button
• Volume button
• Camera button

Status bar

The Status Bar is an indicator bar that displays system-level status info simply and cleanly within a reserved space in the app workspace. It updates automatically to provide different notifications and keeps users aware of system-level status by displaying the following info (in order from left to right):

1. Signal strength

2. Data connection

3. Call forwarding

4. Roaming

5. Wireless network signal strength

6. Bluetooth status

7. Ringer mode

8. Input status

9. Battery power level

10. System clock

By default, only the system clock is always visible. If a user taps in the Status Bar area, all other relevant indicators slide into view for approximately eight seconds before sliding out of view.

Starting with Windows Phone OS 7.1, you can make the Status Bar opaque or transparent, and you can change the background and foreground colors.

App space

The main screen area is reserved for your app. The UI can be presented in either Landscape or Portrait mode. You can have the full 480 x 800 pixels if the Status Bar isn’t being shown.

App bar

The App Bar provides a place to display up to four common app tasks as icon buttons.

The App Bar provides a view that displays icon buttons with text hints and an optional extended menu when a user taps the visual indicator of sequential dots or flicks up the App Bar.

The App Bar always stays on the same edge of the display as the Steering buttons (Back, Start, and Search) and extends the full width of the screen in portrait or landscape mode. Icon buttons themselves will rotate to align with the three phone orientations.

App Bar buttons can be displayed in an enabled or disabled state. An example of a disabled button would be a Delete button in read-only scenarios.

The App Bar height in portrait mode and width in landscape mode is fixed at 72 pixels and can’t be modified. It can be set to be displayed or hidden.

Starting with Windows Phone OS 7.1, you can minimize the App Bar, which changes its height and width. You can show and hide the App Bar. You can also make it transparent and change its color.

App bar menu

The App Bar Menu is an optional way for users to access specific tasks from the App Bar. The App Bar Menu can be accessed by tapping the visual indicator of sequential dots in the App Bar or by flicking the App Bar up. This view can be dismissed by tapping outside the menu area or on the dots, using the Back button, or selecting a menu item or App Bar icon.

To prevent the need for scrolling, keep the number of menu items to 5 or less.

App bar menu

Start

Start is the beginning of the Windows Phone experience for users after they turn on their phone. Start displays app Tiles that users have pinned and placed in positions of their choosing for quick launch. Pressing the Start hardware button on the phone always returns a user to Start, no matter what app is running.

The Tile Notification feature can update the Tile graphic or title text on the front or back of the Tile. It can also increment a counter, enabling users to create a personalized Start experience. Examples include displaying how many email messages they’ve gotten, when it’s their turn in a game, or what the current weather is.

Start is always presented in portrait view.

Start

Screen orientations

Windows Phone supports three views of screen orientation: portrait, landscape left, and landscape right.

In portrait view, the page is vertically oriented with the hardware buttons appearing at the bottom of the phone, and the height of the page is greater than the width.

In either of the two landscape views, the Status Bar and App Bar remain on the same side of the screen. Landscape left has the Status Bar on the left, and landscape right has the Status Bar on the right.

The Status Bar grows from 32 pixels in portrait view to 72 pixels in both landscape views, as measured from the side of the phone that has the power button toward the center of the screen.

The screen orientation changes based on the following actions.

Portrait and landscape orientations

If the user slides out a horizontal hardware keyboard when the screen is in portrait view, the screen orientation changes to either of the landscape views.

There is no programmatic way to switch orientations because the orientation property is set to read-only, but it’s possible to set a fixed orientation.

Screen transition animation effects are played when screen rotation occurs.

In-app landscape view-aware system components are the Status Bar, App Bar, App Bar Menu, Volume/Ring/Vibrate Display, Push Notifications, and Dialogs.

Hardware buttons

A Windows Phone has several hardware buttons positioned around the device. Each button provides a unique function that may adjust or impact a running app. The exact location varies depending on the hardware manufacturer.

1. Power/sleep

2. Volume up and volume down

3. Camera

4. Back

5. Start

6. Search

The Back, Start, and Search buttons can optionally be implemented as capacitive touch buttons by phone manufacturers.

Hardware buttons

For info about how each button can affect the UI, see the button-specific descriptions later in this topic.

Start button

When a user presses the Start button, it takes them to Start in the phone user interface. An app that’s currently running will receive an event to pause itself.

Search button

The hardware Search button launches the Bing search experience for the user to find content from anywhere on the device.

You can’t replicate in-app search, but can mimic a Search button push to launch the Bing search using the SearchTask class.

You can’t modify or change the behavior of the Search button.

Back button

The hardware Back button is used to navigate back on pages (screens) within an app or between apps. By default, the framework handles the Back button, but apps can override this behavior. Also, the Back button can be used to close menus and dialogs, navigate to a previous page, exit a search operation, or even switch apps. However, the principal usage is to navigate from the current page to the previous page.

For more info about the page navigation model in Windows Phone, see Navigation, orientation, and gestures for Windows Phone.

Important Note:
To pass certification and be eligible for listing in Windows Phone Store, your app must meet several requirements related to the use of the Back button. For more info, see Technical certification requirements for Windows Phone.

The Back button doesn’t work as a backspace key to delete text input.

Volume button

The hardware Volume buttons are used to adjust the volume of either the in-call conversation volume (if a phone call is active), or the overall device volume (if no phone call is active), which includes music, radio, video, app, ringtone, and system sound volume.

Pressing either Volume button exposes the volume control, an overlay at the top of the screen. Volume may also contain audio transport controls, such as Previous and Next, if a media player is active. It always contains a control to toggle the ringer setting on and off. This control affects the playback of the system sounds that the user can control in the Ringtone and Sound Settings screen.

If the phone is locked, the Volume buttons are still active when media is playing or a phone call is in progress.

The buttons operate system wide, and volume settings carry through into the app. This means that developers can’t have volumes set higher than the user settings or override mute.

Pressing and holding a Volume button performs a key-press repeat and incrementally increases or decreases the volume depending on the button pushed.

When a user receives a phone call, touching either Volume button silences the ringtone.

In the original release of Windows Phone OS 7.0, you couldn’t edit the audio transport controls overlay or override the Volume button behaviors. Starting in Windows Phone OS 7.1, background audio agents can change which playback controls are enabled. They can also change the title and artist of the currently playing audio.

You can control the volume of the audio stream you provide to the system, including muting it.

Camera button

The Camera button is a dual-action button that supports full and half button press modes. When a user does a full button press, the phone launches the camera app. If the user does a half button press after the camera app has launched, the auto-focus feature is enabled.

Within the Camera app, pushing the Camera button takes a photo when in camera mode, or starts or stops video capture when in video mode.

If the user presses and holds the Camera button for more than one second when the device is in stand-by (screen off) or locked, the camera app launches.

Apps can programmatically launch the camera app by calling the CameraCaptureTask class.

In Windows Phone 8 and Windows Phone OS 7.1, you can override the camera buttons if you’re using the raw camera feed. For more info see How to access the hardware camera shutter button in Windows Phone 8.