General UI Strategies
4/19/2010
Windows Mobile devices come in many different form factors. The screens of these devices may vary in size, shape, and resolution. In the future, devices with new screen dimensions may be released. Consider the following guidelines when you design the UI for the application so that it looks and functions well now and in future devices.
Query the Screen Dimensions
Do not assume or hard-code the dimensions of the screen in the application.
Instead, query for information about the screen at runtime. In native code applications, use GetSystemMetrics or GetClientRect to determine the screen size. In managed applications, use the Width and Height properties of your application's form.
Handle Resize Events
Some devices can change the screen orientation at runtime. Instead of checking for the width and height only when the program starts, query the width and height in the handler for the resize event. This event is triggered when the application loads as well as when the screen orientation changes.
Use a Single Control
If possible, use a single control. If the application can use a single control, such as ListView or a TreeView control, you can set that control to occupy the whole screen and it will look correct on all devices.
Resize Controls in Dialog Boxes
When the application displays a dialog box, resize the dialog controls to use the entire width of the dialog. The following screen shots show the same dialog displayed in portrait mode and in landscape mode. In landscape mode, there is a region of white space on the right of the screen making the UI less pleasing to the eye.
.gif "Bb677140.3bbc0889-f196-4368-8718-da5fe6958c19(en-us,MSDN.10).gif")
.gif "Bb677140.e383a89b-2fb8-46ef-8153-27ca3c7e6f97(en-us,MSDN.10).gif")
The following image shows the same dialog that has been modified to use the entire screen when the device is switched to landscape mode.
.gif "Bb677140.ab4f0d3d-c72f-48c3-bf47-4b82ad8d8c39(en-us,MSDN.10).gif")
In managed code applications, use the Anchor and Dock properties of the Windows Forms components to create a dynamic layout. In native code applications, this technique is more difficult and requires quite a bit of coding. However, there is a library, available from MSDN, that enables you to create dynamic layouts for native code applications with only a few lines of code. For more information, see the topic Introducing Screenlib.
Test Using Different Emulators
The Windows Mobile SDKs provide emulators with various screen sizes and resolutions. As you develop the application, test it on different emulators to see how your UI appears on different devices. In addition, try switching the emulator between landscape and portrait mode.