In this article I would like to demonstrate how to do custom drawing in the ListView control that the .NET Compact Framework provides. I'll be extending the code I published previously in the article entitled ListView Extended Styles in .NETCF

This is normally a very tedious and frustrating task to do and to accomplish this task we'll have to take advantage of the custom drawing service Windows CE provides for certain controls. A very good reference for custom drawing is an MSDN article called Customizing a Control's Appearance using Custom Draw. Before going any further, I may have to warn you about the extensive interop code involved in this task.

We'll have to handle the ListView windows messages ourselves, and we accomplish this by subclassing this ListView. Subclassing a window means that we assign a new window procedure for messages that are meant for the ListView. This can be done through the SetWindowLong() method with the GWL_WNDPROC parameter. When subclassing, the developer is responsible for choosing which messages they want to handle, which to ignore, and which they let operating system handle. To have the operating system handle the message, a call to CallWindowProc() is done using a pointer to original window procedure.

Before setting the new window procedure its important to get a pointer to the original one in case the developer wishes to let the operating system handle the message. This is done through GetWindowLong()Let's get started...First we need to define the interop structures for custom drawing

    struct RECT

    {

        public int left;

        public int top;

        public int right;

        public int bottom;

    }

    struct NMHDR

    {

        public IntPtr hwndFrom;

        public IntPtr idFrom;

        public int code;

    }

    struct NMCUSTOMDRAW

    {

        public NMHDR nmcd;

        public int dwDrawStage;

        public IntPtr hdc;

        public RECT rc;

        public int dwItemSpec;

        public int uItemState;

        public IntPtr lItemlParam;

    }

    struct NMLVCUSTOMDRAW

    {

        public NMCUSTOMDRAW nmcd;

        public int clrText;

        public int clrTextBk;

        public int iSubItem;

        public int dwItemType;

        public int clrFace;

        public int iIconEffect;

        public int iIconPhase;

        public int iPartId;

        public int iStateId;

        public RECT rcText;

        public uint uAlign;

    }

Note: In C# (and VB and C++), the StructLayout is Sequencial by default, hence I didn't state itThe P/Invoke declarations we need are the following: 

    [DllImport("coredll.dll")]

    static extern IntPtr CallWindowProc(IntPtr lpPrevWndFunc, IntPtr hWnd, uint Msg, IntPtr wParam, IntPtr lParam);

    [DllImport("coredll")]

    static extern int SendMessage(IntPtr hWnd, int Msg, int wParam, ref RECT lParam);

    [DllImport("coredll.dll")]

    static extern uint SendMessage(IntPtr hwnd, uint msg, uint wparam, uint lparam);

    [DllImport("coredll.dll", SetLastError = true)]

    static extern int SetWindowLong(IntPtr hWnd, int nIndex, WndProcDelegate newProc);

    [DllImport("coredll.dll", SetLastError = true)]

    static extern IntPtr GetWindowLong(IntPtr hWnd, int nIndex);

And to make life a bit easier, I created some extension methods to the RECT struct we just defined.

     static class RectangleExtensions

    {

        public static Rectangle ToRectangle(this RECT rectangle)

        {

            return Rectangle.FromLTRB(rectangle.left, rectangle.top, rectangle.right, rectangle.bottom);

        }

        public static RectangleF ToRectangleF(this RECT rectangle)

        {

            return new RectangleF(rectangle.left, rectangle.top, rectangle.right, rectangle.bottom);

        }

    }

We'll need the following constants defined in the Platform SDK 

    const int GWL_WNDPROC = -4;

    const int WM_NOTIFY = 0x4E;

    const int NM_CUSTOMDRAW = (-12);

    const int CDRF_NOTIFYITEMDRAW = 0x00000020;

    const int CDRF_NOTIFYSUBITEMDRAW = CDRF_NOTIFYITEMDRAW;

    const int CDRF_NOTIFYPOSTPAINT = 0x00000010;

    const int CDRF_SKIPDEFAULT = 0x00000004;

    const int CDRF_DODEFAULT = 0x00000000;

    const int CDDS_PREPAINT = 0x00000001;

    const int CDDS_POSTPAINT = 0x00000002;

    const int CDDS_ITEM = 0x00010000;

    const int CDDS_ITEMPREPAINT = (CDDS_ITEM | CDDS_PREPAINT);

    const int CDDS_SUBITEM = 0x00020000;

    const int CDIS_SELECTED = 0x0001;

    const int LVM_GETSUBITEMRECT = (0x1000 + 56);

