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 |
|---|---|
.gif "Bb158724.4f4682e0-7bde-48ac-9fc0-1b005879dcb0(en-us,MSDN.10).gif")
|
.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 |
|---|---|
.gif "Bb158724.86ed46d8-a1eb-4d04-acbf-7a04f069fe9b(en-us,MSDN.10).gif")
|
.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 |
|---|---|
.gif "Bb158724.22781e38-5823-44ac-a4cb-76c772fd1b91(en-us,MSDN.10).gif")
|
.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 |
|---|---|
.gif "Bb158724.2a060b29-cc05-4468-ac99-f6b5407e5b3b(en-us,MSDN.10).gif")
|
.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 |
|---|---|
.gif "Bb158724.90619301-df22-45cd-a707-ef7af2c700a4(en-us,MSDN.10).gif")
|
.gif "Bb158724.6641864d-ac83-4d76-849f-5a5c13ef7e03(en-us,MSDN.10).gif")
|
See Also
Concepts
How Applications Detect and Respond to Screen Rotation