Aspect Ratio, Output Resolution, and Scaling
Personal computer designers and developers typically assume every pixel on the computer screen is 100% addressable. By contrast, broadcast and interactive TV designers and developers account for action- or title-safe areas, assuming there are areas on screen that are not addressable by the application. For Windows Media Center you need not be concerned with action- or title-safe areas because of the following:
- Windows Media Center automatically adds an action-safe border around all applications when running on a Media Center Extender device.
- The end user can enable a feature during initial Windows Media Center Setup called TV skin, which applies additional action-safe borders around Windows Media Center UI on the Windows Media Center PC. To enable the TV skin for testing, select Tasks > Settings > General > Windows Media Center Setup > Configure Your TV or Monitor.
While you don't need to worry about action- or title-safe areas, you should pay particular attention to the aspect ratio of a device. Aspect ratio is the displayed width divided by its height and typically expressed as width:height. Understanding the potential target aspect ratios of the experience within Windows Media Center is very important to an elegant UI. For example, an application should be aware of and take advantage of the additional space available to represent content on a widescreen (16:9) display when using a horizontal gallery compared to standard (4:3).
Experiences designed for Windows Media Center should be designed to account for two aspect ratios—widescreen and standard—as follows:
| Format | Ratio | Resolution |
| Widescreen | 16:9 (or 1.78:1) | 1366 x 768 pixels |
| Standard | 4:3 (or 1.33:1) | 1024 x 768 pixels |
If you choose a static background for your page with human-recognizable elements, you should take care to crop the image carefully to account for the differences in aspect ratio. For example, the following image has important information. The surfer and surfboard have been carefully positioned so they remain onscreen even if the image is cropped for a standard display (4:3). Notice also the extra image information (820 versus 768 pixels) to account for aspect ratios that have a larger vertical height (such as 16:10, which is a very popular aspect ratio on laptops and widescreen monitors).
.gif "A resolution that can accommodate multiple aspect ratios.")
Account for the mouse navigation and transport controls (which don't scale) and Now Playing view item and volume indicator (which do scale) in your designs by making sure all selectable elements are not obscured by these Windows Media Center features.
Accounting for action-safe and/or title-safe areas in your application is not necessary. (The action-safe area is around 10% in from the edge of the video image and the title-safe area is around 20% in from the edge of the video image.) Windows Media Center works in conjunction with the video drivers to make sure most overscan issues (clipping of the image at the edges) are properly handled, even on older televisions. When Windows Media Center is first run, the user can select the type of output device being used and Windows Media Center will account for the overscan automatically.
The following Windows Media Center objects cannot be programmatically scaled or modified by a Windows Media Center application:
- Mouse navigation and media transport controls
- Volume indicator
- Now Playing view item
It is important to note that the mouse navigation and media transport controls do not scale proportionately with the Windows Media Center parent window. The volume indicator and Now Playing view item always scale in direct proportion to the Windows Media Center parent window. Applications should take care not to place any selectable user interface or other important information in these areas to avoid them becoming unusable.
Once created, a Video view item always scales in direct proportion to the Windows Media Center parent window. However, unlike the Now Playing view item, a Video view item can have its width and height modified programmatically in real time.
See Also