icrosoft recently unveiled the Windows Mobile 2003 Second Edition, which supports different screen orientations and higher resolution display for mobile devices. The new screen orientation capability means you can view your Pocket PC either in Portrait or Landscape mode. Landscape mode is particularly useful for Web browsing, where pages generally display better in a wide-format perspective.
Despite the new updated platform, there is no accompanying new Pocket PC SDK that allows you to take advantage of the new features of the platform. The good news is that you can use some techniques in the .NET Compact Framework to do this instead, and I’ll discuss those techniques in this article.
|What You Need|
I’ll begin demonstrating how to build screen-aware applications in a moment, but first you should know that when you install the .NET Compact Framework (or deploy/debug an application from Visual Studio .NET 2003) for the first time, you will see an error message (see Figure 1).
|Figure 1. Initial Error: This is the error message you’ll get when you install the .NET Compact Framework for the first time.|
This is no cause for concern. Basically, any application that was not built using the latest Pocket PC 2003 Second Edition SDK (which basically means all applications, at the moment, by the way) will be deemed to be not “screen orientation-aware” and thus not able to display correctly in landscape mode.
This error message will also be shown once when an application is installed. Before you deploy any new application using the new functionality, you’ll want to disable the error message. To prevent this error message from displaying when the user installs your application, locate the .inf file in your application’s objRelease folder and set the BuildMax value to one of the following:
Application supports square screens (240×240 pixels).
Application supports screen rotation.
Application supports square screens and screen rotation.
For example, if my application supports both square screens and screen rotation, I will add the appropriate BuildMax value to my .inf file:
Once the changes are made, rebuild the CAB files.
Creating Screen Orientation-aware Applications
|Figure 2. Old Faithful: An older application designed to fit in Portrait mode only.|
To make your application screen orientation-aware, you need to be able to trap the Resize event that is raised when the screen of a Pocket PC is rotated. To help you test your modified application, you need to download the new emulator images. These images emulate the new capabilities of Windows Mobile Second Edition. They should assist you in testing your reformulated applications to run on the Windows Mobile Second Edition emulators.
To show you how to create a screen orientation-aware application, I loaded an existing application that I have built (see Figure 2). The application was originally designed for Portrait mode display.
If a user were to run this application on a Windows Mobile 2003 Second Edition device and then switch to landscape mode, the placement of the various control would be awkward (see Figure 3). Note that the form is now scrollable.
|Figure 3. Bad Form: Here’s the same Portrait-mode application from Figure 2, shown in Landscape mode with no modifications.|
It would be much better if this application were redesigned with the controls repositioned appropriately depending on which mode the user chooses. To do this, you would add another form to your project and copy and paste the controls from the original currency converter form to it. Next, adjust the new form to a dimension of 320×240. (I used trial-and-error to arrive at that size, by deploying the new form onto the emulator to get the ideal dimension.) Figure 4 shows the layout of the new form.
|Figure 4. A Better Layout: The controls from the application in Figure 2 are now repositioned to work better in Landscape mode.|
The aim of using a second form to re-layout the controls is to get the exact new positions of the controls. If you open up the code-behind of Form2 and expand on the region “Windows Form Designer generated code,” you will see the InitializeComponent() method (see Figure 5).
Within the InitializeComponent() method you will see the settings of each control, including their locations and sizes:
...Me.TabPage1.Location = New _ System.Drawing.Point(4, 4)Me.TabPage1.Size = New _ System.Drawing.Size(312, 162)Me.TabPage1.Text = "Conversion"...
|Figure 5. Code Behind: By looking at the code behind for the new form, you can get the settings for the new positions of the controls.|
What you need to do now is to copy out the statements that set the size and location of each control that changes position when the device changes orientation.
Back in the original form (designed in Portrait mode), switch to code edit mode and create two subroutines:
- Private Sub LandscapeMode()
- Private Sub PortraitMode()
Paste the code that you have copied from Form2 into the LandscapeMode() subroutine. This routine will reposition the control on your form for landscape mode. For the PortraitMode() subroutine, copy and paste the block of statements that set the size and location of each control in the original form’s InitiatizeComponent() method (since the original design was for Portrait mode).
|Figure 6. Two Faced: The application now switches between Portrait and Landscape modes effortlessly.|
To change the layout of the controls when the Pocket PC changes its screen orientation, service the Resize() event of Form1:
Private Sub Form1_Resize(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles MyBase.Resize If (Screen.PrimaryScreen.Bounds.Width > _ Screen.PrimaryScreen.Bounds.Height) Then ' switch to landscape mode LandscapeMode() Else ' switch to portrait mode PortraitMode() End IfEnd Sub
That’s it! Your application is now screen orientation-aware and the controls will re-position themselves when the user switches the mode (see Figure 6).
Hidden Controls and Images
Prior to the Windows Mobile 2003 Second Edition, all applications were displayed in Portrait mode. And so developers often adopted the practice of leaving unused controls outside the boundary of the displayable form (see Figure 7).
|Figure 7. Dust Bunnies: “Hidden” controls left off to the sides in the Portrait mode show up in funny places when the app is switched to Landscape.|
If this is a practice that effects your apps, it’s time to do some housekeeping! While controls left to the side in Portrait mode are always safely “hidden” in devices that only support Portrait mode, if the same application is executed on a Windows Mobile 2003 Second Edition device, all the unused controls will be seen if the user changes the screen orientation.
Programmatically Rotate the Screen
While Microsoft does not recommend that you unnecessarily rotate the screen of your application, you may need to do so at times. Unfortunately, the .NET Compact Framework does not have managed classes to do the screen rotation programmatically. And so, as you might have guessed it, Platform Invoke (P/Invoke) is the way to go. Because of the data types marshalling problem, invoking the ChangeDisplaySettingsEx() function to rotate the screen is quite a lengthy affair.
|Figure 8. Rotating the Screen: Here I’ve added the C# class that programmatically rotates the screen into the project.|
Fortunately, a fellow MVP?Alex Feinman (a member of the OpenNETCF.org Advisory Board has been very helpful to write a sample in C# (and has given me his permission to modify it for use in this article). I modified his sample and encapsulated the main code into a class so that you can just reference it directly in your project. Listing 1 shows the class in C# that allows you to programmatically rotate the screen.
To compile the class in Listing 1, simply create a new Smart Device application and select the Class Library project type. Copy and paste the code into the class1.cs file and then build the project.
To demonstrate screen rotation, I built a new VB.NET Pocket PC application and added a reference to the C# class shown above. (I named this application ScnOrientation, see Figure 8).
And I populated my Pocket PC Windows form with four Button controls (see Figure 9).
|Figure 9. Adding Buttons: These four new buttons are added to allow the user to dynamically reorient the screen.|
To change the screen mode, use the function in Listing 2, which services the click events of the four Button controls.
You can now rotate the screen using the four buttons (see Figure 10).
|Figure 10. 360: You can rotate the screen all you like.|
Windows Mobile Second Edition gives mobile developers a big advantage: You can deliver the latest capabilities of the latest devices?devices that will appear in the market for the next few months. While most current application will run without problem in the newer OS, you should really put the time in to modify your application to capitalize on the larger and more flexible Landscape screen configuration. Unfortunately, the .NET Compact Framework has been a little slow to catch up on the changes and requires some nifty coding to get some of the features to work. But you should now have the information you need to get past any initial roadblocks.