Targeting WVGA Screens on Windows Mobile/Smartphone

I wrote a post recently here. I showed a simple technique for supporting multiple screen resolutions when writing GDI code on Windows Mobile. The code doesn't change even with the new WVGA screens (640x800) coming to market. I've copied the code here:

private int DESIGNPOINTSPERINCH = 96;

protected override void OnPaint(PaintEventArgs e)
{    
       Graphics grfx = e.Graphics;    
       Brush foreColorBrush = new SolidBrush(Color.Black);
       Font boldFont = new Font(Font.Name, 20, FontStyle.Bold);
       grfx.DrawString("Hello World!", 
                        boldFont, foreColorBrush,
                        20 * grfx.DpiY / DESIGNPOINTSPERINCH,
                        20 * grfx.DpiY / DESIGNPOINTSPERINCH);    
       boldFont.Dispose();    
       foreColorBrush.Dispose();         
}

Targeting both VGA and QVGA Screens

I have written some previous articles on GDI about one thing or another in the past, but never mentioned the simple practice of ensuring your code will display correctly under all screen types. Even though the code I have posted contains this practice I have never made a point of it.
It is very simple. Carry out the following steps:

1. Declare a constant that defines the points per inch you intend to design your control. In the example below, I have used 96dpi which is a QVGA screen (320x240) which is the majority of devices on the market today.

private int DESIGNPOINTSPERINCH = 96;

2. The example below shows the OnPaint method with a simple piece of code that displays "Hello World!" 20 dpi from the left and top edge of the screen.

protected override void OnPaint(PaintEventArgs e)
{
    Graphics grfx = e.Graphics;
    Brush foreColorBrush = new SolidBrush(Color.Black);              
    Font boldFont = new Font(Font.Name, 20, FontStyle.Bold);    
    grfx.DrawString("Hello World!",
                    boldFont,
                    foreColorBrush,
                    20 * grfx.DpiY / DESIGNPOINTSPERINCH,
                    20 * grfx.DpiY / DESIGNPOINTSPERINCH);
    boldFont.Dispose();
    foreColorBrush.Dispose();
    grfx.Dispose();
}

Now try running the above code on a VGA and QVGA device, you'll see the position will be proportional to the screen size. This technique becomes very handy when the positioning is very important such as owner drawn lists etc.

Calculating the length of Text using GDI

I'd like to show a simple example of calculating the length of text which is very handy when building your own controls. This technique works with either version of the framework (desktop or compact).

Take the following control I designed below. Notice how the top line which contains the description is too long for the width of the screen space, so a "..." has been appended to the description. This makes much easier reading.

The code is very simple. Something like the following would need to be added to your OnPaint method of your user control class:

protected override void OnPaint(PaintEventArgs e)
{
   Color fontColor;
   int descriptionLength;
   int periodsWidth;
   int maxDisplayableDesc;
   bool truncated;
   Graphics grfx = e.Graphics;
   int clientWidth =
    this.ClientSize.Width - (this.VScrollBar.Visible ? this.VScrollBar.Width : 0);

   //Foreach item in your user control do the following:
   string description = assignmentListItem.Description;
   periodsWidth =
   (int)(_grfx.MeasureString("...  ", boldFont).Width);
   descriptionLength = (int)(grfx.MeasureString(description, boldFont).Width);
   maxDisplayableDesc = clientWidth - periodsWidth;
   index = description.Length;
   truncated = false;
   if (descriptionLength +
     (DRAWX_OFFSET * _grfx.DpiX / DESIGNPOINTSPERINCH)
      > maxDisplayableDesc)
     truncated = true;

   while (descriptionLength +
      (DRAWX_OFFSET * _grfx.DpiX / DESIGNPOINTSPERINCH) > maxDisplayableDesc)
   {
      description = description.Substring(0, index - 1);
      index--;
      descriptionLength =
      (int)(_grfx.MeasureString(description.Substring(0, index - 1),
          boldFont).Width);
   }

   if (truncated)
      description = description + "...";

   //Draw the description.
   grfx.DrawString(description,
                   boldFont,
                   foreColor,
                   DRAWX_OFFSET * _grfx.DpiY / DESIGNPOINTSPERINCH,
                   itemTop + (DRAWY_OFFSET * _grfx.DpiY / DESIGNPOINTSPERINCH));

   grfx.Dispose();
}        

Of course as you can see the code above is massively cutdown and only focuses on the actual calculation of whether the text will fit within the screen space and if it doesn't, how many characters can we display before we run off the edge of the screen. This is assuming you are using a non-proportional font which is what the code was designed to work with. In fact an improvement would be to check what the typeface font is before doing the character-by-character calculation.