First look at Windows Phone
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
The Status Bar is an indicator bar that displays system-level status info in a simple and clean presentation within a reserved portion of the app workspace. It automatically updates to provide different notifications and keeps users aware of system-level status by displaying the following info (in order from left to right):
- Signal strength
- Data connection
- Call forwarding
- Wireless network signal strength
- Bluetooth status
- Ringer mode
- Input status
- Battery power level
- System clock
Note The Status Bar is system-reserved and can't be modified (although you can update the progress indicator). It can be hidden, but many users view the system clock as an essential feature, so think carefully before hiding it.
You can make the Status Bar opaque or transparent, and you can change the background and foreground colors.
The main screen area is reserved for your app. The UI can be presented in either Landscape or Portrait mode. You can use the entire screen if the Status Bar isn't being shown.
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 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 and can't be modified. It can be set to be displayed or hidden.
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.
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 fewer.
App bar menu
Note If no menu items are present, only the icon text hints are displayed. The App Bar Menu remains on the screen until the user performs an action.
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.
Note Start is a reserved space where users can place Tiles. Windows Phone devices come with pre-placed Tiles installed by Microsoft, phone manufacturers, and phone service providers. Apps can also place Tiles in this area, but users are alerted to this by the system navigating to Start when a new Tile is placed there.
Windows Phone supports four views of screen orientation: portrait, landscape, landscape flipped, and portrait flipped.
In the portrait views: The page is vertically oriented with the steering buttons (Back, Start, and Search) appearing at the bottom of the phone (at the top in portrait flipped), and the height of the page is greater than the width. Portrait view is the default view for apps.
In the landscape views: The Status Bar and App Bar remain on the sides of the screen in landscape view. Landscape has the Status Bar on the left, and landscape flipped has the Status Bar on the right.
The Status Bar grows in size in both landscape views. This is because the indicators rotate and the widest has to be accommodated.
The screen orientation changes based on these actions.
|Beginning screen orientation||Rotating||Ending screen orientation|
|Portrait||60 degrees left||Landscape|
|Portrait||60 degrees right||Landscape flipped|
|Landscape||60 degrees right||Portrait|
|Landscape flipped||60 degrees left||Portrait|
|Landscape or Landscape flipped, flat on a table||30 degrees up||Portrait|
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.
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. Apps that rely heavily on text input should support both portrait and landscape modes to take advantage of optional horizontal hardware keyboards.
We recommend that you avoid creating text input–heavy landscape experiences.
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 may vary depending on the hardware manufacturer.
- Volume up and volume down
The Back, Start, and Search buttons can optionally be implemented as capacitive touch buttons by phone manufacturers.
For info about how each button can affect the UI, see the button-specific descriptions later in this topic.
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.
The hardware Search button launches the Bing search experience for the user to find content from anywhere on the device.
You can't modify or change the behavior of the Search button. But your app can implement its own search button and perform an in-app search, or launch Bing search using the Launcher class.
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 the 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.
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 Ringtones and SoundsSettings 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.
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.
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 using the CameraCaptureUI class.
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.