Custom drawing in the ListView will only work in the Details view mode. To ensure this, I set the View to View.Details in the constructor method. Since I'm extending my old ListViewEx (Enables ListView Extended Styles) I'm gonna enable Double buffering, Grid lines, and the Gradient background. I'm gonna enable subclassing on the ListView only when the parent is changed, this is because I need to receive messages sent to the parent control of the ListView. We also need a delegate for the new window procedure and a pointer to the original window procedure. And last but not the least we need the actual window procedure method. 

    delegate IntPtr WndProcDelegate(IntPtr hWnd, uint msg, IntPtr wParam, IntPtr lParam);

    IntPtr lpPrevWndFunc;

    public ListViewCustomDraw()

    {

        View = View.Details;

        DoubleBuffering = true;

        GridLines = true;

        Gradient = true;

        ParentChanged += delegate

        {

            lpPrevWndFunc = GetWindowLong(Parent.Handle, GWL_WNDPROC);

            SetWindowLong(Parent.Handle, GWL_WNDPROC, WndProc);

        };

    }

    private IntPtr WndProc(IntPtr hWnd, uint msg, IntPtr wParam, IntPtr lParam)

    {

        if (msg == WM_NOTIFY)

        {

            var nmhdr = (NMHDR)Marshal.PtrToStructure(lParam, typeof(NMHDR));

            if (nmhdr.hwndFrom == Handle && nmhdr.code == NM_CUSTOMDRAW)

                return CustomDraw(hWnd, msg, wParam, lParam);

        }

        return CallWindowProc(lpPrevWndFunc, hWnd, msg, wParam, lParam);

    }

In the new window procedure, we are only really interested in the WM_NOTIFY message, because this is what the NM_CUSTOMDRAW message is sent through. The LPARAM parameter of the message will contain the NMHDR which then contains the NM_CUSTOMDRAW message. The LPARAM also contains the NMLVCUSTOMDRAW which provide state and information about the ListView.

The trickiest part in performing custom drawing in the ListView is handling the drawing stage. We create a method called CustomDraw to handle the different drawing stages of the ListView 

    private IntPtr CustomDraw(IntPtr hWnd, uint msg, IntPtr wParam, IntPtr lParam)

    {

        int result;

        var nmlvcd = (NMLVCUSTOMDRAW)Marshal.PtrToStructure(lParam, typeof(NMLVCUSTOMDRAW));

        switch (nmlvcd.nmcd.dwDrawStage)

        {

            case CDDS_PREPAINT:

                result = CDRF_NOTIFYITEMDRAW;

                break;

            case CDDS_ITEMPREPAINT:

                var itemBounds = nmlvcd.nmcd.rc.ToRectangle();

                if ((nmlvcd.nmcd.uItemState & CDIS_SELECTED) != 0)

                {

                    using (var brush = new SolidBrush(SystemColors.Highlight))

                    using (var graphics = Graphics.FromHdc(nmlvcd.nmcd.hdc))

                        graphics.FillRectangle(brush, itemBounds);

                }

                result = CDRF_NOTIFYSUBITEMDRAW;

                break;

            case CDDS_SUBITEM | CDDS_ITEMPREPAINT:

                var index = nmlvcd.nmcd.dwItemSpec;

                var rect = new RECT();

                rect.top = nmlvcd.iSubItem;

                SendMessage(Handle, LVM_GETSUBITEMRECT, index, ref rect);

                rect.left += 2;

                Color textColor;

                if ((nmlvcd.nmcd.uItemState & CDIS_SELECTED) != 0)

                    textColor = SystemColors.HighlightText;

                else

                    textColor = SystemColors.ControlText;

                using (var brush = new SolidBrush(textColor))

                using (var graphics = Graphics.FromHdc(nmlvcd.nmcd.hdc))

                    graphics.DrawString(Items[index].SubItems[nmlvcd.iSubItem].Text,

                                        Font,

                                        brush,

                                        rect.ToRectangleF());

                result = CDRF_SKIPDEFAULT | CDRF_NOTIFYSUBITEMDRAW;

                break;

            default:

                result = CDRF_DODEFAULT;

                break;

        }

        return (IntPtr)result;

    }

