General Considerations on Page Layouts

Page layouts should be simple and clean, with a coherent visual hierarchy. Create a consistent design from page to page, aligning items to a grid. Readability should take precedence over decoration. Avoid including too many extraneous visual elements, and eliminate decorative elements that distract from the experience.

Normally your users will want to maintain their current media-playing experience while they browse to your application. When the user opens your application while video or TV is playing, Windows Media Center (unless otherwise instructed), will move the media playback into a small window at the lower left of the screen, called the Now Playing inset, or view item. When the Now Playing view item is visible, it will supersede any content in the lower left corner of your page so it is important to plan your layout accordingly. Do not place important content such as focusable items in this space, and be sure to test your application with the Now Playing view item open.

You can also choose to close the Now Playing experience. If this option is chosen, you should take care to persist the user's currently-playing content (audio or video) in a logical way. You can implement a custom Video view item anywhere on the page to provide the visual portion of a video stream. If for some reason you need to interrupt the user's currently-playing media experience when your application launches, you should warn the user you are about to do so, and provide an option for the user to cancel. For more information, see Using the Now Playing and Video View Items.

The background behind Windows Media Center user interface elements is specified by the application using a background mode. The application can use a built-in animated full-screen background, a full-screen video, a background image, a flat RGB color, or a masked video. If you are using a background image for your page that shows a textured or blended surface, you should test it with the Video view item open and be sure that the flat background color of the view item blends seamlessly with your background image. You may have to adjust your background image to accommodate a flat, colored rectangle at the lower left.

It is difficult, if not impossible, to anticipate every possible aspect ratio when designing the layout of a page. All scaling in Windows Media Center is based on the 16:9 or 4:3 aspect ratios, so it's not typically worth the time or effort to account for other resolutions and ratios, such as 1280 x 1024 pixels for the 5:4 aspect ratio. The wrong approach is to hardcode a design for one specific aspect ratio.

We recommend the following approach:

• Design the experience for a 1366 x 768 resolution for the 16:9 aspect ratio and account for the smaller 1024 x 768 resolution for the 4:3 aspect ratio in the number of items you display in galleries or in the overall size of items on the page.

• Include extra image information for the background to the right and bottom of the page to account for slight variations in aspect ratio.

• Certain Windows Media Center user interface elements frequently overlay applications and cannot be controlled programmatically:

  • Mouse navigation
  • Volume/mute indicator
  • Mouse transport controls
  • Now Playing view item

  Account for the mouse navigation and transport controls (which do not scale), and the Now Playing view item and the volume indicator (which do scale) in your designs by ensuring that all clickable elements are not obscured by these Windows Media Center features.

The following design template shows the areas in which you can place items:

The following image shows an example of the Windows Media Center user interface elements:

See Also

• Designing Applications for Windows Media Center