Lesson 03.1 – Building the first screen

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

 


Link to video on YouTube

 

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.

UI control positions
TypeNameTextLocation XLocation Y
Labeldon't changeHit Points: 18 20
Labeldon't changeGold: 18 46
Labeldon't changeExperience: 18 74
Labeldon't changeLevel: 18 100
LabellblHitPoints11019
LabellblGold11045
LabellblExperience11073
LabellblLevel11099

 

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 take 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:

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

 

30 thoughts on “Lesson 03.1 – Building the first screen

  1. 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!

     

    1. 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.

  2. 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)

    1. 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.

  3. 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

    1. 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.

  4. 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.

    1. 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.

  5. 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

    1. 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.

  6. I was having the same problem with the button and then I started piddleing, I think it’s due to an improperly set reference.

  7. 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.

  8. 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!

     

    1. 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.

  9. 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

    1. 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.

Leave a Reply

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