Home > Computers and Internet > Laying out Content in Windows Phone 8 Apps

Laying out Content in Windows Phone 8 Apps

Windows Phone 8 devices can have two aspect ratios: 9:15 or 9:16. The Blend for Visual Studio Device panel, has a Display drop down box which assists app developers in designing apps that will display appropriately for the different aspect ratios. For many apps the different aspect ratios won’t cause much grief for the app developers. Using the appropriate containers the content of the apps will layout dynamically, and look beautiful on all Windows Phone 8 devices. For some apps making the SystemTray and ApplicationBar visible on 9:16 devices, but dynamically hiding them for 9:15 devices, will be a sufficient solution. There may be some other situations however, where the app developer wants more precise control over the layout of their apps content and they will need to take the different aspect ratios into account.

Keeping Content Layout the Same

In the screenshot below I am creating a card game app in Blend. The Display combo box is currently set to WXGA, which has an aspect ratio of 9:15. The page consists of a Grid named LayoutRoot which contains a Grid named ContentPanel. LayoutRoot has a gradient background that goes from black to white. ContentPanel contains the actual playing area of the card game, has a gray background, a hardcoded width and height of 776 and 480 respectively, and the HorizontalAlignment and VerticalAlignment properties are set to Centered. Nothing remarkable happens when switching the Display from WXGA to WVGA, because they both have the same aspect ratio. The playing area (ContentPanel) is still in the center and there is just a little bit of background showing on the right and left sides.

When changing the Display to 720p the aspect ratio changes to 9:16, and this is where centering ContentPanel has a noticeable effect. The game board is the same size and is still in the center of the screen. This is important for my card game, because I want the playing area to look identical on the different Windows Phone 8 devices (a reason for this may be because the background of ContentPanel would be an image that has areas where cards are to be played and I don’t want that to be stretched or shifted). The areas on the sides which show the background are now thicker. They’re making up the difference for the extra pixels which were added. So having the LayoutRoot background be some sort of pattern or image which can be stretched for the different aspect ratios is how this app accommodates the extra pixels without changing the layout of the app.

Preventing Background Skew

Let’s say that I’m developing an app where it is really important that the background picture of the app not be skewed or stretched when ran on different devices. By default if an image is used as the brush for the Background property of an
element, the Stretch property will be set to Fill. This means that an image which has been set as the Background to the root container of a page, will be stretched slightly differently to fit the different aspect ratios of the different devices. To prevent this stretching for my app, I change the Stretch property on the Background Brush to None. I then modify the X and Y Scale of the background picture to 1.23 (the exact scale used depends on the number of pixels that the image has) which fills up the display area of the app. The content of the app consists of a TitlePanel and a couple of buttons which reside at the bottom of
the ContentPanel.

When I change the Display to 720p the aspect ratio changes and a white gap is created beneath my carefully crafted background. The content does the correct thing and is still at the bottom of the app, but the background no longer fills the entire display area of the device.

If I change the X and Y Scale to 1.32 the background will now take up the entire display area of the device regardless of the aspect ratio of the device. This does mean that on 9:15 devices part of the background is cropped off, but at least the image isn’t stretched or compressed, which is what is important for my app.

App Development is easier in Blend

In the past mobile application developers would purchase multiple handsets to test their applications on the myriad of different aspect ratios and pixel densities which existed in the market. Windows Phone 8 hardware requirements reduces this burden by allowing for only two possible aspect ratios and three screen sizes. The tools which are provided in the Windows Phone 8 SDK reduces the burden even further, by creating high fidelity previews of apps for the different possible displays. For many apps, using the proper containers will make the difference in device aspect ratios a non-issue. For the apps where it may be an issue there are multiple solutions for how the developers can control of the layout of their app. Either way, the Windows Phone 8 SDK provides tooling which enables the developers to experiment with the different screen sizes efficiently and with confidence.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: