An Alpha Channel Composited Windows Form with Designer Support

• Download demo project - 830.5 KB
• Download source files - 1,839.6 KB

Introduction

Windows has long had the ability to specify a region or transparency key allowing you to define an arbitrary Window border. This is often used with a background image to define an image outline as a Window frame. However, this border is composited with the desktop as a one bit mask giving you a pixelated boundary. It is especially unattractive with curvilinear borders which really need antialiasing and per pixel compositing. Aside from the unsightliness, it's not easy to define the region and/or transparency key to achieve a complex image based Window frame.

This is a Windows Forms control that works with Win32 APIs and without WPF. The control allows you to layout a 32 bit image with an alpha channel in the Forms designer and arrange additional controls within user specified areas of the image. At runtime, the control will generate a per pixel alpha composited Form with the desktop. The Form's Region property defines areas of the Form to host other controls, and it's calculated on the fly from the image's alpha channel. This control also supports runtime changing of the image. Before we discuss some of the code specifics, let's run through how you use it.

How To Use

1. There are two controls: AlphaFormTransformer and a helper control AlphaFormMarker. Reference the AlphaFormTransformer.dll in your project and add them to your Toolbox.
2. Start with a Form in the designer, and set its FormBorderStyle to None.
3. Drag an instance of the AlphaFormTransformer control (AFT) onto the Form and dock it to Fill. The AFT must be the same size as the Form.
4. In the Form's Load event handler (or OnLoad override), add a call to TransformForm().
   

   alphaFormTransformer1.TransformForm();
   

5. Select a 32 bit alpha channel PNG or TIF image as the AFT control's background image. This image needs to have the desired Window frame elements masked by its alpha channel and interior transparent areas that will hold other controls.

   

6. Select the form, and set its width and height equal to the width and height of the image. This is an important prerequisite. The form, AFT control, and the AFT's background image must all have the same dimensions.
7. By itself, the alpha channel is not enough information for the AFT to calculate the main form's Region necessary to show the controls you will be adding. But we make it easy. Drag an AlphaFormMarker (AFM) control into each transparent region that will show controls. These areas must be completely bounded by a non-transparent border. Each marker simply needs to be anywhere in the transparent region, and its center (shown by the crosshairs) must fall on a transparent pixel. Once positioned, make them as small as desired, or send them to the back to get them out of the way. It's important to note that they must be added to the AFT and not to any other container control. Be mindful of this if you decide to add them later. Finally, they are hidden at run time.
   
   The marker's FillBorder property specifies how far into the non-transparent pixel border the region will be constructed. The composited image will typically have semitransparent edges. Therefore the region that's built from the marker position needs to expand some number of pixels into (and *under* from the compositing point of view) the semitransparent area, otherwise you will see through to the desktop along these borders. You want the border value to be large enough to cover the thickness of the semitransparent edge (typically a couple pixels), but not too large which might cause it to extend past the other side of the image frame.

   

8. Now add whatever other controls you like to the interior transparent regions of the image. The AFT is a container control (descends from Panel), so you will be adding the controls to it. The image will always mask out the control area(s) at run time, but not necessarily at design time. If you don't set a control's background color to transparent, it may cover the masked borders of the image while in the designer because it's on top whereas at run time it's beneath the alpha channel image. By setting a control's background color to transparent, you can essentially fake the runtime behavior. And doing this can help you lay things out even if you later change it to a non-transparent color. Not all controls support a non-transparent background color, so in some cases your controls may overlap the image borders in the designer.

   

9. That's it, let's run and see what we have.

   

10. Optionally, we can set the background image property of the main Form and set each control's background color to transparent. This allows us to have a custom background like you see below. You could also achieve this by using additional controls like panels each with their own background.

    

Runtime Skinning

At run time you can change the form's alpha channel image by calling UpdateSkin passing a new bitmap for the window frame. However if the new bitmap has a different alpha channel than the current one, then you must do the following *before* calling this method:

1. If the size of the image has changed, resize the main Form and the AFT to match (if the AFT is docked then just the form).
2. Reposition all AFM markers so that the form's region can be calculated.
3. Reposition all other controls as needed.

On the other hand if your new image has the same size and alpha but different RGB, then this method is all you need to call. The source solution has a sample project illustrating how to change the image at runtime.

How it Works

As you might have guessed, what we're really doing is creating a second Window which hosts the composited image on top of the main Form. This all happens in TransformForm() which does the following:

1. A layered Window Form is created. This is a Window with the WS_EX_LAYERED extended style bit set. Windows will alpha channel composite layered windows on the desktop once the window contents are set with the Win32 call UpdateLayeredWindow(). We've wrapped a class around this called LayeredWindowForm.

   m_lwin = new LayeredWindowForm();
   
   // Setting the layered Window's TopMost to the main
   
   // Form's value keeps the relative Z order the same for
   
   // the pair of Windows
   
   m_lwin.TopMost = ParentForm.TopMost;
   
   // We don't want the layered Window Form to show in the taskbar
   
   m_lwin.ShowInTaskbar = false;
   
   // These will handle dragging for both the layered Window
   
   // and the main Form.
   
   m_lwin.MouseDown += new MouseEventHandler(LayeredFormMouseDown);
   m_lwin.MouseMove += new MouseEventHandler(LayeredFormMouseMove);
   m_lwin.MouseUp += new MouseEventHandler(LayeredFormMouseUp);
   ParentForm.Move += new EventHandler(ParentFormMove);
   
   // Layered form shown with same size and location
   
   // It's not necessary to set the size of the layered
   
   // Window as LayeredWindowForm.SetBits() will do this.
   
   m_lwin.Show(ParentForm);
   m_lwin.Location = ParentForm.Location;

