Creating transparent buttons, panels and other control with Compact Framework and putting one into other

In WPF/Silverlight world it's very simple to make transparent controls and put anything inside anything. However, that's not the situation in WinForms, and even worth in the world of compact devices with CF. Within this worlds, there is only one way to make controls transparent - to use color masks. Today, we'll create transparent controls with Compact Framework and put it into panel, which has image background.

So let's start. First of all, we need create our own control. For this purpose, we have to inherit from Control and override couple of things. More precise: OnPaint and OnPaintBackground. We do not want to paint background for transparent control, so let's prevent it.

public class TransparentImageButton : Control

protected override void OnPaintBackground(PaintEventArgs e) {
           //prevent
       }

       protected override void OnPaint(PaintEventArgs e) {

Next, we have to get graphics, delivered by OnPain event argument and draw our image over it. However, BitBlt (which is used by core graphics system) is not very fast method, so it's better for us to draw everything first and then copy final image to the device.

Graphics gxOff;
Rectangle imgRect;
var image = (_isPressed && PressedImage != null) ? PressedImage : Image;

if (_imgOffscreen == null) {
_imgOffscreen = new Bitmap(ClientSize.Width, ClientSize.Height);
}

gxOff = Graphics.FromImage(_imgOffscreen);
gxOff.Clear(this.BackColor);  
...
         

if (image != null) {
var imageLeft = (this.Width - image.Width) / 2;
var imageTop = (this.Height - image.Height) / 2;

if (!_isPressed) imgRect = new Rectangle(imageLeft, imageTop, image.Width, image.Height);
else imgRect = new Rectangle(imageLeft + 1, imageTop + 1, image.Width, image.Height);
var imageAttr = new ImageAttributes();

To make images transparent, we have to use (as mentioned earlier) transparency color key (to tell windows what color it should not draw. We can code or provide this value to detect it by hitting any pixel on the image. Just like this:

public static Color BackgroundImageColor(this Bitmap bmp) {
           return bmp.GetPixel(0, 0);
       }

Now we can keep working.

imageAttr.SetColorKey(image.BackgroundImageColor(), image.BackgroundImageColor());
gxOff.DrawImage(image, imgRect, 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, imageAttr);
} if (_isPressed) {
var rc = this.ClientRectangle;
  rc.Width--;
  rc.Height--;
  gxOff.DrawRectangle(new Pen(Color.Black), rc);
}
e.Graphics.DrawImage(_imgOffscreen, 0, 0);

Also, we have to provide others with possibility to handle this even too, thus we will not forget to add base.OnPaint(e); at  the end.

Next step is to detect whether our button is clicked or not. We'll override keyboard and mouse events to detect this.

protected override void OnKeyDown(KeyEventArgs e) {
            _isPressed = this.Focused; this.Invalidate();
            base.OnKeyDown(e);
        }

        protected override void OnKeyUp(KeyEventArgs e) {
            _isPressed = false; this.Invalidate();
            base.OnKeyUp(e);
        }

        protected override void OnMouseDown(MouseEventArgs e) {
            _isPressed = this.Focused; this.Invalidate();
            base.OnMouseDown(e);
        }

        protected override void OnMouseUp(MouseEventArgs e) {
            _isPressed = false; this.Invalidate();
            base.OnMouseUp(e);
        }

Compile and run to see no problem, when our transparent button lies on solid color control, however, we want to put it into panel with background - just like this one. In this case, you can use real transparent PNG and GIF images, also you can replace transparent color with well known Magenta (or any other color).

public class ImagePanel : Panel {

        public Bitmap Image { get; set; }

        protected override void OnPaintBackground(PaintEventArgs e) {
            e.Graphics.DrawImage(Image, 0, 0);
        }
    }

When we'll put it onto anything, that has no background color, we'll see that our "fake transparency" disappears. Why this happen? To provide transparency Windows uses color masks, also while confederating facts, clipping algorithm within GDI is not very trustful, thus the only thing can be taken into account is color. But what to do if we have an image? We should clip it manually. We cannot just get the handle to parent device surface (see above about trustful GDI), so the only way to do it is by providing something, that we know for sure. For example interface, telling us, that parent has image, which drawn on the screen.

internal interface IHaveImage {
        Bitmap Image { get; set; }
    }

When we know it, all we have to do is to clip the region of this image (not device context) and draw it as part of our really transparent control.

if (this.Parent is IHaveImage) {
                var par = this.Parent as IHaveImage;
                gxOff.DrawImage(par.Image.Clip(this.Bounds), 0, 0);
            }

The implementation of Image.Clip is very straight forward.

public static Bitmap GetSS(this Graphics grx, Rectangle bounds) {
    var res = new Bitmap(bounds.Width, bounds.Height);
    var gxc = Graphics.FromImage(res);
    IntPtr hdc = grx.GetHdc();
    PlatformAPI.BitBlt(gxc.GetHdc(), 0, 0, bounds.Width, bounds.Height, hdc, bounds.Left, bounds.Top, PlatformAPI.SRCCOPY);
    grx.ReleaseHdc(hdc);
    return res;
}

public static Bitmap Clip(this Bitmap source, Rectangle bounds) {
    var grx = Graphics.FromImage(source);
    return grx.GetSS(bounds);
}

We done. Compiling all together will fake transparency for controls, even when it's parents background is not pained with  solid color brush.

Source code for this article

P.S. Do not even try to inherit your custom Button control from framework Button class, dev team "forgot" to expose it's event for override. So, OnPaint, OnPaintBackground, OnKeyUp, OnKeydown, OnMouseUp and OnMouseDown aside with most of other base events will not work for you, also BaseButton class has no default constructor, so the only class you can inherit from is Control.

Have a nice day and be good people.