Lesson objectives
At the end of this lesson, you will know…
- How to add things (buttons, labels, etc.) to the user interface.
- How the user interface connects with the logic in the program.
How do the User Interface (UI) talk with the logic?
Now we have a running program, but it doesn’t do anything yet.
Let’s change that.
The first thing we need to do is make the form big enough to hold everything we’re going to show on it.
Preparing the form
Step 1: Start Visual Studio Express 2013 for Desktop.
Step 2: Open the SuperAdventure solution.
Step 3: In the Solution Explorer (upper-right corner of Visual Studio), double-click on the SuperAdventure.cs file, to open it.
Step 4: Select the whole form by clicking on it in the main editing window of Visual Studio (the center part of the screen). You’ll know it’s selected when you see the dashed line, with little boxes, along its edge. You’ll also see “SuperAdventure” listed in the Properties part of Visual Studio, in the lower-right corner.
Properties are the small pieces of information about the form – its name, size, color, etc. We’re only going to work with a few of those properties in these lessons.
Step 5: Scroll through the Properties list to find the “Text” property. Change its value from “Form1” to “My Game”. Notice that the top line of the form has changed to “My Game now.
Step 6: Scroll through the properties list to find “Size”, and expand it by clicking on the “+” sign to its left (if it isn’t already expanded). Change the “Width” to 735, and the “Height” to 690. Notice that the size of the form has changed.
Adding text (words) to the form
Now that the form is big enough to place everything we need on it, let’s add the first few pieces of information.
If you remember from the earlier lesson, the finished game has the player’s hit points, gold, experience, and level displayed in the upper-left corner of the form. That information is displayed with things called “controls”.
Controls are the things you see on a program’s, or a website’s, screen – text, boxes to enter values, buttons. In Visual Studio, when you’re working with a form, you’ll see a list of controls on the left side. We’re going to use some of the common controls.
The first controls we’re going to add are “labels”. These are used when you want to display a small piece of text.
To add a label to a form, click on “Label”, in the controls list (left-hand side of the screen), and drag it over onto the form. You can put it anywhere, since we are going to manually change its location in its properties.
You’ll need to add eight labels to the screen, and change their properties. You can see how to do this in the video.
Here’s a list of the values you need to change. It’s easiest if you change each one, right after you add it to the form.
| Type | Name | Text | Location X | Location Y |
|---|---|---|---|---|
| Label | don't change | Hit Points: | 18 | 20 |
| Label | don't change | Gold: | 18 | 46 |
| Label | don't change | Experience: | 18 | 74 |
| Label | don't change | Level: | 18 | 100 |
| Label | lblHitPoints | 110 | 19 | |
| Label | lblGold | 110 | 45 | |
| Label | lblExperience | 110 | 73 | |
| Label | lblLevel | 110 | 99 |
NOTE: For the labels that will hold values that never change (for example, “Hit Points:”), leave them with whatever name they had when they were created. They don’t really need a better name, since we are never going to connect to them from the “logic” part of the program.
The labels that we will change need a good name. You’ll see why in a minute.
You probably also noticed that I added “lbl” to the front of each of the labels that I gave a name to. This is so it’s easier for me to find all my labels, when writing code in the logic part of the program (again, you’ll see why in a minute).
Add a button, to do something
Let’s see how the program can change the labels we have.
In a future lesson, we’ll fill in the labels with names that start with “lbl” with the values for the player’s hit points, experience, etc. For now, we’ll just do a little test.
Step 1: From the controls list on the left-hand side, drag a “button” onto an empty space on the form.
Step 2: Change its “Name” property to “btnTest” (I use the “btn” prefix for all my buttons). Change its text property to “Test”.
Step 3: Double-click on the btnTest button.
This will take you to the “logic” code for this form. You’ll see that the cursor is in the middle of something named “btnTest_Click”. We’ll talk about this more later, but for now, you just need to know that this is the logic that will run when the player clicks on the btnTest button.
Step 4: On line 22, in the middle of the btnTest_click section, type this line:
lblGold.Text = "123";
If you noticed, when you typed “lbl”, Visual Studio showed you all the labels we created earlier the start with “lbl”. That’s why I name them that way – it’s easy to find them when writing the logic code.
Remember how you cleared out the “Text” property, after creating the label? Now the logic code is going to fill it in. In this case, it’s filling it in with “123”. The semi-colon, at the end of the line you just wrote? That’s there to let the computer know you’re done with the line – kind of like a period/full stop at the end of a sentence.
Step 5: Start the program.
Notice that the only things you see on the form are the labels that had a value in the “Text” property.
Now, click the “Test” button. See that the “lblGold”, which was just empty, now shows “123”, the value the logic code said to display when the player clicks the “Test” button.
That’s a quick introduction to how the code we’re going to write is going to connect with the form on the screen. The player will do something to one of the controls on the form (such as clicking a button). Then, the logic code will figure out what happens to the player’s character in the game world, and updates the screen.
Summary
The game has a button! And the button does something!
OK, so it’s not all that exciting, but you need some way for the player to interact with the “brains” of the program, and this is the first step.
After we write the logic in the Engine project, we’ll come back to the UI and add the remaining controls, so you can start playing the game.
Next Lesson: Lesson 04.1 – Creating the Player class and its properties
Previous lesson: Lesson 02.2 – Building the solution for the game
All lessons: Learn C# by Building a Simple RPG Index
I love this! Very thorough and easy to follow!! Thanks 🙂
You’re welcome!
Great tutorial! I have one suggestion to make. I am totally blind, and I am using screen reader software to speak the contents of the web page. I use visual studio, with help from this same screen reading software. I am basically using your tutorial to learn about programming just like anyone else going to your site.
I noticed in this lesson that you have a graphic image that describes all eight labels and their various settings. You mention four of these labels in the text of the lesson, but you don’t refer to the other four labels other than with the graphic. I performed OCR on the graphic, and I now know that there are eight labels (four labels for maximum hitpoints, gold, experience and level, and another four labels that show the current numbers for hp experience level and gold).
I just wanted to write and let you know that a blind individual is using your tutorials, so try to describe as much as you can in the text of your lessons rather than just having images with properties or code. This was not meant to be an angry sounding post 🙂 I know that a lot of writers and developers aren’t aware that their materials are enjoyed by blind computer users.
Thanks for reading, and keep up the great work!
Thanks for letting me know, Jeremy. You’re correct that this wasn’t something I thought about at all, when making the lessons.
I’ll look over them the next few days and see if I can spot anything that needs to be changed. I don’t think there are many more graphic images, but I know there are several videos with no audio (I was living in a noisy apartment when I made them, so didn’t do audio). Let me know if you spot any particular problems in the individual lessons and I’ll see if I can update them to work better for people using text-to-speech software.
I’m working with the 2019 version of this program, so perhaps that’s why (or, more likely, I just have no idea what I’m doing lol), but when I made the “test” button as directed, hit “start,” and tried it out, it didn’t do anything.
Any advice to get this working? I’m really interested in coding and would love to make it through this series, but . . . as of now, I’m stuck haha
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?
Hey Scott,
thank you for this great tutorial, I am still at the beginning and hope I can make my way through it without that many troubles. I have one little question, was this on purpose that the labels are a bit off? (location x)
You’re welcome.
Are you asking about the slight differences in the “Location Y”? For example, the label with “Hit Points:” is at 20, and lblHitPoints is at 19. If so, that’s probably the result of me using Visual Studio’s “align” feature. You can select multiple controls (textboxes, labels, buttons, etc.), then selecting “Format” -> “Align”, and choosing the option to align by “middle” (it might have been by “center”, I’m not at my development computer with the solution right now, so I can’t check). I suspect the difference is coming from the way Visual Studio calculated those middles.
Let me know if that wasn’t what you meant, or if that didn’t answer your question.
hey, great tutorial i love it soo far
i have a little problem, but when i start the project it dosent update, the labes and the button dosent apper and the window appers small, it says theres an error about converting a type int to string but it dosent apper in the code that error.
i hope you could help me with this and sorry to bother
Can you take a screenshot of the error, upload it to DropBox (or some other place online), and send me the URL? That will help me find the problem.
Hello,
I have a problem completing Step 4. You say to add it on the 22nd line but my btnTest form only has a total of 7 lines. I have attached a screenshot
http://imgur.com/x0u6Nxt
Thanks hope you know what I can do to correct it!
Hello Kate,
The projects in your solution are Visual BASIC projects, not C#. The simplest fix is to delete the current solution, and re-create it. When you create the projects, make sure you select the project templates under Visual C# (like here).
Please let me know if you have any other questions.
Hi Scott, and thanks so much for this tutorial! What could be the reason for my VSE 2015 simply ignoring any amount of double-clicks on the Test Button? I can’t seem to figure it out.
When you run the program, and click on the “Test” button, does “123” display on the screen?
The first time you double-click on “btnTest”, Visual Studio should create the “btnTest_Click” function in SuperAdventure.cs (and a line called the “eventhandler”, in SuperAdventure.Designer.cs). If you double-click on btnTest again, it does not do anything because the function and eventhandler were already created.
If it’s not working, can you upload the code for SuperAdventure.cs and SuperAdventure.Designer.cs to Dropbox, or Gist? Then I can examine it.
I am using this code in visual community 2015 and i get no errors and it compiles but it wont change the lblGold label to 123. Any ideas? thanks
I’m guessing the problem is that the “eventhandler” for the button does not exist – it should have been created in step 3, when you double-clicked on btnTest.
To confirm this, can you open SuperAdventure.Designer.cs, and see if there is a line that says this:
this.btnTest.Click += new System.EventHandler(this.btnTest_Click);If that line is not in the file, you can manually add it. There are some more details on how to manually add an eventhandler in this lesson: Lesson 21.3 – Add a button and create its eventhandler in code, without the UI design screen
If that does not fix the problem, or is not clear, please let me know.
I was having the same problem with the button and then I started piddleing, I think it’s due to an improperly set reference.
Did you get it to work?
Hi Scott Lilly I really appreciate you putting this together it’s really the best thing I’ve come across to learn.
I’m not having any problems but I’ve noticed that instead of having the file type .cs in the Solution Explorer they end in .vb. Is this something I should be worried about and is there a way to change them to .cs file type? or is there no difference between the two?
I just don’t want something to go wrong later because I’m really enjoying this tutorial to learn .net from scratch in a hands on project way.
Never mind, I read through your comments and saw that I just need to build the solution in visual c# thanks
That’s OK. 🙂 Please tell me if you encounter any other problems.
Just started this but i also cant seem to get the button to work on VS2015
Nevermind i went back and redid every step and it worked this time. not sure what i did wrong the first time but oh well!
Cool (fixing the problem, not having it 🙂 ) Let me know if you encounter anything else.
Thank you for the great tutorial! I am following this course and enjoy the moment 🙂
I am using Visual Studio Community 2015. After I double-clicked on the btnTest button, it took me to SuperAdventure.cs. And I noticed something different between your code and mine. I put my screenshots in the link:
LINK REMOVED FOR PRIVACY
In the next lesson, I manually changed my code to be the same with yours. I also changed “Form1” to “SuperAdventure” in line 19 of Program.cs (in screenshot “Mine2.png”) because it gave me an error and it couldn’t build the program.
I don’t know what caused that difference. I am not sure whether it is ok to change the code manually like what I did, either.(Though It seems working so far) It would be great if you would help me solve the problem.
Thank you!
You’re welcome!
If you renamed Form1.cs to SuperAdventure.cs (and changed the “public class” and “Application.Run” lines from Form1 to SuperAdventure), that should be OK. Open SuperAdventure.Designer.cs, to ensure the class name for that file is also SuperAdventure (and not Form1). I think there might have been a problem when renaming Form1, and it was not updated in all the places it needed to be updated. I have seen that happen a few times. But, if the program works now, then you should be able to continue.
Please tell me if you do encounter another problem.
I’m getting an issue where it will not show up when i click the button, but the event handler is there
Can you upload your SuperAdventure.cs and SuperAdventure.Designer.cs (you might need to click the triangle to the left of SuperAdventure.cs, in Solution Explorer, to see this file – see the image below) files to https://gist.github.com/, so I can examine them?
Nevermind i remake all but a new error apear for this code:using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace Adventure
{
public partial class Adventure : Form
{
public Adventure()
{
InitializeComponent();
}
private void btnTest_Click(object sender, EventArgs e)
{
lblGold.Text = “123”;
}
}
}
Severity Code Description Project File Line Suppression State
Error CS5001 Program does not contain a static ‘Main’ method suitable for an entry point Adventure C:\Users\user\Documents\Visual Studio 2015\Jocuri\Adventure\Adventure\CSC 1 Active
Can you upload your solution (all the files in it, including the sub-folders) to GitHub, or Dropbox? Then I can look for the source of the error.
Hi Scott,
When I click on the SuperAdventure file its Properties are not showing. FYI, I’m using Visual Studio 2017.
Hi John,
This should work the same in Visual Studio 2017.
When you double-click on SuperAdventure.cs, does Visual Studio display the tab with “SuperAdventure.cs [Design]” (the grpahical version of the form)? Or, does it show the code version?
If it shows the graphical version, you can try right-clicking on the form and selecting “Properties”.
Visual Studio can hide the Properties section. Look at the upper-right corner of Visual Studio for a “Properties” tab (see the image below), and click on it. To keep the Properties section visible, click on the “pin” icon, in the upper-right.
Please tell me if neither of those solutions fixes the problem.
Hi I’m having trouble with some code in Visual Studio which was automatically generated into Program.cs. I’m using VS 2017
This is the code and it’s the last line that brings up a fault CS0118 ‘SuperAdventure is a namespace but is used as a type.
static void Main()
{
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
Application.Run(new SuperAdventure());
}
Without the Application.Run the program faults.
Can you suggest anything to correct the problem?
Thank you
Hi Don,
Did you give one of the projects a different name, or create them with one name and then rename it? If so, you might be able to fix the problem with the steps from Lesson 02.2B.
If that isn’t the problem, or if lesson 02.2B doesn’t fix it, 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?
I followed everything and all is working. But in the button code, you said line 22 but that’s line 27 for me. I have a piece of extra code there.
private void label3_Click(object sender, EventArgs e)
{
}
Did I do something wrong? Label3 isnt a button so why is it showing label3_Click?
If you accidentally double-clicked on label3, in the SuperAdventure Design screen, Visual Studio would have created an “eventhandler” and this “label3_Click” function. You can delete this function. You will also need to edit SuperAdventure.Designer.cs. Find the line in SuperAdventure.Designer.cs with “this.label3.Click += new System.EventHandler(this.label3_Click);” and delete it.
You can learn more about eventhandlers in Lesson 21.3.
Please tell me if that does not fix the problem.
Okay, I found those lines. Its working properly now, it was showing errors before. Thank you
You’re welcome
Hello, thank you so much for your tutorial. I’ve been following along, but at lesson 16, when I pasted the linked code into superadventure.cs, I get the following errors:
Severity Code Description Project File Line Suppression State
Error CS0246 The type or namespace name ‘SuperAdeventure’ could not be found (are you missing a using directive or an assembly reference?) SuperAdventure C:\Users\boyce\OneDrive\ten steps c#\new super awesome adventure folder\AwesomeAdventureGame2\SuperAdventure\SuperAdventure\Program.cs 21 Active
Error CS1061 ‘SuperAdventure’ does not contain a definition for ‘label2_Click’ and no accessible extension method ‘label2_Click’ accepting a first argument of type ‘SuperAdventure’ could be found (are you missing a using directive or an assembly reference?) SuperAdventure C:\Users\boyce\OneDrive\ten steps c#\new super awesome adventure folder\AwesomeAdventureGame2\SuperAdventure\SuperAdventure\SuperAdeventure.Designer.cs 73 Active
Error CS1061 ‘SuperAdventure’ does not contain a definition for ‘label4_Click’ and no accessible extension method ‘label4_Click’ accepting a first argument of type ‘SuperAdventure’ could be found (are you missing a using directive or an assembly reference?) SuperAdventure C:\Users\boyce\OneDrive\ten steps c#\new super awesome adventure folder\AwesomeAdventureGame2\SuperAdventure\SuperAdventure\SuperAdeventure.Designer.cs 92 Active
Error CS1061 ‘SuperAdventure’ does not contain a definition for ‘SuperAdeventure_Load’ and no accessible extension method ‘SuperAdeventure_Load’ accepting a first argument of type ‘SuperAdventure’ could be found (are you missing a using directive or an assembly reference?) SuperAdventure C:\Users\boyce\OneDrive\ten steps c#\new super awesome adventure folder\AwesomeAdventureGame2\SuperAdventure\SuperAdventure\SuperAdeventure.Designer.cs 289 Active
You’re welcome.
The CS1061 errors could have happened if you accidentally double-clicked on the screen in the display mode. Visual Studio would have created some “eventhandlers” and new functions it also created in SuperAdventure.cs. But, if you pasted in the code from the lesson, it would not have those funcitons. You can read more about eventhandlers in Lesson 21.3. To fix them, you can delete the eventhandler lines in SuperAdventure.Designer.cs.
For the CS0246 error, it looks like your project is named “SuperAdeventure”, and the pasted code is named “SuperAdventure” – so the namespaces won’t match. In SuperAdventure.cs, you might be able to fix that error by changing the line near the top that says “namespace SuperAdventure” to “namespace SuperAdeventure”.
It that isn’t clear, 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?
Hey, when i click on the “Test” button, it says i have 123 hit points instead of gold. Im guessing i typed it wrong and im wondering if i can fix it somehow
You might have named the named the labels incorrectly. It sounds like lblHitPoints and lblGold might be reversed. If you can’t find the source of the problem, 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?
Hi Mr. Scott, in this bit of course, you didnt mention why we have to write the labels that change their value in the properties case “Design”. I think it could be quite useful for the understanding of people who debut in programmation as I am myself and was wondering why “there”. Also I didnt know that the UI generates code in the “SuperAdventure.Designer.cs” file and I am already wondering what the other file SuperAdventure.resx is for?
Hello!
I could not cover everything in these lessons. So I wrote about the things I thought were most important. We do cover the Designer page and how it stores eventhandlers in lesson 21.3. If there are things you want to investigate more, Microsoft has complete documentation for C# at: https://docs.microsoft.com/en-us/dotnet/csharp/.