Changing the color of the elements of a UserControl

Question

i have a problem whit an userControl. When I try to hover it to change the color of all the components , the function "ChangeColor" isn't fire correctly.

If I hover on the label or picturebox of the usercontrol, it is evoked the event mouseLeave

This is my userControl

public partial class infoUser : UserControl
{
    public infoUser()
    {
        InitializeComponent();
    }

    public void SetNome(string nome)
    {
        labelUserLogged.Text = nome;
    }

    public void ChangeColor(System.Drawing.Color color)
    {
        labelUserLogged.BackColor = color;
        pictureBoxUser.BackColor = color;
    }

    private void infoUser_MouseHover(object sender, EventArgs e)
    {
        ChangeColor(Color.CadetBlue);
    }

    private void infoUser_MouseLeave(object sender, EventArgs e)
    {
        ChangeColor(Color.WhiteSmoke);
    }

}

Code of designer

 private void InitializeComponent()
    {
        this.labelUserLogged = new System.Windows.Forms.Label();
        this.pictureBoxUser = new System.Windows.Forms.PictureBox();
        ((System.ComponentModel.ISupportInitialize)(this.pictureBoxUser)).BeginInit();
        this.SuspendLayout();
        // 
        // labelUserLogged
        // 
        this.labelUserLogged.BackColor = System.Drawing.SystemColors.Control;
        this.labelUserLogged.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
        this.labelUserLogged.Cursor = System.Windows.Forms.Cursors.Hand;
        this.labelUserLogged.Location = new System.Drawing.Point(0, 0);
        this.labelUserLogged.Name = "labelUserLogged";
        this.labelUserLogged.Size = new System.Drawing.Size(167, 27);
        this.labelUserLogged.TabIndex = 3;
        this.labelUserLogged.Text = "Non loggato";
        this.labelUserLogged.TextAlign = System.Drawing.ContentAlignment.MiddleCenter;
        // 
        // pictureBoxUser
        // 
        this.pictureBoxUser.BackColor = System.Drawing.Color.Transparent;
        this.pictureBoxUser.Cursor = System.Windows.Forms.Cursors.Hand;
        this.pictureBoxUser.Image = global::Castor.Gestionale.Properties.Resources.user_icon;
        this.pictureBoxUser.Location = new System.Drawing.Point(5, 6);
        this.pictureBoxUser.Name = "pictureBoxUser";
        this.pictureBoxUser.Size = new System.Drawing.Size(18, 15);
        this.pictureBoxUser.SizeMode = System.Windows.Forms.PictureBoxSizeMode.CenterImage;
        this.pictureBoxUser.TabIndex = 4;
        this.pictureBoxUser.TabStop = false;
        // 
        // infoUser
        // 
        this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
        this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
        this.Controls.Add(this.pictureBoxUser);
        this.Controls.Add(this.labelUserLogged);
        this.Name = "infoUser";
        this.Size = new System.Drawing.Size(171, 30);
        this.MouseLeave += new System.EventHandler(this.infoUser_MouseLeave);
        this.MouseHover += new System.EventHandler(this.infoUser_MouseHover);
        ((System.ComponentModel.ISupportInitialize)(this.pictureBoxUser)).EndInit();
        this.ResumeLayout(false);

    }

Your child controls interfere with the container's events. See [MouseHover/MouseLeave event on the whole entire window](http://stackoverflow.com/a/2015186/719186) — LarsTech, Jan 27 '16 at 16:42

DmitryG · Answer 1 · 2016-01-28T08:06:44.307

Child controls of your UserControl are receive the mouse-input when cursor is within it's bounds. So, when your mouse "enter" into the label/picturebox it "leave" the UserControl and etc.
To make the specific child control "transparent" for mouse events you can use the following trick:

const int WM_NCHITTEST = 0x84, HTTRANSPARENT = (-1);
class HitTestTransparentPictureBox : PictureBox {
    protected override void WndProc(ref Message m) {
        if(m.Msg == WM_NCHITTEST) {
            m.Result = new IntPtr(HTTRANSPARENT);
            return;
        }
        base.WndProc(ref m);
    }
}
class HitTestTransparentLabel : Label {
    protected override void WndProc(ref Message m) {
        if(m.Msg == WM_NCHITTEST) {
            m.Result = new IntPtr(HTTRANSPARENT);
            return;
        }
        base.WndProc(ref m);
    }
}

Then you can replace the specific controls in your UserControl with their "mouse-transparent" analogs:

this.labelUserLogged = new HitTestTransparentLabel();
this.pictureBoxUser = new HitTestTransparentPictureBox();

After that you can use the following approach to create hover-effect on UserControl:

public infoUser() {
    InitializeComponent();
    MouseEnter += infoUser_MouseEnter;
    MouseLeave += infoUser_MouseLeave;
}
void infoUser_MouseLeave(object sender, EventArgs e) {
    Hover = false;
}
void infoUser_MouseEnter(object sender, EventArgs e) {
    Hover = true;   
}
bool hoverCore;
protected bool Hover {
    get { return hoverCore; }
    set {
        if(hoverCore == value) return;
        hoverCore = value;
        OnHoverChanged();
    }
}
void OnHoverChanged() {
    ChangeColor(Hover ? Color.CadetBlue : Color.WhiteSmoke);
}

I put that code in my userControl but now label and picturebox doesn't change color! — Lorenzo Belfanti, Jan 28 '16 at 07:56
I have tried my code with using the code snippets you provided. But you should use the `MouseEnter/MouseLeave` events instead of `MouseHover/MouseLeave`. I have updated my answer accordingly. — DmitryG, Jan 28 '16 at 08:05

Changing the color of the elements of a UserControl

1 Answers1