c# Draw rectangle around control when hovered

Question

I am overiding OnPaint method of Control class to create emoticon. The emoticons have been created. But I'm to add a rectangle around it when it is hovered.

public class EmoticonControl : Control
{
    public EmoticonControl(string unicode, Image image)
    {
        this.unicode = unicode;
        this.image = image;
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        Graphics graphics = e.Graphics;
        Rectangle clipRectangle = e.ClipRectangle;
        graphics.DrawImage(this.image, 0, 0, this.Size.Width, this.Size.Height);

        // When hovered
        Brush brush = new SolidBrush(this.selectedColor);
        graphics.FillRectangle(new SolidBrush(selectionColor), clipRectangle);
        graphics.DrawRectangle(new Pen(selectionBorderColor), clipRectangle.X, clipRectangle.Y, clipRectangle.Width - 1, clipRectangle.Height - 1);
        //
    }
    private string unicode;
    private Image image;

    private Color selectedColor = SystemColors.Highlight;
    private Color selectionColor = Color.FromArgb(50, 0, 0, 150);
    private Color selectionBorderColor = SystemColors.Highlight;
}

Answer 1

Original Version

This should work for you:

public class EmoticonControl : Control
{
    public EmoticonControl(string unicode, Image image)
    {
        this.unicode = unicode;
        this.image = image;
    }

    // Set hover, request invalidation:
    protected override void OnMouseEnter(EventArgs e)
    {
        base.OnMouseEnter(e);
        hover = true;
        this.Invalidate();
    }

    // Unset hover, request invalidation:
    protected override void OnMouseLeave(EventArgs e)
    {
        base.OnMouseLeave(e);
        hover = false;
        this.Invalidate();
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        Graphics graphics = e.Graphics;
        Rectangle clipRectangle = e.ClipRectangle;
        graphics.DrawImage(this.image, 0, 0, this.Size.Width, this.Size.Height);

        // Only do this when hovering:
        if (hover)
        {
            Brush brush = new SolidBrush(this.selectedColor);
            graphics.FillRectangle(new SolidBrush(selectionColor), clipRectangle);
            graphics.DrawRectangle(new Pen(selectionBorderColor), clipRectangle.X, clipRectangle.Y, clipRectangle.Width - 1, clipRectangle.Height - 1);
        }
    }

    // Added flag to track hover status:
    private bool hover = false;

    private string unicode;
    private Image image;

    private Color selectedColor = SystemColors.Highlight;
    private Color selectionColor = Color.FromArgb(50, 0, 0, 150);
    private Color selectionBorderColor = SystemColors.Highlight;
}

Updated Version:

(Includes a few "best-practices" fixes to your original code)

public class EmoticonControl : Control
{       
    public EmoticonControl(string unicode, Image image)
    {
        this.unicode = unicode;
        this.image = image;
    }

    protected override void OnMouseEnter(EventArgs e)
    {
        base.OnMouseEnter(e);
        hover = true;
        this.Invalidate();
    }

    protected override void OnMouseLeave(EventArgs e)
    {
        base.OnMouseLeave(e);
        hover = false;
        this.Invalidate();
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        DrawImage(e.Graphics);
        DrawSelectionRectangle(e.Graphics);
    }

    private void DrawSelectionRectangle(Graphics graphics)
    {
        if (hover)
        {
            using (var brush = new SolidBrush(selectionColor))
            {
                graphics.FillRectangle(brush, this.ClientRectangle);
            }
            using (var pen = new Pen(selectionBorderColor))
            {
                graphics.DrawRectangle(pen,
                    new Rectangle()
                    {
                        Width = (this.Width - 1),
                        Height = (this.Height - 1)
                    });
            }
        }
    }

    private void DrawImage(Graphics graphics)
    {
        if (image != null) graphics.DrawImage(
            this.image, 0, 0, this.Size.Width, this.Size.Height);
    }

    private bool hover = false;
    private Image image;
    private string unicode;

    private Color selectionColor = Color.FromArgb(50, 0, 0, 150);
    private Color selectionBorderColor = SystemColors.Highlight;
}

Answer 2

You might need to set a flag in your mouse leave and enter events and check the flag in your paint event like this:

If(hover)
{
    ControlPaint.DrawBorder(e.Graphics,this.DisplayRectangle,Color.Red,ButtonBorderStyle.Solid)
}

Answer 3

You can use the UIElement.IsMouseOver property to know whether your control is hovered or not.

protected override void OnPaint(PaintEventArgs e)
{
    Graphics graphics = e.Graphics;
    Rectangle clipRectangle = e.ClipRectangle;
    graphics.DrawImage(this.image, 0, 0, this.Size.Width, this.Size.Height);

    // When hovered
    if (IsMouseOver)
    {
        Brush brush = new SolidBrush(this.selectedColor);
        graphics.FillRectangle(new SolidBrush(selectionColor), clipRectangle);
        graphics.DrawRectangle(new Pen(selectionBorderColor), clipRectangle.X, clipRectangle.Y, clipRectangle.Width - 1, clipRectangle.Height - 1);
    }
}