Lesson 21.3 – Add a button and create its eventhandler in code, without the UI design screen

Lesson Objectives

At the end of this lesson, you will know…

• How the Designer.cs file holds information about the controls (buttons, labels, etc.) on a form.
• How to add a button in code and its event handler (the button “click” event) connection, without using the drag-and-drop UI

We’re going to add a “Trade” button that will be visible when the current location has a vendor. However, instead of using the “Design” mode, we’re going to create it with code.

We will do this in the SuperAdventure form’s Designer.cs file.

Knowing how these designer forms work will also help you if you accidentally created an event on your form.

Step 1: Open the SuperAdventure solution in Visual Studio.

Inside the SuperAdventure project, double-click on the file “SuperAdventure.Designer.cs”, to open it for editing.

NOTE: If you cannot see this file, you may need to click on the triangle on the left side of the SuperAdventure.cs file. That will show you all of SuperAdventure.cs’s files.

Look near the top lines of SuperAdventure.Designer.cs. You will see this line:

partial class SuperAdventure

If you view the code for SuperAdventure.cs, you will see this similar line:

public partial class SuperAdventure : Form

Both these files say they are a “partial class” for SuperAdventure.

A partial class is when you have some of the code for a class in one file, and more code for that class in another file. Together, these files have all the code needed for the SuperAdventure class.

Visual Studio creates the designer classes to keep the control information (name, location, size, etc.) out of the “logic” part of the code. It’s a little easier to work with all your UI configuration code in one file, and your logic code in a different file.

If you scroll through the Designer.cs file, you will see the information for all your labels, buttons, comboboxes, etc.

Step 2: For this step, your line numbers might be slightly different than mine. If they are, that’s OK. Just put the code in the areas with the same type of code.

You can check the file on GitHub, to see what areas I am talking about.

Inside SuperAdventure.Designer.cs, find the InitializeComponent() function. This is where you create the object on the form.

Add this as line 52 (or wherever this section is in your file), in the function:

this.btnTrade = new System.Windows.Forms.Button();

Scroll down to line 254 (after the settings for the dgvQuests datagrid) and add these lines:

//
// btnTrade
//
this.btnTrade.Location = new System.Drawing.Point(493, 620);
this.btnTrade.Name = "btnTrade";
this.btnTrade.Size = new System.Drawing.Size(75, 23);
this.btnTrade.TabIndex = 21;
this.btnTrade.Text = "Trade";
this.btnTrade.UseVisualStyleBackColor = true;
this.btnTrade.Click += new System.EventHandler(this.btnTrade_Click);

As you can probably guess, this is where you add more information about how to define “btnTrade”, the new button we want on the screen.

The line with “this.btnTrade.Click” is the eventhandler code. It says, “When the user clicks this button, run the btnTrade_Click function in this class”. We will add that function in a minute.

Scroll to line 270, and add this line:

this.Controls.Add(this.btnTrade);

That line adds btnTrade to the controls on this screen.

Finally, scroll to line 325, and add this line:

private System.Windows.Forms.Button btnTrade;

This makes the button a class-level variable, so it can be used by any functions in the class – including functions in SuperAdventure.cs, since it is part of the SuperAdventure class (the other “partial” class file).

Step 3: Edit SuperAdventure.cs.

Add this eventhandler function. It does not do anything. However, since we declared this eventhandler in SuperAdventure.Designer.cs, we need to have it in the class.

private void btnTrade_Click(object sender, EventArgs e)
{
}

Step 4: Compile and run your program. Right now, you should see the “Trade” button on every location, although it doesn’t do anything when you click it.

Summary

This should give you an idea how the drag-and-drop designer works. When you drag a button on to a form, Visual Studio creates all this code for you. If you double-click a button, it creates the eventhandler, and the line in the Designer.cs file that connects the button to it.

This is also where you can look if you accidentally created an eventhandler.

Several people have accidentally double-clicked on a datagrid (or some other UI control) on the graphic (Design) screen for SuperAdventure.cs. This created an eventhandler in SuperAdventure.Designer.cs, and the event-handling function in SuperAdventure.cs.

When they copy-pasted the code from the lesson into SuperAdventure.cs, it didn’t have the accidental event-handling function. However, SuperAdventure.Designer.cs still had the eventhandler in it. That caused an error, since the eventhandler is trying to reference a function that does not exist any more.

Source code for this lesson

Source code on GitHub

Source code on Dropbox

Next lesson: Lesson 21.4 – Completing the trading screen

Previous lesson: Lesson 21.2 – Create the vendor class and add it to locations

All lessons: Learn C# by Building a Simple RPG Index