Custom button in C#: How to remove hover background?

Question

Hi,

I'm trying to do a custom button to my form (which has FormBorderStyle = none). I have my 3 states button images in an ImageList linked to the button.

this.btnClose.AutoSize = false;
this.btnClose.BackColor = System.Drawing.Color.Transparent;
this.btnClose.BackgroundImageLayout = System.Windows.Forms.ImageLayout.Center;
this.btnClose.FlatAppearance.BorderSize = 0;
this.btnClose.FlatStyle = System.Windows.Forms.FlatStyle.Flat;
this.btnClose.ForeColor = System.Drawing.Color.Transparent;
this.btnClose.ImageKey = "Disabled";
this.btnClose.ImageList = this.imageList1;
this.btnClose.Location = new System.Drawing.Point(368, -5);
this.btnClose.Margin = new System.Windows.Forms.Padding(0);
this.btnClose.Name = "btnClose";
this.btnClose.Size = new System.Drawing.Size(31, 31);
this.btnClose.TabIndex = 0;
this.btnClose.UseVisualStyleBackColor = false;
this.btnClose.MouseLeave += new System.EventHandler(this.btnClose_MouseLeave);
this.btnClose.Click += new System.EventHandler(this.btnClose_Click);
this.btnClose.MouseDown += new System.Windows.Forms.MouseEventHandler(this.btnClose_MouseDown);
this.btnClose.MouseHover += new System.EventHandler(this.btnClose_MouseHover);

private void btnClose_MouseHover(object sender, EventArgs e)
{
    btnClose.ImageKey = "enabled";
}

private void btnClose_MouseDown(object sender, MouseEventArgs e)
{
    btnClose.ImageKey = "down";
}

private void btnClose_MouseLeave(object sender, EventArgs e)
{
    btnClose.ImageKey = "disabled";
}

All is working, but there's one catch. Whenever I move the mouse hover the button I get a really annoying grey background.

How can I remove that?

Thanks for your time. Best regards.

PS: I'm using VS2005

Answer 1

The grey background is due to the setting of "System.Windows.Forms.FlatStyle.Flat", it's the default behaviour, since it need to highlight the button when you hover. To eliminate that, you might have to write a custom button class, inherit from the original button and do some custom painting to achieve that.

Btw, instead of setting "enabled" in MouseHover, you should do it in MouseEnter. MouseEnter and MouseLeave is a pair which indicate whether is the mouse is within the button or not, and it's fired once per entry/exit. Where as MouseHover is fire whenever the mouse moved within the button, which create unnessecery repeated setting of "enabled".

Answer 2

I've solved this using a label instead of a button.

// 
// imageListButtons
// 
this.imageListButtons.ImageStream = ((System.Windows.Forms.ImageListStreamer)(resources.GetObject("imageListButtons.ImageStream")));
this.imageListButtons.TransparentColor = System.Drawing.Color.Transparent;
this.imageListButtons.Images.SetKeyName(0, "close_normal");
this.imageListButtons.Images.SetKeyName(1, "close_hover");
// 
// lblClose
// 
this.lblClose.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Right)));
this.lblClose.BackColor = System.Drawing.Color.Transparent;
this.lblClose.ImageKey = "close_normal";
this.lblClose.ImageList = this.imageListButtons;
this.lblClose.Location = new System.Drawing.Point(381, 7);
this.lblClose.Margin = new System.Windows.Forms.Padding(0);
this.lblClose.Name = "lblClose";
this.lblClose.Size = new System.Drawing.Size(12, 12);
this.lblClose.TabIndex = 0;
this.lblClose.MouseLeave += new System.EventHandler(this.lblClose_MouseLeave);
this.lblClose.MouseClick += new System.Windows.Forms.MouseEventHandler(this.lblClose_MouseClick);
this.lblClose.MouseEnter += new System.EventHandler(this.lblClose_MouseEnter);


private void lblClose_MouseEnter(object sender, EventArgs e)
{
    lblClose.ImageKey = "close_hover";
}

private void lblClose_MouseLeave(object sender, EventArgs e)
{
    lblClose.ImageKey = "close_normal";
}

private void lblClose_MouseClick(object sender, MouseEventArgs e)
{
    this.Close();
}

PS: notice that I'm using now a two state button, instead of three. It is intended (I know that I still can use three).

Answer 3

btnClose.FlatAppearance.MouseOverBackColor = System.Drawing.Color.Transparent;

Answer 4

btnClose.FlatAppearance.MouseOverBackColor = System.Drawing.Color.Transparent;

^ This works if using flatstyle = flat perfectly. I wanted to vote this answer up, but don't have any reputation