Download Instructions
Please add the decompressed folders (Help and SlidingPanes) from AlphaForm_1_1_3_Part2.zip to the main project folder in AlphaForm_1_1_3_Part1.zip.
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
- There are two controls:
AlphaFormTransformer
and a helper control AlphaFormMarker
. Reference the AlphaFormTransformer.dll in your project and add them to your Toolbox.
- Start with a Form in the designer, and set its
FormBorderStyle
to None.
- 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.
- In the Form's
Load
event handler (or OnLoad
override), add a call to TransformForm()
alphaFormTransformer1.TransformForm();
- 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.
- 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.
- 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.
- 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.
- That's it, let's run and see what we have.
- 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:
- 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).
- Reposition all AFM markers so that the form's region can be calculated.
- 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:
- 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();
m_lwin.TopMost = ParentForm.TopMost;
m_lwin.ShowInTaskbar = false;
m_lwin.MouseDown += new MouseEventHandler(LayeredFormMouseDown);
m_lwin.MouseMove += new MouseEventHandler(LayeredFormMouseMove);
m_lwin.MouseUp += new MouseEventHandler(LayeredFormMouseUp);
ParentForm.Move += new EventHandler(ParentFormMove);
m_lwin.Show(ParentForm);
m_lwin.Location = ParentForm.Location;
- 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)
{
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);
}
UpdateSkin(aphaBmap);
- 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
.
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];
}
}
- 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();
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);
marker.Visible = false;
}
}
ParentForm.Region = RegionFromRectList(rectList, bounds);
- Finally in
UpdateSkin
, the alpha channel image bitmap is set to the layered form.
m_lwin.SetBits(m_alphaBitmap);
- 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.
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
- Version 1.1.1
- 7/15/09: The code in this article was the basis for a shareware component called “AlphaForm” which I'm now releasing as freeware under the CodeProject 1.02 license. This is version 1.1.1 and includes a number of new features and bug fixes since the original CodeProject article. There are also expanded tutorials and a compiled help file.
- Version 1.1.3 includes a few new features and bug fixes, namely:
- Routines for showing and hiding alpha forms
- Bug fix for x64
- New example showing multiple, animated alpha forms