.NET Windows Forms Transparent Control

Question

I want to simulate a 'Web 2.0' Lightbox style UI technique in a Windows Forms application. That is, to draw attention to some foreground control by 'dimming' all other content in the client area of a window.

The obvious solution is to create a control that is simply a partially transparent rectangle that can be docked to the client area of a window and brought to the front of the Z-Order. It needs to act like a dirty pain of glass through which the other controls can still be seen (and therefore continue to paint themselves). Is this possible?

I've had a good hunt round and tried a few techniques myself but thus far have been unsuccessful. If it is not possible, what would be another way to do it?

See: http://www.useit.com/alertbox/application-design.html (under the Lightbox section for a screenshot to illustrate what I mean.)

Capone

Answer 1

Can you do this in .NET/C#?

Yes you certainly can but it takes a little bit of effort. I would recommend the following approach. Create a top level Form that has no border or titlebar area and then give make sure it draws no client area background by setting the TransparencyKey and BackColor to the same value. So you now have a window that draws nothing...

public class DarkenArea : Form
{
    public DarkenArea()
    {
        FormBorderStyle = FormBorderStyle.None;
        SizeGripStyle = SizeGripStyle.Hide;
        StartPosition = FormStartPosition.Manual;
        MaximizeBox = false;
        MinimizeBox = false;
        ShowInTaskbar = false;
        BackColor = Color.Magenta;
        TransparencyKey = Color.Magenta;
        Opacity = 0.5f;
    }
}

Create and position this DarkenArea window over the client area of your form. Then you need to be able to show the window without it taking the focus and so you will need to platform invoke in the following way to show without it becoming active...

public void ShowWithoutActivate()
{
    // Show the window without activating it (i.e. do not take focus)
    PlatformInvoke.ShowWindow(this.Handle, (short)SW_SHOWNOACTIVATE);
}

You need to make it actually draw something but exclude drawing in the area of the control you want to remain highlighted. So override the OnPaint handler and draw in black/blue or whatever you want but excluding the area you want to remain bright...

protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    // Do your painting here be exclude the area you want to be brighter
}

Last you need to override the WndProc to prevent the mouse interacting with the window if the user tries something crazy like clicking on the darkened area. Something like this...

protected override void WndProc(ref Message m)
{
    if (m.Msg == (int)WM_NCHITTEST)
        m.Result = (IntPtr)HTTRANSPARENT;
    else
        base.WndProc(ref m);
}

That should be enough to get the desired effect. When you are ready to reverse the effect you dispose of the DarkenArea instance and carry on.

Bretbretagne

Answer 2

This is a really cool idea - I will probably use it, so thanks. Anyway, my solution is really simple... open a new 50% opaque form over your current one and then custom draw a background image for that form with a rectangle matching the bounds of the control you want to highlight filled in the color of the transparency key.

In my rough sample, I called this form the 'LBform' and the meat of it is this:

public Rectangle ControlBounds { get; set; }
private void LBform_Load(object sender, EventArgs e)
{
    Bitmap background = new Bitmap(this.Width, this.Height);
    Graphics g = Graphics.FromImage(background);
    g.FillRectangle(Brushes.Fuchsia, this.ControlBounds);

    g.Flush();

    this.BackgroundImage = background;
    this.Invalidate();
}

Color.Fuchia is the TransparencyKey for this semi-opaque form, so you will be able to see through the rectangle drawn and interact with anything within it's bounds on the main form.

In the experimental project I whipped up to try this, I used a UserControl dynamically added to the form, but you could just as easily use a control already on the form. In the main form (the one you are obscuring) I put the relevant code into a button click:

private void button1_Click(object sender, EventArgs e)
{
    // setup user control:
    UserControl1 uc1 = new UserControl1();
    uc1.Left = (this.Width - uc1.Width) / 2;
    uc1.Top = (this.Height - uc1.Height) / 2;
    this.Controls.Add(uc1);
    uc1.BringToFront();

    // load the lightbox form:
    LBform lbform = new LBform();
    lbform.SetBounds(this.Left + 8, this.Top + 30, this.ClientRectangle.Width, this.ClientRectangle.Height);
    lbform.ControlBounds = uc1.Bounds;

    lbform.Owner = this;
    lbform.Show();
}

