Posted by : Sudhir Chekuri Thursday, 3 October 2013

Windows Phone 8 Tiles

Resolutions supported in Windows Phone 8

WVGA - 480 * 800 px - 15:9(Aspect ratio)
WXGA - 768 * 1260 px - 15:9(Aspect ratio)
720p - 720 * 1280 px - 16:9(Aspect ratio)

So, because of this different resolutions support in WP8 the height and width of controls shouldn't be hard coded.

Tiles

Tiles are pinned to the start screen and it is the used to launch the app with a tap on it.
All apps will have atleast one tile known as default tile.
Tiles may contain text/image content and the content may be static or dynamic.
There are 3 tile sizes and also three title templates.
Sizes - Small, medium and Wide.
Tile sizes and resolutions

Small - 159 * 159 px (Flip and Cycle), 110 * 110 px (Ionic)
Medium - 336 * 336 px(Flip and Cycle), 202 * 202 px (Ionic)
Wide - 691 * 336 px(Flip and Cycle), NA (Ionic)

Templates - Flip, iconic, cycle
Flip - flips from front to back
iconic - clean layout W8 style with 2 colors and 2d styles
cycle - 9 images can be cycled from local or cloud resources

You can add three images for tiles and to add large tile you have to select the checkbox support for large tiles.

Live Tiles

Live tiles can be updated with the new information from the app.
We can display most useful information on it from the running app (or) using scheduled tasks when app is not running (or) using push notifications.
Secondary Tiles

Secondary tiles are created programmatically which represent a page and can launch any page in your app.
Splash Screen

Add image named as SplashScreenImage.jpg with 768 * 1280 px. It will automatically scale to all screens sizes.

App Icons

Resolution for app icon is 100 * 100
For app icons include images for WXGA resolutions. They will automatically scale to WXGA, WVGA and 720px screens.

Windows Phone 8 orientation Resolutions

Windows phone supports Potrait, Landscape left and Landscape right orientations.
You can check your app in different orientations on emulator.

All apps in windows phone need not support both landscape and potrait orientation.
You can configure apps to support both orientations.
There are two properties SupportedOrientations and Orientation in phone application page which allows you to select orientation options.
Your application can bind to an event which is fired when orientation changes.

Stack panel with scroll viewer will allow the user to scroll the content based on the orientation.

Windows Phone 8 Resolutions

It comes in 3 resolutions.
In WP8 we have 3 screen resolutions
wvga 800*480 15:9
wxga 1280 * 768 15:9(New)
720p 1280*720 16:9(New)

No need of creating three UI designs for these three resolutions. OS applies a scale factor to the actual resolution of apps.

Use auto and * for specifing the height and width of grid for good layout.
auto - value based on the content inside it.
* - value is equal to the remaining space available.
If multiple rows are using * then the remaining space is equally used by them.

You should supply images targeting the WXGA (1280 * 768) screen as they will automatically scale down to WVGA phones and still look great on 720p.
Include images at each of the 3 resolutions in your project.
Write code to load image at runtime appropriate for the current screen resolution.

At runtime, get Application.Current.Host.Content.ScaleFactor to determine the resolution of the screen on the current phone, returns 100 for WVGA, 160 for WXGA and 150 form 720p

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Followers

Total Pageviews

Powered by Blogger.

Blog Archive

- Copyright © 2013 DevStudent - Metrominimalist - Powered by Blogger - Designed by Johanes Djogan -