Alpha blending in Taskbar

[Administrator]

Hi,

I am using XPTaskbar. I would like to get MSN Messenger 5.0 "I want to .." section kind of look for the taskbar (not the taskbar box). It has a navy blue kind of gradient and some bg image.

How do I alphablend a background image with a bg gradient color in XPTaskbar?

thanks,
- Reddy

[Administrator]

Hi,

Handle the Paint message of the XPTaskBar and do the following in the handler:

1) Draw the Gradient:
Use the LinearGradientBrush to draw the gradient bg.
The following link in MSDN should tell you how to do so:
ms-help://MS.VSCC/MS.MSDNVS/cpguide/html/_gdiplus_creating_a_linear_gradient_usecsharp.htm
Topic: "Creating a Linear Gradient"

2) Draw the image semi-transparently:
First designate a color for the portion in your bitmap that will be fully transparent.
Then while drawing swap that color with Color.TransparentColor as per the following faq:

http://www.syncfusion.com/faq/winforms/search/673.asp
33.3 How can I swap colors in a bitmap or icon

Also, to draw the image semi-transparently, refer to this faq:
http://www.syncfusion.com/FAQ/WinForms/FAQ_c3c.asp#q786q
33.7 How to draw a faded image?

Combine the above to faqs to draw your image.

Please do post the resulatant code here, if you can.

Regards,
Praveen Ramesh

[Administrator]

Ramesh,

Thanks for the help. I got it to work.
I had to extend XPTaskBar and override OnPaint event.

Here is the resultant code... You may want to add this to the samples in future tools release. It looks pretty cool !!

cheers,
- Reddy

------------------------------
protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
{
Rectangle rc = this.ClientRectangle;
int gradientWidth = 18;
LinearGradientBrush linGrBrush = new System.Drawing.Drawing2D.LinearGradientBrush(
new Point(0, 10),
new Point(gradientWidth, 10),
Color.FromArgb(255, 237, 241, 242), // Opaque
Color.FromArgb(255, 42, 78, 129)); // Opaque

float[] factors = {0.0f, 0.3f, 0.4f, 0.8f, 1.0f};
float[] positions = {0.0f, 0.1f, 0.2f, 0.4f, 1.0f};

//Create a Blend object and assign it to linGrBrush.
Blend blend = new Blend();
blend.Factors = factors;
blend.Positions = positions;
linGrBrush.Blend = blend;

// draw the gradient on the left edge
e.Graphics.FillRectangle(linGrBrush, 0, 0, gradientWidth+5, rc.Height);

// draw a filled rectangle rest of the area
using (Brush brush = new SolidBrush(Color.FromArgb(42, 78, 129)))
{
e.Graphics.FillRectangle(brush, gradientWidth, 0, rc.Width-gradientWidth, rc.Height);
}
linGrBrush.Dispose();

// get the image from a resource file
System.Resources.ResourceManager rm = new System.Resources.ResourceManager(
"ControlsLibrary.Images",
System.Reflection.Assembly.GetExecutingAssembly());
Image gearsImage = (Image)rm.GetObject("transparent_gears.gif");
ImageAttributes ia = new ImageAttributes();
ColorMatrix cm = new ColorMatrix();
cm.Matrix00 = 1;
cm.Matrix11 = 1;
cm.Matrix22 = 1;
float transparancy = .14f;
cm.Matrix33 = transparancy;
ia.SetColorMatrix(cm);
int imgWidth = gearsImage.Width;
int imgHeight = gearsImage.Height;
Rectangle destRect = new Rectangle(rc.Width-imgWidth, rc.Height-imgHeight, imgWidth, imgHeight);
e.Graphics.DrawImage(gearsImage, destRect, 0, 0, imgWidth, imgHeight,
GraphicsUnit.Pixel, ia);
}

[Administrator]

Reddy,

Thanks for the code! Yes, the effect does look very good. Does your gif have any transparency info (that might make the resultant bg much better)? If so and if you can, please do attach it here.

Thanks
Praveen Ramesh

[Administrator]

Praveen,

I am attaching my example VS.NET Solution zip file. It contains the code and the image (B&W Image with transparent bg color).

Before I came up with this code, I tried setting bg image for the taskbar. But the problem is that the bg image is tiled when ever the size of the taskbar is changed. So, I had to do my own painting.

cheers,
- Reddy

[Administrator]

Thanks for the sample. It looks very good. Would you mind if we ship this along with our samples?

Thanks
Praveen Ramesh

[Administrator]

Praveen,

Sure... go ahead and ship it as a sample. I think all the developers should share these kinds of samples.

cheers,
- Reddy