An Alpha Channel Composited Windows Form with Designer Support

<div style="width: 575px; height: 9975px" id="layer1">
	<font size="5"><b>Installation in the Visual Studio ToolBox</b></font><ol>
	<li>Open the <i>AlphaForm.sln</i> file and build the release version. The <i>AlphaForm</i> 
	projects compiles an assembly with two controls: <b>AlphaFormTransformer</b> 
	and <b>AlphaFormMarker</b>.</li>
	<li>Install the controls in your <i>ToolBox</i> by referencing the <i>
	AlphaForm.dll</i> from the <i>/bin/release</i> directory. You can do this by 
	either right-clicking on the <i>ToolBox</i> panel and selecting <i>Choose 
	Items...</i> or select <i>Tools-&gt;Choose ToolBox Items...</i> and select the
	<i>/bin/release/AlphaForms.dll</i>. </li>
</ol>
<p><b><font size="5">Introduction</font></b></p>
<p>The best way to learn how to use AlphaForm is to read the tutorials listed 
below. But before you begin, it's important that you have an understanding of 
how AlphaForm works behind the scenes. In Windows (excluding Windows 
Presentation Foundation), there is no way to host Win32 controls on a single 
window with per pixel compositing. You can have a shaped form using the window's 
region along with a transparency key, but it will composite with the desktop as 
a one bit mask giving you a stair-stepped border. </p>
<p>The AlphaForm component actually creates a second layered window that hosts 
your composited window frame image. This window has the <code>WS_EX_LAYERED</code> 
extended style bit set, and this is really the 
only way to deliver per pixel desktop image compositing in Win32. This window cannot 
host controls, so we still need another window which will be the control host. 
The AlphaForm assembly contains two controls: <b><code>AlphaFormTransformer</code></b> (AFT) 
and <b><code>AlphaFormMarker</code></b> (AFM). The control host is simply a form you 
construct in the designer to which you add a single instance of the AFT and dock 
it to fill. The AFT's <code>BackgroundImage</code> will become the image composited by 
the layered window. The AFT does all the heavy lifting to make your form and the layered 
window appear as a single composited window. Namely it does the following:</p>
<ul>
	<li>At runtime it construct a layered window with it's bitmap taken from the 
	AFT's <code>BackgroundImage</code>. From here on and in the 
	documentation and tutorials will refer to this as the <b>frame window</b>. 
	The frame window hosts your 32 bit alpha channel image that serves as the 
	window border.</li>
	<li>It keeps the frame window and main form in sync as far as window 
	position and dragging.</li>
	<li>It constructs the main form's <code>Region</code> from the frame window's bitmap. 
	This is essential so that only user designated regions of the bitmap appear 
	to enclose controls (we'll talk about how you designate these regions 
	below).</li>
	<li>It acts as a host (AFT descends from Panel) for all other controls you 
	will be adding. You simply drag and drop controls onto it in the designer.</li>
</ul>
<p><span id="intelliTXT">By itself, the alpha channel is not enough information 
for the AFT to calculate the main form's <code>Region</code> necessary to show the controls 
you will be adding. But we make it easy. You drag an AFM control into each 
transparent region that will show controls. These areas must be completely 
bounded by a non-transparent border within the alpha bitmap. Each marker simply 
needs to be anywhere in the transparent region, and its center (shown by red 
crosshairs) must fall on a transparent pixel. It's important to note that they 
must be added to the AFT and not to any other container control. Finally, they 
are hidden at run time.</span></p>
<p><img border="0" src="afms.jpg" width="500" height="321"><span id="intelliTXT"><br>
<br>
Each marker's <code>FillBorder</code> 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.</span></p>
<p>At runtime, the AFT creates your form's region from the AFM markers and 
displays the pair of windows (the frame window and your form) together as a 
unified form with the frame window on top and your form on the bottom. You can 
also make the pair behave as a topmost window by setting the <code>TopMost</code> property of 
your form. </p>
<p><img border="0" src="aform.jpg" width="400" height="260"><br>
&nbsp;</p>
<p><b><font size="5">Tutorials &amp; Help</font></b></p>
<ul>
	<li>Tutorial 1: <a href="Tutorials/Cutouts.htm">Image Form with Controls in Cutout 
	Regions</a></li>
	<li>Tutorial 2: <a href="Tutorials/ControlsOnTop.htm">Image Form with Controls on Top</a></li>
	<li>Tutorial 3: <a href="Tutorials/Fading.htm">Fading Forms In &amp; Out</a></li>
	<li><a href="AlphaForm%20API%20Help/Index.html">AlphaForm API Documentation</a> 
	(there is also a compiled help file <i>AlphaForm Documentation.chm </i>in 
	your <i>/Help/AlphaForm API Help</i> directory)</li>
</ul>

<p><b><font size="5"><br>
Sample Projects</font></b></p>
<p>The AlphaForm solution has several sample projects:</p>
<ul>
	<li>TestFormGroBotoTV - A fairly elaborate example of a complex bitmap 
	serving as a window frame. Here we host controls within cutout regions and 
	they appear against the main form background. See
	<a href="Tutorials/Cutouts.htm">Tutorial 1</a>. This example also implements
	<a href="Tutorials/Fading.htm">fading in and out</a>.</li>
	<li>TestFormSkinChange - Shows how to change the bitmap at runtime.</li>
	<li>ControlsOnTopOfSkin - Shows controls placed on top of the image by 
	making the form's BackgroundImage the same as the AFT's BackgroundImage. See
	<a href="Tutorials/ControlsOnTop.htm">Tutorial 2</a>. This example also 
	implements <a href="Tutorials/Fading.htm">fading in and out</a>.</li>
	<li>TV Set - Another <a href="Tutorials/ControlsOnTop.htm">controls on top 
	of image</a> example except for the &quot;Off&quot; button which appears against the 
	main form's background. So here we have an example of mixing these two 
	approaches.</li>
</ul>
	<p>&nbsp;</p>
	<p><font size="2">Copyright 2007 Jeff Anderson<br>
	<a href="http://www.alpha-forms.com">www.alpha-forms.com</a><br>
	<a href="http://www.shapedforms.com">www.shapedforms.com</a></font></p>
	<p>&nbsp;</p>
<p>&nbsp;</p>


	<p>&nbsp;</div>
<p>&nbsp;</p>