Your First C# ProgramDrawing a House on the Computer

Follow these instructions to write your first C# program on your computer. Note that this will only work on a Windows computer (Windows 7, Windows 8, or Windows 10).

These instructions use Microsoft Visual Studio Community 2015 to write the program (installation instructions are given below). You can also write the same program using other editions of Microsoft Visual Studio (Professional or Enterprise edition) version 2013 or 2015 or SharpDevelop (all versions) but the instructions and screens will be a little different. We will be using Visual Studio 2015 Professional Edition in class and as a student you can download and install the Community edition at home for free. (The programs we write in class will work in both editions.)

Download Microsoft Visual Studio Community 2015 Follow the steps outlined below to download and install Microsoft Visual Studio Community 2015. If you already have Microsoft Visual Studio 2015 (or 2013), then you can skip this heading completely and go to page 3.

Create a Microsoft AccountIn order to use the free Visual Studio Community edition, you’ll need to register it using a standard Microsoft account. If you already have a Microsoft account (with OneDrive storage space, Office online, and Outlook.com email, or an Xbox gamertag), then you can skip this section and go to “Download and Install Visual Studio Community 2015” below.

1. Open a web browser and go to http://signup.live.com. 2. You should see a page that looks like the image at right. Fill out the

information and click “Create Account”.3. If all is good, you will get to an account summary page (see at right).

If you created your account with an existing email address, click the link that says, “Verify your email address.” This will send a verification email to your email address. Open that email and click the Verify link in the blue box to verify your email address and activate your Microsoft account.

Download and Install Visual Studio Community 20151. Open a web browser and go to http://visualstudio.com.2. You should see a page that contains text that looks like the image below.

1

3. Click on the “Download Community 2015” link. This will download a file named vs_community.exe. Download the file then run it.

4. When you run the installer, it will start with the window pictured at right. You can stick with the Default installation or choose Custom to add additional features (we will not learn about any of these in class). Click Install to start the installation.

5. When you click Install, it will require administrator privileges to continue. Click Yes to continue (or supply credentials for an administrative user on that computer).

6. When installation is complete, you should see a large “LAUNCH” button at the bottom of the window. Click on this button to start Visual Studio 2015. (You might instead see a message indicating that you need to restart your computer before starting Visual Studio. If this is the case, restart your computer then launch Visual Studio 2015 by searching for it in the start menu.)

7. You should have launched Visual Studio in the last step. If it’s not running now, start it. There should be a new entry in the Windows start menu for “Visual Studio 2015.” (There are other icons installed with Visual Studio 2015 that we won’t use.)

8. On first launch of Visual Studio, you will see a Sign In window (see image at right). Click the Sign In button to sign in with the Microsoft account you created earlier. You can click the “Not now, maybe later” link to start Visual Studio without signing in, but Visual Studio will stop working after 30 days (you can sign in after this time if you want).

9. After the sign in window, you’ll see a window where you can choose your development settings and color theme. (It doesn’t matter what you choose here.) Click the “Start Visual Studio” button to start Visual Studio.

10. After the preliminary windows, Visual Studio will prepare itself for first use. When this is complete, the main Visual Studio window will appear:

Congratulations! You’ve installed Microsoft Visual Studio Community 2015 and you’re ready to start writing computer programs!

2

Write Your First Computer ProgramNow it’s time to use Visual Studio to write a computer program. We’ll write a program that draws a picture of a house in a window. If Visual Studio isn’t running, start it now. When Visual Studio starts up, it will look something like this:

3

Create a New ProjectClick the “New Project…” link (circled above) to start the process of creating a new project. (You can also use the New

Project button in the toolbar or use the File > New > Project menu to create a new project.) You’ll see a window like this (the list of project types in the middle might have additional items depending on your computer):

First, make sure “Visual C#” is selected in the left pane. Then select “Windows Forms Application” in the middle pane, then change the name to “DrawAHouse”.

Pay close attention to the location. Visual Studio will create a new folder under this location for your project and put all the files there. Make sure it’s a location you’ll be able to find again later. It’s also a good idea to uncheck the “Create directory for solution” box so you don’t have unnecessary extra folders.

4

Once you’ve made the necessary choices in the New Project dialog, click OK. This will create the new project and the Visual Studio window will look like this:

Now you will write the program to draw a house.

Write the ProgramNow that you’ve created a new project in Visual Studio, you’re ready to add C# code to the program to draw a house.

