Lesson 12.1 – Add the remaining UI controls

Lesson Objectives

At the end of this lesson, you will know…

  • Some of the other controls you can add to a form

 

Now that we have the game world built, we can start connecting it up with the user interface, so the player can start moving around, battling monsters, and completing quests.

So, we’ll add the rest of the buttons, for the player to perform actions, and RichTextBoxes and DataGridViews, so we can display what is happening for the player.

 

Adding the remaining UI controls to the screen

In case the steps below aren’t clear, here’s a video of me adding the controls to the game’s form, and changing their properties.

 


Link to video on YouTube

 

Step 1: Start Visual Studio Express 2013 for Desktop, and open the solution.

Step 2: Right-click on the SuperAdventure.cs for, in the SuperAdventure project, then select “Open” or “View Designer”.

Step 3: Just like when you added the labels for “Hit Points” and “Gold”, you’re going to drag some controls on the form, and then change some of its properties.

Add one Label control

Use these values for it:

Label control
TextXY
Select action617531
Add two ComboBox controls

Use these values for them:

Combobox controls
NameXY
cboWeapons369559
cboPotions369593

 

Add six Button controls

Use these values for them:

Button controls
NameTextXY
btnUseWeaponUse620559
btnUsePotionUse620593
btnNorthNorth493433
btnEastEast573457
btnSouthSouth493487
btnWestWest412457

 

Add two RichTextBox controls

Use these values for them:

RichTextBox controls
NameXYWidthHeightReadOnly
rtbLocation34719360105TRUE
rtbMessages347130360286TRUE

 

Add two DataGridView controls – from the “Data” group of the Toolbox

When you add the DataGridViews, you’ll see a popup box with some options. Uncheck the boxes for “Enable Adding”, “Enable Editing”, and “Enable Deleting”.

Use these values for them:

DataGridView controls
NameXYWidthHeight
dgvInventory16130312309
dgvQuests16446312189

 

For both the DataGridViews, you also need to set these properties:

ReadOnly = True

EditMode = EditProgramatically

AllowUsersToAddRows = False

AllowUsersToDeleteRows = False

AllowUsersToResizeRows = False

Enabled = False

MultiSelect = False

RowHeadersVisible = False

 

Summary

We’ve added some new control types to the game.

The ComboBoxes will let the player select which weapon, or potion, they want to use during a battle. The RichTextBoxes will display status information about where the player is at and what is happening to them. And the DataGridViews will show lists of what the player has in their inventory and what quests they have.

 

Source code for this lesson

These is no source code for this lesson

 

Next lesson: Lesson 13.1 – Functions, procedures, and methods

Previous lesson: Lesson 11.1 – Using a static class

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

 

