Share via


Screen Rotation Guidelines

4/19/2010

It's important that your application appear and behave properly in landscape mode as well as portrait mode. This topic describes practical approaches you can take when you create the alternate screen layout.

Note

For user convenience, it is best to avoid designing dialog boxes that require scroll bars. The simplest way to accomplish this is to design your dialog boxes as squares. This way, a dialog box that does not require vertical scroll bars in portrait mode should not require them in landscape mode either.

The four most practical design approaches are as follows:

  • Dynamically resize the content.
  • Change the content.
  • Change the content layout.
  • Design for a square client area.

Dynamically Resize the Content

Dynamically resizing content to the dimensions of the client area produces the best user experience with the least number of trade-offs. For example, as shown in the following illustration, the Calendar application resizes its grid cells, expanding and contracting them to fit the dimensions of the client area.

Portrait Landscape
Bb158724.4f4682e0-7bde-48ac-9fc0-1b005879dcb0(en-us,MSDN.10).gif
Bb158724.c5f664a5-76d7-4eac-9eee-297720f430c5(en-us,MSDN.10).gif

As another example of dynamic content resizing, shown in the following illustration, the Memory settings control panel resizes its list box to the maximum size and then repositions all of the other controls around it.

Portrait Landscape
Bb158724.86ed46d8-a1eb-4d04-acbf-7a04f069fe9b(en-us,MSDN.10).gif
Bb158724.ea8d0493-5161-4f83-8832-6040cdcd2e00(en-us,MSDN.10).gif

Change the Content

Sometimes content and controls fit nicely in one orientation but not in another. One way to overcome this problem is to show less content in the other orientation. For example, as shown in the following illustration, the Calendar application displays only eight months, not 12, in landscape mode.

Portrait Landscape
Bb158724.22781e38-5823-44ac-a4cb-76c772fd1b91(en-us,MSDN.10).gif
Bb158724.c4c7970b-3287-49c3-a6ae-93bd0ceccf3f(en-us,MSDN.10).gif

Change the Content Layout

Reorganizing controls within a window might be your only option when you absolutely must have the same set of controls in each orientation. For example, in landscape mode, Windows Media Player displays its buttons to the side of the video clip, as shown in the following illustration.

Portrait Landscape
Bb158724.2a060b29-cc05-4468-ac99-f6b5407e5b3b(en-us,MSDN.10).gif
Bb158724.25bf8fc2-c5e8-4587-88ed-849eacf76bee(en-us,MSDN.10).gif

Design for a Square Client Area

For windows and dialog boxes that contain controls, designing content to fit the visible square common to both portrait and landscape orientations ensures that it displays properly in either orientation without changes. For example, as shown in the following illustration, the content of the Calendar Options dialog box needs no modification to display properly in both screen orientations.

Portrait Landscape
Bb158724.90619301-df22-45cd-a707-ef7af2c700a4(en-us,MSDN.10).gif
Bb158724.6641864d-ac83-4d76-849f-5a5c13ef7e03(en-us,MSDN.10).gif

See Also

Concepts

How Applications Detect and Respond to Screen Rotation

Other Resources

Screen Orientation Modes