Question

I am making a custom Tic Tac Toe game where there are three Tic Tac Toe frames in the form.

Instead of creating three times a 3×3 square of buttons, i thought it would be better to make a custom control that will contain nine buttons in the formation I want, and so I can put it three times in the form and also access each and every button in that formation.

I am pretty new to inheritance and custom controls so i would like your help with examples or instructions.

Answer 1

In this case, you can use a UserControl. This is easier than creating a custom control, which requires to derive a control from an existing control and to enhance it. In VS right click on your project and choose “Add” > “New Item…”. In the Windows Forms section select “User Control”. Give it the name “TicTacToeUserControl”. You can design the user control much like designing a form. It will then automatically appear in to Toolbox of the current project and be ready to be dropped on a form.

---

UPDATE

Here some more explanations. Place a TableLayoutPanel on the UserControl. Change Dock to Fill. Add a row and a column in order to have three of both and change their size mode to Percent and change these values to 33.33. Add a button to each table field from left to right and then top down in order to have buttons names “button1”, “button2” etc. in reading order. Save the user control (my VS had a glitch at this point and I had to start all over).

Create this class that we will use as event argument for our button click event

public class ButtonClickedEventArgs : EventArgs
{
    public ButtonClickedEventArgs(TicTacToeUserControl userControl, Button button,
                                  int buttonNumber, int row, int column)
    {
        UserControl = userControl;
        Button = button;
        ButtonNumber = buttonNumber;
        Row = row;
        Column = column;
    }

    public TicTacToeUserControl UserControl { get; private set; }
    public Button Button { get; private set; }
    public int ButtonNumber { get; private set; }
    public int Row { get; private set; }
    public int Column { get; private set; }
}

Change the code of the user control to make it look like this

[DefaultEvent("ButtonClicked")]
public partial class TicTacToeUserControl : UserControl
{
    public event EventHandler<ButtonClickedEventArgs> ButtonClicked;

    public TicTacToeUserControl()
    {
        InitializeComponent();
    }

    private void button_Click(object sender, EventArgs e)
    {
        OnButtonClicked((Button)sender);
    }

    private void OnButtonClicked(Button button)
    {
        var eh = ButtonClicked;
        if (eh != null) {
            int buttonNumber =
                Int32.Parse(button.Name.Substring(button.Name.Length - 1));
            int row = (buttonNumber - 1) / 3;
            int col = (buttonNumber - 1) % 3;
            eh(this, 
               new ButtonClickedEventArgs(this, button, buttonNumber, row, col));
        }
    }
}

Select the event handler “button_Click” for the click event of all your buttons in the properties window switched to Event (the flash symbol). Don’t create a new one for each button. Hit F6 (compile)

Your control is ready and can be dropped onto a form from the tools window. Resize it as desired. Double click on it. Because of the DefaultEventAttribute that we specified for the form, VS will automatically create this event handler

private void ticTacToeUserControl1_ButtonClicked(object sender,
                                                 ButtonClickedEventArgs e)
{
}

Add this code line to it in order to test the user control

    MessageBox.Show(e.UserControl.Name + " " + e.Button.Name + " " + 
                    e.ButtonNumber + " " + e.Row + " " + e.Column);

^{NOTE: This does not actually create a new control, it just creates a template}