A simple step towards orientation independence
OK I'm back to blogging after a brief hiatus. I'd like to begin with a quick example of small things you can do to ensure that your application is screen size and orientation independent. I've covered a few of these in the past and will continue bringing these up to remind Windows Mobile developers of its importance.
As most of you know by now, Windows Mobile devices are shipping in an increasing number of shapes and sizes. There are several things you can do to ensure that your application displays correctly on the various screen sizes.
Let's look at my demo. I wrote this little managed app named Who I Know to help locate coworkers all over Microsoft's huge Redmond campus. By typing in a building number, I get a list of friends in that building.
Take a look at the ListView control that displays people's names and office numbers. Knowing what I know about all the different screen sizes (240x320, 240x240, 480x640 etc.) I wouldn't want to simply place the control on the form with an arbitrary size. No matter what size I made the control in Visual Studio's designer, it won't look good on all devices. For example, if I designed it for a portrait screen as shown above, it won't fit on a square screen. If I designed for a square screen, I'm wasting screen space on a QVGA screen. Ideally, I want the ListView control to resize itself to fit available space regardless of the screen size. So in landscape mode, it should look like this:
Docking and anchoring support in .NET Compact Framework 2.0 makes this possible to a certain extent. But it doesn't do all the work for you. Try creating a user interface like the one above using only docking and anchoring and you'll see why. To make it work right you have to write some code, but it isn't rocket science. Simply add some custom handling to the Resize event. Here's what I did:
private void MainForm_Resize(object sender, EventArgs e)
{
listView1.Width = Width;
listView1.Height = Height - listView1.Top;
columnHeader1.Width = listView1.Width - columnHeader2.Width - 10;
}
Hopefully the code is self-explanatory. I'm simply setting the ListView's width to be the form's width. This probably sounds trivial, but it's something you should invest some time doing to ensure that your application takes full advantage of available screen space.
Another benefit of laying out your user interface at runtime is that you can minimize the need for separate Pocket PC and Smartphone projects. By utilizing the technique described here and not hard-coding control sizes, I'm able to use the same binary on any Pocket PC or Smartphone device available on the market today. Here are screenshots of the same .exe running on a couple of Windows Mobile Smartphone form factors.
