Put Your Apps on the Landscape with Windows Mobile 2003 Second Edition : Page 2

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 320x240. (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 If
End 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).

Previous Page

Next Page