As I have shown in several places in the previous parts of this series, the painting of things is always related to the bound of the current item (dialog, control, etc). This approach is essential to handle the quite extensive number of resolutions on WinPhone. That's especially true if you want to support all phones since WinMo 5, and even the non-touch devices. Another important reason is the fact that many devices with non-square screens allow the screen to be rotated between portrait and landscape mode.
The magical event that tells our app about the resolution and any change in orientation is the Resize event, and in the TouchUI sample, the code looks like this:
private void MainForm_Resize(object sender, EventArgs e)
{
Common.Instance.ClientRectangle = Screen.PrimaryScreen.WorkingArea;
if(loaded)
foreach(Dialog dialog in dialogStack)
dialog.Resize(Common.Instance.ClientRectangle);
this.Refresh();
}
The working area of the screen (excluding the title and menu bars) can be retrieved from a static method (PrimaryScreen) on the Screen class (in the System.Windows.Forms namespace). We save that in our app singleton (Common.Instance) and use it to inform all dialogs about the new dimensions.
Each dialog can adapt to the new resolution or orientation, and this is the code in the main dialog:
public override void Resize(Rectangle r)
{
this.Rectangle = r;
scrollList.Rectangle = new Rectangle(0, headerHeight,
r.Width, r.Height - headerHeight);
}
It simply update the bounds of its ScrollList control, that in turn will adapt by using the new dimensions in its Paint method. With these simple measures, the app can run on any device with the same code and even the same executable. Here are some different resolutions and orientation examples...
...and they all have their original resolution in the following order (width x height): 176 x 220 (non-touch), 400 x 240, and 480 x 800 (both touch). The beautiful strawberry graphics is from a photo by Tina Phillips / FreeDigitalPhotos.net.