Really basic stuff that you can do your own way if you like, but it's just adding the usercontrol, then setting the lightbox form over the main form and setting the bounds property to render the full transparency in the right place. Things like form dragging and closing the lightbox form and UserControl aren't handled in my quick sample. Oh and don't forget to dispose the Graphics instance - I left that out too (it's late, I'm really tired).

Here's my very did-it-in-20-minutes demo

Cran

I ended up with a similar solution except that my 'LightBox' form (the semi transparent one which is shown modally above the main form) is passed a UserControl in its constructor which it then shows modally itself - so you get a stack of two modal windows. This suited my requirement. – Capone

Answer 3

The forms themselves have the property Opacity that would be perfect, but I don't think most of the individual controls do. You'll have to owner-draw it.

Pastoralize

Answer 4

The big dimming rectangle is good.

Another way to do it would be:

Roll your own base Form class says a MyLightboxAwareForm class that would listen to a LightboxEvent from a LightboxManager. Then have all your forms inherit from MyLightboxAwareForm.

On calling the Show method on any Lightbox, the LightboxManager would broadcast a LightboxShown event to all MyLightboxAwareForm instances and making them dim themselves.

This has the advantage that normal Win32 forms functionality will continue to work such as taskbar-flashing of the form when you click on one of its modal dialogs or the management of mouseover/mousedown events would still work normally etc.

And if you want the rectangle dimming style, you could just put the logic in MyLightboxAwareForm

Gley

Answer 5

Another solution that doesn't involve using a new Form :

• make a picture of your container (form / panel / whatever),
• change its opacity,
• display it in a new panel's background.
• Fill your container with that panel.

And now the code...

Let's say I have a UserControl called Frame to which I'll want to apply my lightbox effect:

public partial class Frame : UserControl
{
    private Panel shadow = new Panel();
    private static float LIGHTBOX_OPACITY = 0.3f;

    public Frame()
    {
        InitializeComponent(); 
        shadow.Dock = DockStyle.Fill;
    }

    public void ShowLightbox()
    {
        Bitmap bmp = new Bitmap(this.Width, this.Height);
        this.pnlContainer.DrawToBitmap(bmp, new Rectangle(0, 0, this.Width, this.Height));
        shadow.BackgroundImage = SetImgOpacity(bmp, LIGHTBOX_OPACITY );
        this.Controls.Add(shadow);
        shadow.BringToFront();
    }

    // http://www.geekpedia.com/code110_Set-Image-Opacity-Using-Csharp.html
    private Image SetImgOpacity(Image imgPic, float imgOpac)
    {
        Bitmap bmpPic = new Bitmap(imgPic.Width, imgPic.Height);
        Graphics gfxPic = Graphics.FromImage(bmpPic);
        ColorMatrix cmxPic = new ColorMatrix();
        cmxPic.Matrix33 = imgOpac;
        ImageAttributes iaPic = new ImageAttributes();
        iaPic.SetColorMatrix(cmxPic, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);
        gfxPic.DrawImage(imgPic, new Rectangle(0, 0, bmpPic.Width, bmpPic.Height), 0, 0, imgPic.Width, imgPic.Height, GraphicsUnit.Pixel, iaPic);
        gfxPic.Dispose();
        return bmpPic;
    }
}

The advantages to using this technique are :

• You won't have to handle all of the mouse events
• You won't have to manage multiple forms to communicate with the lightbox elements
• No overriding of WndProc
• You'll be cool because you'll be the only one not to use forms to achieve this effect.

Drawbacks are mainly that this technique is much slower because you have to process an entire image to correct each pixel point using the ColorMatrix.

Corpuscle

Answer 6

Every form has "Opacity" property. Set it to 50% (or 0.5 from code) so will be half transparent. Remove borders and show it maximized before the form you want to have focus. You can change BackColor of the form or even set background image for different effects.

Scratchboard