In the first stage we handle is the CDDS_PREPAINT. Here we return CDRF_NOTIFYITEMDRAW to tell that we want to handle drawing of the row ourselves. After this we receive the CDDS_ITEMPREPAINT where we can draw the entire row.

We check if the row is selected through the uItemState field of NMCUSTOMDRAW, if this field has the CDIS_SELECTED flag then it means the item is selected, hence we draw a fill rectangle. After handling the CDDS_ITEMPREPAINT, we return CDRF_NOTIFYSUBITEMDRAW to tell that we want to draw the sub items ourselves.

For drawing the sub items we need to handle CDDS_SUBITEM | CDDS_ITEMPREPAINT. We can get the position index of the item through the dwItemSpec field of NMCUSTOMDRAW. To get the bounds of the current sub item we send the LVM_GETSUBITEMRECT message to the ListView and pass a pointer to RECT as the LPARAM. Before sending this message, set the "top" field of the RECT to the index of the sub item (retrieved from iSubItem field of NMLVCUSTOMDRAW. After drawing the sub item we return CDRF_SKIPDEFAULT | CDRF_NOTIFYSUBITEMDRAW to tell that we only care about handling the next sub item.

Well I hope you guys find this interesting and helpful. To keep things simple, I only demonstrated displaying plan text and a plain rectangle for the selection.

If you're interested in the full source code then you can grab it here.

In this short entry I'd like to demonstrate how to display a background image in the ListView control. For this we will send the LVM_SETBKIMAGE or the LVM_GETBKIMAGE message to the ListView control with the LVBKIMAGE struct as the LPARAM. Unfortunately, the Windows CE version of LVBKIMAGE does not support LVBKIF_SOURCE_URL flag which allows using an image file on the file system for the background image of the ListView.

The layout of the background image can be either tiled or specified by an offset percentage. The background image is not affected by custom drawing, unless of course you decide to fill each sub item rectangle. For setting the background image we use the LVBKIF_SOURCE_HBITMAP flag together with the layout which is either LVBKIF_STYLE_TILE or LVBKIF_STYLE_NORMAL. If we set the layout to LVBKIF_STYLE_NORMAL, then we have the option of setting where the image will be drawn by setting the value of xOffsetPercentage and yOffsetPercentage.

In this example I'd like to make use of extension methods to add the SetBackgroundImage() and GetBackgroundImage() methods to ListView. This can of course be easily used to in a property to an inherited ListView. 

public static class ListViewExtensions

{

    [DllImport("coredll")]

    static extern int SendMessage(IntPtr hWnd, int Msg, int wParam, ref LVBKIMAGE lParam);

    const int LVM_FIRST = 0x1000;

    const int LVM_SETBKIMAGE = (LVM_FIRST + 138);

    const int LVM_GETBKIMAGE = (LVM_FIRST + 139);

    const int LVBKIF_SOURCE_NONE = 0x00000000;

    const int LVBKIF_SOURCE_HBITMAP = 0x00000001;

    const int LVBKIF_STYLE_TILE = 0x00000010;

    const int LVBKIF_STYLE_NORMAL = 0x00000000;

    struct LVBKIMAGE

    {

        public int ulFlags;

        public IntPtr hbm;

        public IntPtr pszImage; // not supported

        public int cchImageMax;

        public int xOffsetPercent;

        public int yOffsetPercent;

    }

    public static void SetBackgroundImage(this ListView listView, Bitmap bitmap)

    {

        SetBackgroundImage(listView, bitmap, false);

    }

    public static void SetBackgroundImage(this ListView listView, Bitmap bitmap, bool tileLayout)

    {

        SetBackgroundImage(listView, bitmap, tileLayout, 0, 0);

    }

    public static void SetBackgroundImage(

        this ListView listView,

        Bitmap bitmap,

        bool tileLayout,

        int xOffsetPercent,

        int yOffsetPercent)

    {

        LVBKIMAGE lvBkImage = new LVBKIMAGE();

        if (bitmap == null)

            lvBkImage.ulFlags = LVBKIF_SOURCE_NONE;

        else

        {

            lvBkImage.ulFlags = LVBKIF_SOURCE_HBITMAP | (tileLayout ? LVBKIF_STYLE_TILE : LVBKIF_STYLE_NORMAL);

            lvBkImage.hbm = bitmap.GetHbitmap();

            lvBkImage.xOffsetPercent = xOffsetPercent;

            lvBkImage.yOffsetPercent = yOffsetPercent;

        }

        SendMessage(listView.Handle, LVM_SETBKIMAGE, 0, ref lvBkImage);

    }

    public static Bitmap GetBackgroundImage(this ListView listView)

    {

        LVBKIMAGE lvBkImage = new LVBKIMAGE();

        lvBkImage.ulFlags = LVBKIF_SOURCE_HBITMAP;

        SendMessage(listView.Handle, LVM_GETBKIMAGE, 0, ref lvBkImage);

        if (lvBkImage.hbm == IntPtr.Zero)

            return null;

        else

            return Bitmap.FromHbitmap(lvBkImage.hbm);

    }

}

class ListViewEx : ListView

{

    public Bitmap BackgroundImage

    {

        get { return this.GetBackgroundImage(); }

        set { this.SetBackgroundImage(value, BackgroundLayout == BackgroundImageLayout.Tile); }

    }

    public BackgroundImageLayout BackgroundLayout { get; set; }

    public enum BackgroundImageLayout

    {

        Tile,

        Center

    }

}

On the 28th of February 2008, Microsoft Denmark will have the first and largest online launch for Windows Server 2008, SQL Server 2008, and Visual Studio 2008. We made a few webcasts related to the products and technologies to be released. Here's one that I made entitled "Unit Testing for Smart Devices"

http://blogs.commentor.dk/downloads/smart_device_unit_testing.wmv

I work a lot with a graphic artist for developing solutions. The better the graphic artist you work with is, the harder it is to implement their designs to your application. One thing that my solutions have in common is that they all require transparent controls. My graphic artist loves having a image buttons on top of fancy background.

Here's some screen shots of what I've made with my graphic artist:

In these screen shots I heavily use a transparent label control over a Form that has a background image. I normally set my controls to be designer visible so I can drag and drop while designing. Visual Studio 2005 and 2008 will automatically load all Custom Controls and UserControls

Implementing Transparent Controls

For creating transparent controls, I need the following:

1) IControlBackground interface - contains BackgroundImage { get; }
2) TransparentControlBase - draws the BackgroundImage of an IControlBackground form
3) Transparent Control - Inherits from TransparentControlBase
4) FormBase Form - implements IControlBackground and draws the background image to the form

