Aspect ratio considerations

The minimum requirement for an application designed for 15:9 aspect ratio to support 720p is that the application does not hardcode all control sizes, leaving at least one control auto resizeable. Below are listed some common issues confronted when an application designed for 15:9 aspect ratio is made to support 720p resolution with 16:9 aspect ratio:

Issue Solution
Controls and graphics are overlaid wrong. Provide different graphics and/or layout for different aspect ratios.
Distorted image. Provide different graphics for different aspect ratios (15:9 and 16:9) ; see section High resolution graphics.
Distorted image. Set image's Stretch property to Stretch.Uniform or Stretch.UniformToFill.
Splash screen does not fill the display. See the section Splash screen guidance.

In AudioExplorer example application, the controls and graphics were incorrectly positioned when run in 720p device. This issue was fixed by providing a separate background image for 15:9 and 16:9 aspect ratios, dynamically set as background brush when application page is created.

Figure 1. Controls and graphics are overlaid incorrectly, and background graphics are distorted

Figure 2. Background graphics are distorted

Figure 3. Controls and graphics are overlaid correctly, and background graphics have correct proportions

As can be seen in the images above, the graphics designed for a specific aspect ratio might appear distorted when used in another aspect ratio. For example, in this case the "holes" in the background graphics for "Stop" and "Files" buttons were no more circular, and some empty space could be seen around button graphics, even after trying to positioning the overlaid buttons correctly.

In Weekly Planner example application, the originally provided one generic splash screen was not enough to fill the display of 1080p device. A 720p specific splash screen was added to the solution.

Figure 4. Generic splash screen, not filling the entire display

Figure 5. 720p specific splash screen, filling the entire display

Last updated 17 October 2013

Back to top