How to add transparency to a C # form while controls are being saved?

Question

UPDATE: I took a break from working on transparency for a few days. Tonight I started messing with it again. I got a new result using the Hans Passant solution: http://img3.imageshack.us/img3/4265/icontransp.jpg

Passive solution really solves the problem of transparent background gradient. However, I still encounter the problem of transparent colors in my icon mingling with the BackColor form. You can see fuchsia around various parts of the icon in the image above.

ORIGINAL CONTENT:

I’ve been doing this for several hours, and I’m out of luck. I mixed up with Control.Region, Form.TransparencyKey, Form.Opacity and a couple of other random things with some fun effects.

Recently, I tried to set up my desktop and decided to mess with application docking stations. After seeing what the Mac dock and several third-party Windows implementations have to offer, I decided that I wanted to create my own.

In the end, I want to move on to using the Win32 API. Now I just want something to work, using as many features of C # and .Net Framework as possible.

There are several things I want to do in this application:

• Show form / menu with gradient background.
• Allow transparency of the form / menu while maintaining opaque icons.
• Display icons with transparent background.
• Menus and icons should be able to receive mouse-related events (hovering, releasing, clicking, dragging, dragging, and some others).

This is the effect for which I am shooting: http://img207.imageshack.us/img207/5716/desired.jpg

This image shows the visual effects that I am trying to achieve. This was the skin I made for the Rainmeter program. The image shows Notepad ++ behind the skin with several skin files opened in the editor. The menu is transparent, but the icons remain opaque.

My approach:

Using the form as a menu seemed to me a logical choice. I have a basic understanding of events. I'm not quite sure how to create my own click events, so the form will make working with events easier. I examined several options for the icons. I decided to use PictureBox for the icons, as they can contain images and receive events.

As soon as I finished the code for all the structural logic of my menu, I started playing with it, trying to get the desired visual effect. Form.Opacity affects the transparency of everything in the form. Since I want the icons to be completely opaque, I left this property alone. I tried setting BackColor to Color.Transparent, but this gives an error. I played with several combinations ... http://img204.imageshack.us/img204/757/effectsi.jpg

I drew a gradient using Drawing2D.LinearGradientBrush in a bitmap. This bitmap was then placed as Form.BackgroundImage or as PictureBox.Image. If used, the size of the PictureBox should have covered the entire form and sent back.

I noticed that some of Form.BackgroundColor will be mixed with the outline of my icons. The icons have transparency around the edges for a smoother appearance. Since the icons choose FormColor forms, it makes me think that the PictureBox creates new images when the icons are loaded into the form. The translucent parts of the image are then combined with the BackgroundColor shape when they should merge with any colors behind the shape.

http://img838.imageshack.us/img838/8299/whitedesktop.jpg

In this image, you can see the fuchsia existing in the icons, even if the color of the fuchsia shape is now completely transparent. I forgot to point out that in each case the same gradient from green to yellow was used with an alpha value of 150. In images where the gradient does not look green, this is because the transparent colors mix with the fuchsia background.

I'm not quite sure what to do from here. I feel that I can get what I want if I could somehow make one form completely transparent. I also thought that I could have better luck just by drawing icons instead of using PictureBoxes. Then the problem is setting the icons to receive mouse events. (I never made my own events, and I think that would require some calls to the Win32 API.)

What else can I do with PictureBox to get the desired effect? In any case, I am open to any ideas or suggestions regarding the overall effect that I am trying to achieve.

Answer 1

This is pretty easy to do in Winforms. You need a sandwich in two forms. The bottom should provide a transparent gradient background, the top should draw icons and handle mouse clicks. Code example:

public partial class Form1 : Form { public Form1() { InitializeComponent(); this.TopMost = true; this.FormBorderStyle = FormBorderStyle.None; this.TransparencyKey = this.BackColor = Color.Fuchsia; this.Opacity = 0.3; var overlay = new Form(); overlay.FormBorderStyle = FormBorderStyle.None; overlay.TransparencyKey = overlay.BackColor = Color.Fuchsia; overlay.StartPosition = FormStartPosition.Manual; overlay.Location = this.Location; overlay.MouseDown += HandleIconClick; this.Resize += delegate { overlay.Size = this.Size; }; this.LocationChanged += delegate { overlay.Location = this.Location; }; overlay.Paint += PaintIcons; this.Paint += PaintBackground; this.Load += delegate { overlay.Show(this); }; } private void PaintBackground(object sender, PaintEventArgs e) { var rc = new Rectangle(0, 0, this.ClientSize.Width, this.ClientSize.Height); using (var br = new LinearGradientBrush(rc, Color.Gainsboro, Color.Yellow, 0f)) { e.Graphics.FillRectangle(br, rc); } } private void PaintIcons(object sender, PaintEventArgs e) { e.Graphics.DrawIcon(Properties.Resources.ExampleIcon1, 50, 30); // etc... } void HandleIconClick(object sender, MouseEventArgs e) { // TODO } } 

What it looks like: a few random colors and the icon I selected:

Answer 2

Well, I got a little lost in all of this, but from the description in the original paragraph, I would make sure that the background rectangle is NOT the visual parent of the graphic boxes. Make them overlapping brothers and sisters, and in front of them - using the Panel.Zindex panel.

Then you can simply change the opacity of the rectangle without affecting the icons. Also make sure that the source icon image files have a transparent background.

Should work, I think.