Creating Rectangle-based buttons with OnClick events

Question

As the title implies, I want a Button class with an OnClick event handler. It should fire off connected events when it is clicked.

This is as far as I've made it:

public class Button {

    public event EventHandler OnClick;

    public Rectangle Rec { get; set; }
    public string Text { get; set; }

    public Button(Rectangle rec, string text) {
        this.Rec = rec;
        this.Text = text;
    }

}

I have no clue what I'm doing with regards to events. I know how to use them but creating them myself is another matter entirely. I've also made buttons without using events that work on a case-by-case basis.

So basically, I want to be able to attach methods to the OnClick EventHandler that will fire when the Button is clicked (i.e., the mouse intersects Rec and the left mouse button is clicked).

Answer 1

To do this, you need to sample the state of the mouse regularly, and when it's clicked, check the coordinates against the button and see how that goes.

Usually, I write something like this in Button:

public void Update() { // called every tick
  var mouseState = Mouse.GetState();
  if (this.OnClick != null && mouseState.LeftButton == ButtonState.Pressed && oldState.LeftButton == ButtonState.Released) {
    // Someone's listening, and we have a click
    this.OnClick.Invoke();
  }
  this.oldState = mouseState;
}

The core is really:

• Check the mouse state now
• Compare to the old state last tick. If we weren't pressed, and now we are, that's a click.
• Check if anyone's subscribing to our event (this.OnClick != null), and if so, notify them of the click.

By the way, your event can use Action if you pass no parameters to the subscribers of the click event (C# Forms defaults is to use sender and event args); Action can take parameters if you do want to send some data over.

Eg. you can make your event public event Action OnClick.

Answer 2

For those interested, this is my final (so far) Button class:

public class Button {

    public event Action OnClick;
    public event Action OnHover;

    public Rectangle Rec { get; set; }
    public string Text { get; set; }

    public Button(Rectangle rec, string text) {
        this.Rec = rec;
        this.Text = text;
    }

    public void Update(MouseState prev, MouseState cur) { // called every tick 
        if (this.OnClick != null && Rec.Contains(cur.X, cur.Y) && cur.LeftButton == ButtonState.Pressed && prev.LeftButton == ButtonState.Released) { 
            // Someone's listening, and we have a click 
            this.OnClick.Invoke();
        }
        if (this.OnHover != null && Rec.Contains(cur.X, cur.Y)) {
            // Someone's listening, and we have a hover 
            this.OnHover.Invoke();
        }
    }

    public void Draw(SpriteBatch spriteBatch, Color btnCol, Color textCol) {
        spriteBatch.Draw(Game1.TheGame.GuiTex, Rec, btnCol);
        Vector2 fontCenter = Game1.TheGame.DebugFont.MeasureString(Text) / 2;
        spriteBatch.DrawString(Game1.TheGame.DebugFont, Text, new Vector2(Rec.Center.X, Rec.Center.Y), textCol, 0, fontCenter, 1f, SpriteEffects.None, 0);
    }
}

And here is an example of how it is used:

Button[] menuOptions;
int selectedOption = 0;

...

menuOptions = new Button[3] {
    new Button(new Rectangle(x, y, width, height), "New Game"),
    new Button(new Rectangle(x, y, width, height), "Load Game"),
    new Button(new Rectangle(x, y, width, height), "Settings")
};

...

for (int i = 0; i < menuOptions.Length; i++) {
    int j = i; // this is due to the way C# deals with closures and captured variables
    menuOptions[i].OnHover += delegate() { selectedOption = j; };
    menuOptions[i].OnClick += selectOption;
}

...

public void Draw(GameTime gameTime, SpriteBatch spriteBatch) {
    spriteBatch.Begin();
    foreach (Button btn in menuOptions) {
        Color btnCol = (btn == menuOptions[selectedOption]) ? Color.DarkBlue : Color.CadetBlue;
        Color textCol = (btn == menuOptions[selectedOption]) ? Color.White : Color.Black;
        btn.Draw(spriteBatch, btnCol, textCol);
    }
    spriteBatch.End();
}

...

private void selectOption() {
    if (selectedOption == 0) { // New Game
        // do new game stuff
    } else if (selectedOption == 1) { // Load Game
        // do load game stuff
    } else if (selectedOption == 2) { // Settings
        // do settings stuff
    }
}

This example is far from perfect and it would have to be adapted to any specific needs, but it should help.

Answer 3

The button WinForms control is able to add themes, rotation and transparency, images and text to C#.NET projects as well as creating rectangle buttons.