2. A bitmap is extracted from the AFT's background image property. It may be scaled in some situations (see the comments here on DPI support). After this UpdateSkin() is called.
   
   

   if (BackgroundImage != null)
   {
     // A prerequisite with this control is that the main Form's size
   
     // is set equal to the background image size. However, if the main
   
     // Form's AutoScaleMode is set to DPI, and the application is run
   
     // on a system where the font or DPI resolution differs from the
   
     // design time values, then .NET will scale the form and all its
   
     // controls. However the background image is not scaled, so we'll
   
     // catch that condition here and scale the image accordingly.
   
     // Again, this logic works *assuming* you always set the main Form's
   
     // size equal to the image size at design time.
   
     if (BackgroundImage.Size != ParentForm.Size)
     {
       aphaBmap = new Bitmap(ParentForm.Width, ParentForm.Height);
       Graphics gr = Graphics.FromImage(aphaBmap );
       gr.SmoothingMode = SmoothingMode.HighQuality;
       gr.CompositingQuality = CompositingQuality.HighQuality;
       gr.InterpolationMode = InterpolationMode.HighQualityBicubic;
       gr.DrawImage(BackgroundImage, new Rectangle(0, 0, ParentForm.Width,
         ParentForm.Height),
         new Rectangle(0, 0, BackgroundImage.Width, BackgroundImage.Height),
                           GraphicsUnit.Pixel);
       gr.Dispose();
     }
     else
       aphaBmap = new Bitmap(BackgroundImage);
   }
   
   // Update the layered Window bits and Form region
   
   UpdateSkin(aphaBmap);
   

3. In UpdateSkin, an array from the image's alpha channel is created. This is used in the next step to construct the main form's Region.

   // Seems faster albeit somewhat wasteful to marshal to a
   
   // managed array than to use Bitmap.GetPixel. If you're
   
   // OK with unsafe code, then define FAST_ALPHA_BUILD and
   
   // enable unsafe compilation.
   
   byte[] mngImgData = new byte[m_alphaBitmap.Height * bData.Stride];
   Marshal.Copy(bData.Scan0, mngImgData, 0, mngImgData.Length);
   for (int j = 0; j < m_alphaBitmap.Height; j++)
   {
     int ai = j * bData.Stride + 3;
     for (int i = 0; i < m_alphaBitmap.Width; i++, ai += 4)
     {
       alphaArr[i, j] = mngImgData[ai];
     }
   }

4. Still within UpdateSkin, the main Form's Region is constructed. The Region will define the visible areas of the Form where you place your controls (the controls are hosted in the AFT, but everything is clipped by the main Form's region). The Region is constructed on the fly by performing a seed fill type operation from the user specified AFM markers which occurs in UpdateRectListFromAlpha(). These markers are little more than special helper controls which are dragged onto the Form in design mode. In essence we're filling specific transparent areas of the image's alpha channel. For each such "filled" pixel, we generate a rectangle to be used to construct the main Form's Region.

   Rectangle bounds = new Rectangle();
   ArrayList rectList = new ArrayList();
   
   // The location of each AlphaFormMarker control serves as a seed point
   
   // location for building the set of rectangles that describe the
   
   // enclosed transparent region (within the background image's alpha
   
   // channel) around that point.
   
   foreach (Control cntrl in Controls)
   {
     if (typeof(AlphaFormMarker).IsInstanceOfType(cntrl))
     {
       AlphaFormMarker marker = (AlphaFormMarker)cntrl;
       UpdateRectListFromAlpha( rectList, ref bounds,
         new Point(marker.Location.X + marker.Width / 2,
         marker.Location.Y + marker.Height / 2), alphaArr,
         m_alphaBitmap.Width, m_alphaBitmap.Height,
         (int)marker.FillBorder);
   
       // Hide the marker as we don't want to see it at run time.
   
       marker.Visible = false;
     }
   }
   
   // Build the main Form's region
   
   ParentForm.Region = RegionFromRectList(rectList, bounds);
   

5. Finally in UpdateSkin, the alpha channel image bitmap is set to the layered form.

   // Set the layered Window bitmap
   
   m_lwin.SetBits(m_alphaBitmap); 

6. At the bottom of TransformForm(), the AFT's background image and tiling are copied from the main Form. This allows us to have a custom background image if desired.

   // Swap in the main form's background image (if any) and layout
   
   BackgroundImage = ParentForm.BackgroundImage;
   BackgroundImageLayout = ParentForm.BackgroundImageLayout;

Points of Interest

Dragging the Window is accomplished by dragging any visible part of the layered Window (our Window frame). When a mouse drag event in LayeredFormMouseMove() occurs, it moves the main Form but lets the Move event handler ParentFormMove() move the layered window. This handles cases where the Form is moved outside of a drag operation. For example, when the taskbar's autohide is unchecked, Windows may cause the Form to be relocated.

Also on Window XP, ParentFormMove() tries to help the desktop and underlying Windows catch up to redrawing invalidated areas (remember we're actually moving two Windows although the layered Window of the pair is double buffered). If it detects we're dragging the Form, it sleeps the main thread according to the DragSleep property. A reasonable value like 30 milliseconds makes for less distracting redrawing of the invalidated parts of the desktop. Under Vista this property is ignored as the DWM double buffers everything.

Finally, PInvoking is unavoidable for both for the layered Window APIs and ExtCreateRegion() which has to be used because of the poor performance of building a Region from a GraphicsPath or Region.Union().

Summary

In this article we've presented a Windows Forms control that allows you to build arbitrarily complex image based Window elements with designer level support and runtime alpha channel compositing.

History

• Version 1.0 (initial release)