First, we’ll change the background of the window to black and the caption of the window to say “Draw a House”. We’ll use the properties window to do this. You should see it in the lower right corner of the Visual Studio window. (If you

don’t see it, you can make it appear by choosing “Properties Window” from the View menu.)

The properties window will initially have the Text property selected. This is the text that is displayed in the caption of the window form. The value of this property right now is “Form1”. (If this isn’t the case, make sure that the Form1 window is selected in the designer (note the dashed lines around the Form1 window which looks like a regular Windows application window).) Change the value of the Text property to “Draw a House”. (Do this by double-clicking on the “Form1” text, so it’s selected, then typing “Draw a House”.) (See figure at left.) Press enter to accept the value, then notice that the caption in the window form changes to “Draw a House”.

Next, find the BackColor property, which should be a few properties up from Text (when the properties are sorted by category). Click on the property name (“BackColor”) then press the Tab key to select the value of this property. Type Black and press enter. This will change the background color of the window form to black.

5

Now, scroll down to find the Size property, which will be in the Layout section. Change its value to “800, 800”. (See figure at right.)

Now the Visual Studio window should look something like this:

Now that the window form looks right, it’s time to write the C# program code to draw the house in the window form.

First, we’ll create an event handler for the paint event. This will allow us to write code that’s executed whenever the window needs to be redrawn on the screen. To create the event handler, first click on the events button ( ) at the top of the properties window, then scroll up to find the Paint event in the list (it is the only event in the Appearance category). (See figure at right.) Once you’ve found the Paint event, double-click on it. That will create an event handler function for the Paint event and switch to the code view so you can add code to the new function.

Now the Visual Studio window will look like the picture at right.

Notice that the text carat (the blinking vertical line on the source code page) is positioned between the opening and closing brace ( { and } ) of the function. (If the text carat in your window isn’t positioned there, click there with the mouse to move the text carat to that position.) Now type the following code (exactly as given here—captialization and punctuation matter; whitespace not so much):

Pen bluePen = new Pen(Color.CornflowerBlue, 4.0f); // Draw the roof e.Graphics.DrawLine(bluePen, 40, 391, 400, 9);

6

e.Graphics.DrawLine(bluePen, 400, 9, 760, 391); // Draw the walls e.Graphics.DrawLine(bluePen, 80, 348, 80, 800); e.Graphics.DrawLine(bluePen, 80, 800, 720, 800); e.Graphics.DrawLine(bluePen, 720, 800, 720, 348); bluePen.Dispose(); // Draw windows Pen yellowPen = new Pen(Color.PaleGoldenrod, 4.0f); e.Graphics.DrawRectangle(yellowPen, 200, 371, 120, 154); e.Graphics.DrawRectangle(yellowPen, 480, 371, 120, 154); e.Graphics.DrawLine(yellowPen, 260, 371, 260, 525); e.Graphics.DrawLine(yellowPen, 200, 448, 320, 448); e.Graphics.DrawLine(yellowPen, 540, 371, 540, 525); e.Graphics.DrawLine(yellowPen, 480, 448, 600, 448); yellowPen.Dispose(); // Draw door Pen greenPen = new Pen(Color.LightGreen, 4.0f); e.Graphics.DrawLine(greenPen, 340, 800, 340, 600); e.Graphics.DrawLine(greenPen, 340, 600, 460, 600); e.Graphics.DrawLine(greenPen, 460, 600, 460, 800); e.Graphics.DrawEllipse(greenPen, 428, 680, 18, 18); greenPen.Dispose();

As you’re typing the code, you will notice little windows popping up trying to help you write the code (see an example at right). You can ignore these windows completely (they will go away when you finish typing each part of the line) or press Enter to add the selected text to the code if it matches what you want to type.

Now your Visual Studio window will look like this:

If you see any wavy red underlines in the code once it’s all typed in, then something is wrong—double check the text (don’t forget the semicolons!) and make sure it’s all there and in the right order.

7

If everything looks good, you’re ready to run your program. Click on the Start Debugging button ( ) on the toolbar at the top of the Visual Studio window. (Or just press the F5 key.) This will run the program. A window should appear that looks like this (I changed the background color for this picture so it wouldn’t waste ink on the printer):

Click the red X at the upper right corner of the window to end the program.

Congratulations!! You are now a Windows programmer!

8