Let's start off with the IControlBackground interface. Like I mentioned above, it only contains a property called BackgroundImage.

public interface IControlBackground
{
  Image BackgroundImage { get; }
}

Next we will need to create the TransparentControlBase. Let's create a class that inherits from Control. We then need to override the OnPaintBackground() event to draw the IControlBackground.BackgroundImage of the Parent control. To do this, we create an instance of IControlBackground from the Parent. Once we have the BackgroundImage, we draw part of the BackgroundImage where the transparent control is lying on.

We also override the OnTextChanged() and OnParentChanged() events to force a re-draw whenever the text or parent of the control is changed.

public class TransparentControlBase : Control
{
  protected bool HasBackground = false;

  protected override void OnPaintBackground(PaintEventArgs e)
  {
    IControlBackground form = Parent as IControlBackground;
    if (form == null) {
      base.OnPaintBackground(e);
      return;
    } else {
      HasBackground = true;
    }

    e.Graphics.DrawImage(
      form.BackgroundImage,
      0,
      0,
      Bounds,
      GraphicsUnit.Pixel);
  }

  protected override void OnTextChanged(EventArgs e)
  {
    base.OnTextChanged(e);
    Invalidate();
  }

  protected override void OnParentChanged(EventArgs e)
  {
    base.OnParentChanged(e);
    Invalidate();
  }
}

