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:

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

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:

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

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:

That line adds btnTrade to the controls on this screen.

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

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.

 

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

Get it from GitHub: https://gist.github.com/ScottLilly/d9a7a94b0e13d81117b6

Or DropBox: https://www.dropbox.com/sh/txuhyklmy3tfiw7/AABGSzwGxYdj_rwQptG_ehj7a?dl=0

 

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

 

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

  1. Hi,

    first of all i need to say, that english is not my native language. Then i want to say very big THANK YOU. I finished this course in one week. It was smooth, written in easy language, not that long and boring. And I have one question. Are you going to continue this course? I think there is a lot of new stuff that can be done.  Personally, I want to learn how to add some kid of minimap or map to GUI, beacuse i have like 30 locations and its hard to know where you are.

     

    Again, big THANK YOU.

    1. You’re welcome!

      I just posted the final lesson for the trading screen. So now, the player can buy and sell items. Next, I plan to have some lessons on using SQL Server, to save and read the player’s game data, instead of an XML file. I am also thinking of showing how to use a command line UI with the same Engine project. After those lessons, I do not have any more lessons planned. But, that always changes, when I get new ideas or requests.

      I am working on a bigger version of the game, with many more features. I started it on GitHub. It is still very small, but you can look at it here: https://github.com/ScottLilly/ScottsOpenSourceRPG This version will use a WPF UI and have simple 2-dimensional graphics in it.

Leave a Reply

Your email address will not be published. Required fields are marked *