Yorkville High School Computer Science Department
Yorkville High School Computer Science Department on Facebook  Yorkville High School Computer Science Department Twitter Feed  Yorkville High School Computer Science Department on Instagram

Yorkville High School Computer Science

ASSIGNMENTS: House Builder - November 19, 2018 :: The Game - December 14, 2018 :: Pong - December 17, 2018

Computer Programming I :: Lessons :: The Visual Studio Environment

The Visual Studio Environment

While you can use a number of different programming languages to create a computer program we will be using the C# programming language in this course. C# is an object-oriented programming language created by Microsoft in 2001. Object-oriented programming will be defined later in the course, but it is a very important concept in computer programming. We will use Microsoft's Visual Studio application to write and run our programs in C#

  1. Open Visual Studio on your computer.
  2. Click on New Project... to make a new project.
  3. Name your project "Calculator" in the window that appears.
  4. Change the location to your Google Drive by clicking "Browse..." and finding your Google Drive folder.
  5. Under the Visual C# Section choose "Windows Forms Application."

The Visual Studio Start Screen

We will never change the default selection of Windows Forms Application in this course, but if you are interested in what the other options do they are described below.

There are a number of other application-specific options that you can try out if you're interested. The XNA Game Studio section will be used if you end up taking Computer Programming II.

The Form and Properties

There is a lot to look at when you first create an application in Visual Studio, but don't be overwhelmed. Focus on the center of the environment where you will see a form titled Form1.

A Form

The Properties WindowThe area above is the Form Designer where you will add buttons, menus, text, and other elements to create your applications. You will spend the beginning of nearly every project in this area setting up the look of your application.

The next area we are going to look at is the Properties Window on the right side of the environment. This area changes based on what you currently have selected on the Form, but since we don't have anything added to the Form yet the properties will reflect things that can be changed about the Form itself. There are a lot of properties you can change, but for now we will only change one of them.

  1. If the Properties Window is not open go to View>Properties Window.
  2. Find the Text Property.
  3. Change the property from "Form1" to "Calculator" and press "Enter."

After pressing "Enter" you should see the title of your form change at the top of the Form Designer. Since we made a change to our Form it is probably a good idea to save. You will see two buttons with disk icons in the toolbar under the menu. The left button is the Save Button that will save the currently open document, in our case Form1. The right button is the Save All Button that will save everything that is open. It is good practice to use the Save All Button so you can save everything.Save and Save All

  1. Click on Save All to save your project to your network drive.

The Toolbox

The ToolboxThe last area we are going to look at is the Toolbox. The Toolbox contains all the controls that you can add to your projects. The Common Controls section is where you will spend most of your time since it contains controls that are used a lot. Note the pin in the upper-right of the Toolbox. Clicking the pin will lock the Toolbox in place. If you don't do this the Toolbox will disappear when you hover away from it into a tab.

  1. If the Toolbox isn't visible go to View>Toolbox.
  2. Add a text box to your Form by double-clicking it.
  3. Resize the new text box by pulling on the resize handles that appear.

A text box is used to accept input from the user. You can type anything into a text box and we will use them quite a lot in our projects. A text box only accepts a single line of text, but there is a property that allows you to allow it to accept multiple lines. Can you find the property?

Another way to add controls to a form is by single-clicking them. Once you do this you can click-and-drag to make them the exact size you want.

  1. Single-click on the button control.
  2. Click-and-drag to add the button to the form.
  3. Add more buttons to create a calculator like the one below.

Beginning Calculator

Designing The Form

Now that we have the basic layout for our calculator we need to change the text property of the buttons.Button Properties

  1. Click on Button1.
  2. Look in the Properties Window and make sure the name in the upper-left has changed to Button1.
  3. Change the text property to "1".
  4. Change the text property for the rest of the buttons.

You can always look at the top of the Properties Window to see what item is currently selected. By default, the font used for all controls is Microsoft Sans Serif. This can look rather generic, though, so you may want to change the style of the text. You can do this with the font property. Hitting the plus sign next to the font property allows you to change the sub properties of the font property such as size and style.

Additionally, you change the font color using the fore color property. Clicking on this property brings up a window that allows you to choose a color. Finally, the back color property allows you to change the background color of a control. It works exactly the same as the fore color property.

Adding Pictures

You can add pictures to the background of controls using the background image property, but there are many times where you will want to have a picture all by itself on the Form. You can do this with the picture box control.Picture Box Properties

  1. Add a picture box to the form.
  2. Click on the arrow on the picture box to access its most-used properties.
  3. Click on Choose Image to select an image.
  4. Select Project Resource File.
  5. Click Import and select any image.
  6. Hit OK to add the picture to the picture box.

Project Resources

The difference between local and project resources is that project resources are automatically saved in your project's folder. Because of this it is usually best to choose project resources.

Finally, you can change the size mode property of a picture box. The different size modes are listed below:

Naming Controls

The last thing we are going to look at is naming the controls on your form. If you noticed all of our buttons are named button1, button2, etc. This isn't a big deal when we are designing the program, but when we begin to write code it can be hard to remember these names. We need to come up with a good method to name controls.

A method that was originally designed for naming elements of the code itself easily applies itself to naming controls. The method was developed by Charles Simonyi at Xerox in the 1970s and is known as Hungarian Notation. Simonyi is Hungarian and chose the name because Hungarian names are reversed compared to other European names. In Hungary the family name comes first, which is similar to how Hungarian Notation work.

Hungarian Notation works for controls by putting a 3-letter prefix that represents the control and then giving the control a name. For example, you could call the = button btnEquals. Generally, you put the prefix in all lowercase letters and the start of every new word as an uppercase letter. Below are some of the prefixes you can use in Visual Studio:

Yorkville High School Computer Science Department on Facebook Yorkville High School Computer Science Department Twitter Feed Yorkville High School Computer Science Department on Instagram