Now we need to create a control that inherits from TransparentControlBase. I'll create a simple TransparentLabel control for this example. The control will have the same behavior as the standard Label control, except that it can be transparent when used over a form or control that implements IControlBackground.

public class TransparentLabel : TransparentControlBase
{
  ContentAlignment alignment = ContentAlignment.TopLeft;
  StringFormat format = null;
  Bitmap off_screen = null;

  public TransparentLabel()
  {
    format = new StringFormat();
  }

  public ContentAlignment TextAlign
  {
    get { return alignment; }
    set
    {
      alignment = value;
      switch (alignment) {
        case ContentAlignment.TopCenter:
          format.Alignment = StringAlignment.Center;
          format.LineAlignment = StringAlignment.Center;
          break;
        case ContentAlignment.TopLeft:
          format.Alignment = StringAlignment.Near;
          format.LineAlignment = StringAlignment.Near;
          break;
        case ContentAlignment.TopRight:
          format.Alignment = StringAlignment.Far;
          format.LineAlignment = StringAlignment.Far;
          break;
      }
    }
  }

  protected override void OnPaint(PaintEventArgs e)
  {
    if (!base.HasBackground) {
      if (off_screen == null) {
        off_screen = new Bitmap(ClientSize.Width, ClientSize.Height);
      }
      using (Graphics g = Graphics.FromImage(off_screen)) {
        using (SolidBrush brush = new SolidBrush(Parent.BackColor)) {
          g.Clear(BackColor);
          g.FillRectangle(brush, ClientRectangle);
        }
      }
    } else {
      using (SolidBrush brush = new SolidBrush(ForeColor)) {
        e.Graphics.DrawString(
          Text,
          Font,
          brush,
          new Rectangle(0, 0, Width, Height),
          format);
      }
    }
  }
}

Now that we have our transparent controls, we need to create a Form that will contain these controls. First we need to create a base class that will implement IControlBackground and inherit from Form.

In this example, I added a background image to the solution and as an embedded resource. My default namespace is called TransparentSample and my background image is located at the root folder with the filename background.jpg

public class FormBase : Form, IControlBackground
{
  Bitmap background;

  public FormBase()
  {
    background = new Bitmap(
      Assembly.GetExecutingAssembly().GetManifestResourceStream(
      "TransparentSample.background.jpg"));
  }

  protected override void OnPaint(PaintEventArgs e)
  {
    e.Graphics.DrawImage(background, 0, 0);
  }

  public Image BackgroundImage
  {
    get { return background; }
  }
}

For the last step, we need to create a Form that will contain these transparent controls. To start, let's add a new Form to our project and let it inherit from FormBase instead of Form.

Now we can add our transparent controls to the main form.

public class MainForm : FormBase
{
  TransparentLabel label;

  public MainForm()
  {
    label = new TransparentLabel();
    label.Font = new Font("Arial", 16f, FontStyle.Bold);
    label.ForeColor = Color.White;
    label.Text = "Transparent Label";
    label.Bounds = new Rectangle(20, 60, 200, 50);
    Controls.Add(label);
  }
}

That wasn't very complicated, was it? Having a nice and intuitive UI offers a very good user experience. Being creative, imaginative, and learning to work with a graphic artist can really pay off.