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
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
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.
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.
Hi Scott!
I’ve followed the lessons verbatim thus far, and am now at a problem that I don’t see a fix for. I have finished this lesson and ran the RPG. There is no TRADE button showing up on the UI. When I look at the form designer, the button shows up at the bottom of the form and not when I run it. I’ve checked all the settings and made sure to C&C your code snipets for accuracy. Not sure why this would be…
Thanks!
Hello Ty,
Can you upload your solution (including the directories under it, and all the files in those directories) to GitHub or Dropbox, so I can look at it?
https://github.com/Hardinty52/SuperAdventureChecks
I only see the compiled files there. Can you check and make sure the .sln files and all the .cs files are in GitHub?
That is weird… I put it in a zip file to make sure it was all there… Uploaded the zip file for the solution and all necessities @ LINK REMOVED FOR PRIVACY
OK, I have all the files now.
If you build the solution, you should see an error message that says “Inconsistent accessibility: event type ‘EventHandler‘ is less accessible than event ‘Player.OnMessage'”. That means the OnMessage event in the Player class has a higher visibility than the MessageEventArgs class. Because OnMessage is public, MessageEventArgs needs to be public. So, change line 9 of MessageEventArgs to:
public class MessageEventArgs : EventArgs
After fixing that, and rebuilding the solution, there is another error: “There is no argument given that corresponds to the required formal parameter ‘price’ of ‘Item.Item(int, string, string, int)'”. That error is on line 14 of the Weapon class. It looks like the “price” parameter is not being passed to the base Item class’ constructor.
Let me know if that doesn’t help you fix the errors.
Awesome! It works! Thanks, Scott! I’ve been doing SQL mostly, and this tutorial has been perfect on getting me in line with the best practices and knowledge behind c#. I appreciate you taking the time to help teach us rookies! 🙂
You’re welcome, although I wouldn’t say this code follows “best practices”. 🙂 It could certainly be cleaned up. If you’re interested in better (cleaner, easier to extend, and more testable) ways to write C#, you might want to look at the lessons on design patterns.