WinForms: How do I simulate button behavior on an image?

Question

I have an extension of the winforms TabControl, it's draws an X on each tab to allow the user to close the tab.

Compare that to the standard:

How can I simulate button look&feel on that image? What I mean is, when the user clicks down, it should visually indicate that. A button does this with an inset image. For bonus points, I'd like to do the hover part, too - where the image will "light up" whn the mouse hovers.

But the X isn't a button, and it's not PictureBox control. It's not a control at all. It's just been drawn there.

Is there a way to draw an inset border on MouseDown and Raised on MouseUp? Would I be better off generating another image, for the "inset" phase? (and another for the hover).

anyone done this before?

---

Related: Simulate Winforms Button Click Animation
But this question is different because he actually has a PictureBox control. I don't.

Answer 1

If you have just drawn it there then you need to do the following:

• Have an onmouseover / onleftclick event for the parent control. This may be the form itself, or tab control.
• In that function check to see if the mouse is over where you draw the image.
• If it is over where you draw the image, then show the "click" or "hover" state.

I've cobbled together some code as to how it may look

myControl.MouseClick += new EventHandler(myClickHandler);

private void myClickHandler(EventArgs e)
{
//Check e to see if left button was pressed
//Check e location to see if mouse is in correct location, i.e. over the "X"
//If so then alter a state variable i.e. tabstates[0] = TabStates.HOVER;
}

private void myDrawingFunc()
{
//Draw X
if (tabstates[0] == TabStates.HOVER)
{
//Draw hover state
}
else
{
//Draw other state
}
}

This is obviously just an example but indicates roughly how you would do this. Note I added tabstates as an array or list to allow you to have a state for each tab.

Answer 2

Check out the ButtonRenderer class. It can be used to draw standard looking buttons.

Answer 3

You can use images instead of drawing the whole close button, it would be much easier to use, for example imagine you have 3 states for the button (MouseUp, MouseDown, Pressed) which must be declared as an enum, and in the event handlers of your custom control just need to change the enum to MouseDown, MouseUp or Pressed.

While painting your custom Control on OnPaint check the enum and draw the image.

Hope it will work.