Custom button in C#: How to remove hover backgroun

Question

I'm trying to do a custom button to my form (which has FormBorderStyle = none) using Visual Studio 2005. 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?

Answer 1

create Mouse Enter event which is given below.

private void forAllButtons_MouseEnter(object sender, EventArgs e)
{
    Button b = (Button)sender;
    b.FlatAppearance.MouseOverBackColor = System.Drawing.Color.Transparent;
}

then assign this event to all the buttons.

Happy programming :)

Answer 2

To solve the problem, Set the MouseOverBackColor to transparent inorder to remove the grey backgroud.

Answer 3

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

Answer 4

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 5

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 6

Hi you simply can apply these changes to your button easily using these two lines of codes.

1. Set the button's FlatStyle to Flat

   this.btnClose.FlatStyle = FlatStyle.Flat;
   

2. Set the button's MouseOverBackColor to Transparent

   this.btnClose.FlatAppearance.MouseOverBackColor = Color.Transparent;
   

Hope this will help. Thanks