Programming Windows Mobile 5.0 Applications Using the .NET Compact Framework (Cont.) Screen Orientation Beginning with Windows Mobile 2003 Second Edition, devices now support portrait and landscape screen orientations. Developers targeting the latest platform should ensure that their applications are orientation-aware and are able to use the changes in screen estate. To make life simpler for developers, Visual Studio 2005 supports the change of screen orientation during design-time. Using the Rotate Left and Rotate Right buttons, you can change the orientation of the form (Figure 3). 
Figure 3: Changing the orientation of the form during design-time.To ensure that you’ve properly positioned controls on a form during a screen orientation change, you should use the Anchor property of each control to anchor it against the four edges of the form. In the example shown in Figure 3, the three controls are aligned so that a change in screen orientation ensures that the controls display properly. You can anchor the control by modifying the Anchor property (found in the Property window) or set them programmatically during run time, like this: Label1.Anchor = AnchorStyles.Left + _
AnchorStyles.Top
Button1.Anchor = AnchorStyles.Left + _
AnchorStyles.Right + _
AnchorStyles.Top
PictureBox1.Anchor = _
AnchorStyles.Right + _
AnchorStyles.Bottom
You can also manually handle screen orientation by repositioning each control depending on the screen orientation. This method requires more work, but allows you to position the controls wherever they want. To do so, you need to handle the Resize event of the form and then set the Location and Size properties of each control depending on whether it is landscape mode or portrait mode. Private Sub Form1_Resize( _
ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles MyBase.Resize
If Me.Width > Me.Height Then
'---landscape mode---
Me.Label1.Location = New _
System.Drawing.Point(100, 4)
Me.Label1.Size = New _
System.Drawing.Size(100, 20)
Else
'---portrait mode---
Me.Label1.Location = New _
System.Drawing.Point(4, 4)
Me.Label1.Size = New _
System.Drawing.Size(100, 20)
End If
End Sub
Screen Resolution You also need to consider screen resolution when deploying your applications to the newer Windows Mobile devices. Some newer devices in the market come with VGA screen (480*640; 192 dpi). By default, the controls on a form will scale automatically depending on the screen resolution. This behavior is indicated by the AutoScaleMode property, which is set to Dpi by default. That is, a form designed to work on a QVGA screen (240*320; 96 dpi) will appear the same as on a VGA screen. The increase in resolution is to improve the readability of the screen, and not to squeeze more information into the same screen estate. When I test the application shown in Figure 3 on a VGA screen device, notice what happens (Figure 4). 
Figure 4: Testing the application on a VGA-screen device.The Label and TextBox controls scale correctly while the PictureBox control does not automatically scale the image. This is important if you want to target users with different screen resolution. To fix the problem, you need to maintain two different images-one for a QVGA screen and one for a VGA screen. You can detect the type of screen resolution by using the following code segment: If Me.Width = 640 Or _
Me.Width = 480 Then
'---VGA
PictureBox1.Image = New _
Bitmap("\Images\Image_VGA.jpg")
Else
'---QVGA
PictureBox1.Image = New _
Bitmap("\Images\Image_QVGA.jpg")
End If
Data-Binding One significant improvement in the support of mobile development in Visual Studio is drag-and-drop data-binding. Displaying data from a database is now an easy task that requires no more than just some drag-and-drop effort. As an example, you can add a new SQL Mobile database to your application by selecting Data and then choosing Add New Data Source…. Follow the steps in the wizard and add a SQL Mobile database. (A sample Northwind SQL Mobile database shipped with Visual Studio 2005.) Once you’ve added the database to the project, you can drag the data source from the Data Sources window and drop it onto the form (Figure 5). Visual Studio will create a DataGrid control to display the rows of records from the selected database. 
Figure 5: Drag-and-drop data binding.By default, the DataGrid control displays the records in the database in read-only mode. However, you can also make changes to the data in the database. To do so, simply click on the Generate Data Forms… link in the DataGrid’s smart tag (Figure 6) to auto-generate a series of forms that allow users to edit/add records to the database. 
Figure 6: Clicking the Generate Data Forms… link in the DataGrid’s smart tag.Once you’ve done this, you can tap the New menu to add a new record during run time, or simply tap on a record displayed within the DataGrid control to edit its content (Figure 7). 
Figure 7: Adding and editing records. |