17 thoughts on “Lesson 12.1 – Add the remaining UI controls

  1. Thanks for the lessons!! On this page the label ‘Select Action’ is listed as X-627, which is outside the form bounds. In the video you put it at 617…Anyway, ty again!

  2. hi Scott,

    I’m kind of late to the game, but so far I’ve found this tutorial to be really great! I’ve actually followed up to lesson 16.3, and was getting ready to run the game. There are 5 errors in my SuperAdventure.Designer.cs class, and I can’t figure out how to fix them. I get a red squiggly line under rtbLocation_TextChanged in line 231 that looks like this:this.rtbMessages.TextChanged += new System.EventHandler(this.rtbMessages_TextChanged);

    this.rtbMessages.TextChanged += new System.EventHandler(this.rtbMessages_TextChanged);

    and I’m getting that sort of error with the same issue on lines 142, 151, 221, and 295 as well. I assume this is something I did wrong while creating the UI, as previous lessons haven’t altered this class.

    Any advice?

    thanks.

    1. Hi Emma,

      Try commenting out those lines with the red squiggles in SuperAdventure.Designer.cs (add two slashes “//” in front of them).

      What probably happened was that you accidentally double-clicked on some of the controls in the UI (like the Messages RichTextBox). When you do this, Visual Studio will create an eventhandler in the Designer page, and create a function in the .cs page that the eventhandler calls. But, if you overwrite the code in the .cs file with the the code in the lesson, that will eliminate the function. Then, the eventhandler in the Designer page will not be able to find its function, and this error happens. You can find out a bit more about this in Lesson 21.3 – Add a button and create its eventhandler in code, without the UI design screen

      Please let me know if commenting out those lines does not solve the problem.

  3. Been having some issues once I got down to Lessen 19 and was getting ready to do the xml for storing player data when I decided to go back through and fix any errors that may have happened. Most of them were simple things such as mistyped commands, however in superadventure.cs I am having 228 errors that I can not seem to find out how to fix. I managed to fix one error where for some reason the dgvInventory was not working, I found out that the properties didn’t save the name for the dgv, I was getting the dgvQuests as an error as well and went and changed the name under the properties for that one too, well that did not fix it, I am still getting that error for dgvQuests and I am also getting errors on every line after the dgvQuests are called.

     

    Here is a copy of my SuperAdventure.cs code

    http://pastebin.com/qAeF6b2R

    1. In the code on Pastebin, it looks like there are some lines missing at the end – probably closing curly braces. I don’t know if that is only something in Pastebin, or if that is also in your program. If those ending lines are missing in your source code, that would cause problems. Can you check that?

      If those lines are in your code, can you copy the error messages to a Pastebin file? That will help me discover the source of the error messages.

  4. Pretty sure I found the problem, got a bunch of empty labels on here from when I made the Hit points, Gold, and so on, I remember losing some of them and having to recreate them and I think that is causing problems im going to try and restart this whole thing now and see if that fixes the problem. Thank you for your reply

    1. You’re welcome. If you aren’t already using version control software, you might consider it. You can save a copy at the end of each lesson, after confirming it works. If it doesn’t work, you can undo your latest changes (so the source code is the same as it was before you started the lesson), and retry.

      I use TortoiseSVN and VisualSVN. Here is some more information on them, if you want to start using them: http://scottlilly.com/installing-tortoisesvn-subversion-and-visualsvn-for-visual-studio-2015-on-windows-10/

  5. Hi, I don’t know if you recognize me from another question but thanks for that answer; it cleared up some of it and for the parts I still don’t understand, I’ll reply to in that question.

    My problem for this question is this: I saw in a different question that double-clicking controls creates an eventhandler, so I looked through my SuperAdventure.cs and saw some extra stuff that I assumed were from double-clicking…and I deleted them. I thought it was okay because they appeared to be random. label3_Click was followed by label8_Click.

    Long story short, errors started happening. They say I don’t have a definition for label3_Click, label8_Click, or dataGridView1_CellContentClick. I can’t open my form at risk of data loss.

    The stupidest thing I did was save and close because I had to do something and I already had other errors (which I believe I fixed now) so I couldn’t run it to check at the time.

    Is there a source code file somewhere of the SuperAdventure.cs code after lesson 12.1 so I can rewrite whatever I deleted?

    1. You might be able to fix the problem by cleaning up SuperAdventure.Designer.cs. That file probably has links to the deleted functions. If you comment out the lines that are trying to connect to the missing functions, that could fix the problem.

      There is more information on how eventhandlers work in Lesson 21.3. The lines pointing to the missing functions probably have squiggly lines under them (Visual Studio’s way to indicate a line with a problem).

      Please tell me if you try that, and it does not fix the problem. I don’t have a copy of the project after each lesson. But, we can figure out a way to get your program working again.

      1. I commented out the 3 errors. That reduced me down to 1 error. That error is in the Player class where I have the line “public List Inventory { get; set; }”. Under Inventory there are red squiggles and the description reads “Inconsistent accessibility: property type ‘List’ is less accessible than property ‘Player.Inventory’.

        Lesson learned so far: comment out; don’t delete

  6. That was exactly what it was. It’s working now!

    Thanks for patiently answering my bombardment of questions. You’re awesome.

    1. You’re welcome. Now that you experienced that error, you’ll know what to look for the next time you see it. That is a large part of programming – knowing what to do when you encounter an error. 🙂

    1. We’re using a DataGridView because we want to display rows and columns of data – like a spreadsheet. For the Inventory, we’ll display the names of the items, and the quantity of the item that the player has. For the Quests, we’ll display the name of the quest and if the player has compelted it (or not).

      DataGridView controls let us add (and remove) rows, and we can fill the columns with properties of the objects we add to the datagrid.

Leave a Reply

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