Question

I have a “start” button with a custom image I have made. I haven’t messed around with this part of C#.net, but I know a bit about VB.NET.

I’ve seen people have something like public void picturebox_MouseDown() and whatnot, but none seems to work. I am trying to change the image when a mouse event is given.

MouseDown would change the image to StartButtonDown

MouseUp would change the image to StartButtonUp

MouseEnter would change the image to StartButtonHover

MouseLeave would change the image to StartButtonUp

Is there something specific I should do, I’ve google’d this for about an hour and still haven’t found anything to help me.

Answer 1

Here is something I wrote which is very similar to what you require.

using System;
using System.Drawing;
using System.Windows.Forms;

public partial class ImageButton : PictureBox
{
    private Image _upImage, _downImage, _hoverImage;

    [System.ComponentModel.Browsable(true),
     System.ComponentModel.Category("Images")]
    public Image UpImage
    {
        get { return _upImage; }
        set
        {
            if (value != null)
            {
                _upImage = value;
                this.Image = _upImage;
            }
        }
    }

    [System.ComponentModel.Browsable(true),
     System.ComponentModel.Category("Images")]
    public Image DownImage
    {
        get { return _downImage; }
        set
        {
            if (value != null)
            {
                _downImage = value;
            }
        }
    }

    [System.ComponentModel.Browsable(true),
     System.ComponentModel.Category("Images")]
    public Image HoverImage
    {
        get { return _hoverImage; }
        set
        {
            if (value != null)
            {
                _hoverImage = value;
            }
        }
    }

    public ImageButton()
    {
        InitializeComponent();
    }

    protected override void OnMouseDown(MouseEventArgs e)
    {
        if (DownImage != null)
            this.Image = DownImage;

        base.OnMouseDown(e);
    }

    protected override void OnMouseUp(MouseEventArgs e)
    {
        if (UpImage != null)
            this.Image = UpImage;

        base.OnMouseUp(e);
    }

    protected override void OnMouseEnter(EventArgs e)
    {
        if (HoverImage != null)
            this.Image = HoverImage;

        base.OnMouseEnter(e);
    }

    protected override void OnMouseLeave(EventArgs e)
    {
        if (UpImage != null)
            this.Image = UpImage;

        base.OnMouseLeave(e);
    }

}

What I have done is inherrited from the standard PictureBoxto make an ImageButton. I have three properties for the Image to display with no mouse action (UpImage), the Image to display when the MouseDown event is triggered (DownImage), and the Image to display when the mouse is hovering over the control (HoverImage).

Note that you should add a check for the MouseUp and MouseLeave events. If I click on the image and drag the mouse away from the control, the control will go from the UpImage to the DownImage to the UpImage again because I have left the control (MouseLeave) even though my mouse is still down. You may desire that the DownImage remain displayed when the mouse leaves the control. Additionally, when the MouseUp event occurs, you should check if the mouse is still hovering over the control. If it is, you will want to display the HoverImage rather than the UpImage.

You could also check for which mouse button is used. Maybe you only want the images to change with left button clicks, not right or middle.

But this should get you started.