Archive for November, 2012

Laying out Content in Windows Phone 8 Apps

November 27, 2012 Leave a comment

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.

Display Resolutions in Windows Phone 8

November 16, 2012 Leave a comment

Windows Phone 7 devices have one possible resolution: 480 x 800 pixels (aka. WVGA). Windows Phone 8 devices have three possible resolutions: 480 x 800 (WVGA), 768 x 1280 (WXGA), and 720 x 1280 (720p). With these three resolutions there are two aspect ratios: WVGA and WXGA are 9:15 and 720p is 9:16. To keep a consistent user experience for XAML based apps the layout units used for Windows Phone 8 apps (as well as Windows Phone 7 apps running on Windows Phone 8) are Device-Independent Pixels. This means that the OS will do the appropriate scaling for the app on devices with different screen sizes. This can be very beneficial for hand held devices with small screens. For instance, a button designed to be pressed by a finger, will be the same size for the end user, regardless of the resolution of the device they’re using. With Device-Independent Pixels app developers don’t need to worry about hit targets becoming too small to be hit on high resolution devices.

To see how scene elements behave under the different resolutions I created a Windows Phone 8 app in Blend for Visual Studio with elements that are of interesting sizes. The elements are rectangles which have a number displayed on them, and that number is the value that the rectangles Width property is set to (the vertical rectangles have been rotated 90°). This screen shot shows the app being developed in Blend with the Display combo box set to WVGA. Given that the display resolution is 480 x 800 it is not surprising that the 480 and 800 rectangles stretch across the entire display area of the device, but not beyond it.
Changing the Display resolution to WXGA we can see the Device-Independent Pixels at work. The aspect ratio remains 9:15 so the 480 and 800 rectangles still stretch across the entire display area of the device, even though the display area is 768 x 1280 pixels. The 768 and 1280 rectangles still end way beyond the boundaries of the device display area because all of the elements have been scaled appropriately. Looking in the Display combo box you can see that it shows a scale of 160%. This means that all of the elements on the art board are being scaled by 160%. 480 x 1.6 = 768. The scale is calculated using the Content.ZoomFactor property.

Changing the Display resolution to 720p it is possible to see where XAML app developers may need to take the different device resolutions into consideration. With 720p the aspect ratio is no longer 9:15, it is 9:16. While the 480 rectangle is still scaled to fit the width of the device, the 800 rectangle is no longer tall enough to match the height of the device display area. With an aspect ratio of 9:16 and a scale of 150% it takes an element with a height of 853 to be able to cover the entire height of the device.

Another way to test how apps will look with the different display resolutions can be configured by the Device pane’s Deploy target combo box. For Windows Phone 8 projects the Deploy target can be set to: Device, Emulator WVGA, Emulator WXGA, or Emulator 720P. When you run the project (Project -> Run Project) it will run the app on the target specified by the Deploy target. So if a Windows Phone 8 device is plugged into the computer, and the Deploy target is set to Device, the app will be launched on that device. If an emulator is selected, running the project will result in a Hyper-V guest being started which has Windows Phone 8 as the OS and the desired resolution configured for the display.

Consoling a baby takes a Nook

November 8, 2012 Leave a comment

Something I remember with my first child is that he would be up late at night, would not be falling asleep, and I would be getting impatient. Something which has changed with our second is that we now have a Nook Simple Touch. The baby wants to be held and to be walked around. So I will hold the baby in one arm, hold the Nook in the other and ace around that floor. While I may not be getting sleep, the time sure does seem to be going by a lot faster and I am not getting impatient with the baby being up late at night. I don’t think that this would really work with a paper book because it’d be a struggle to hold the book open just right, and turning a page would be impossible. I love the Nook.

Categories: Health and wellness