Programming Winforms in C# Tutorial

01
of 05

Your First Winform in C#

Visual Studio Form Designer

When you create a new project in Visual C# (or Visual Studio 2003, 2005 or 2008) and select Visual C# Project and Windows Application, you select a path to put the project somewhere, give it a name such as "ex1" and click OK. You should see something like the accompanying graphic. If you can't see the Toolbox on the left, click View, then Toolbox on the menu or Ctrl-Alt-X on the keyboard. If you want the toolbox to remain open, click the pushpin, just to the left of the Close Toolbox X.

Resize the form by clicking and dragging the right or bottom handles. Now click on Button in the toolbox and drag it onto the form in the bottom right corner. Resize it as you wish. In the bottom right of the Visual C#/Visual Studio IDE, you should see a docked window called Properties. If you can't see it, right-click the button on the form (it will say button1) and click properties at the bottom of the pop-up menu that appears. This window has a push-pin on it so you can close or keep it open as you wish.

In the Properties window, you should see a line that says:

 (Name) button1

If it says "Form1" instead of "button1," then you accidentally clicked the form. Just click on the button. Now, double-click where it says button1 in the Inspector and type btnClose. Scroll to the bottom of the Property Inspector and you should see:

 Text button1

Double click button1, type "Close" and press Enter. You should now see the button has the word Close on it.

02
of 05

Adding a Form Event

Form Designer - setting Properties

Click on the form and in the Property Inspector and change Text to My First App! You'll see that the form caption now displays this. Double-click on the ​Close button and you'll see C# code that looks like this:

 private void btnClose_Click(object sender, System.EventArgs e) {

 }

In between the two braces add:

Close(); 

Click Build on the top menu followed by Build Solution. If it compiles properly (which it should), you see the words "Build Succeeded" on the IDE bottom status line. Click F5 to run the application and show you an open form. Click the Close button to close it.

Use Windows Explorer to find your project. If you called the Project Name and New Solution Name "ex1," you'll be looking in ex1\ex1. Double-click it and you'll see the application run again.

You've created your first application. Now, add functionality.

03
of 05

Adding Functionality to the C# Application

First C# Application - designer view

Every form you create has two parts to it:

  • Design view, where you drop controls on the form, set properties and add event handling code
  • Code view, where you write code. If you can't see the code part, click View then Code on the top menu. You should see Form1.cs [design] and Form1.cs tabs.

Your first form is a simple application that lets you enter a string and then display it. To add a simple menu, select the Form1 [design] tab, click MainMenu on the toolbox and drag it to the form. You'll see a menu bar appear on the form, but the control is displayed on a yellow panel beneath the form. Use this to select the menu control.

Click the menu bar on the form where it says "Type Here" and type "File." You'll see two Type Heres. One to the right for adding further top-level menu items and one below for adding sub-menu items. Type "Reset" on the top menu and exit to the File sub-menu.

Add a label on the form near the top left and set the text to "Enter A String." Under this, drag a TextBox and change its name to "EdEntry" and clear the text so it looks blank. Set its locked property to "True" to stop you from accidentally moving it.

04
of 05

Adding a StatusBar and Event Handler

First c# application in action

Drag a StatusBar onto the form, set Locked to "True" and clear its Text property. If this hides the Close button, move it up until it is visible. The StatusBar has a resize grip in the bottom right corner, but if you compile and run this, the Close button does not move when you resize the form. This is easily fixed by changing the anchor property of the form so that the bottom and right anchors are set. When you change the anchor property, you'll see four bars at top, left, bottom and right. Click the ones you want to use. For this example, we want the bottom and right set, so clear the other two, which are set by default. If you have all four set, then the button stretches. 

Add one more label beneath the TextBox and name it labelData. Now select the TextBox and on the property Inspector, click the Lightning Icon. This shows all the events that a TextBox can do. The default is "TextChanged," and that's what you use. Select the TextBox and double-click it. This creates an empty event handler, so add these two lines of code between the curly braces { } and compile and run the application.

 labelData.Text = EdEntry.Text;
 statusBar1.Text = EdEntry.Text;

When the application is running, click in the TextBox and start typing. You'll see the characters you type appear twice, once below the box and once in the StatusBar. The code that does that is in an event handler (it's known as a delegate in C#).

 private void EdEntry_TextChanged(object sender, System.EventArgs e)
   {
     labelData.Text = EdEntry.Text;
     statusBar1.Text = EdEntry.Text;
    }
05
of 05

Reviewing What Has been Covered

Hiding a control

This article demonstrates a fundamental part of working with WinForms. Every form or control on it is an instance of a class. When you drop a control on a form and set its properties in the Property Editor, the designer generates code behind the scenes.

Every control on a form is an instance of a System.Windows.Forms class and is created in the InitializeComponent() method. You can add or edit code here. For instance, in the ​// menuItem2 section, add this on the end and compile/run.

 this.menuItem2.Visible = false;

It should now look like:

 ...
 // menuItem2
 // 
 this.menuItem2.Index = 1;
 this.menuItem2.Text = "&Reset";
 this.menuItem2.Visible = false;
 ...

The Reset Menu item is now missing. Exit the program, and in the properties for this menu item, you'll see that the Visible property is false. Toggle this property in the designer, and the code in the Form1.cs will add then remove the line. The Form Editor is great for easily creating sophisticated GUIs, but all it is doing is manipulating your source code.

Adding a Delegate Dynamically

Set the Reset Menu visible but set Enabled to false. When you run the app, you'll see it disabled. Now add a CheckBox, call it cbAllowReset and set the text to "Allow Reset." Double-click the check box to create a dummy event handler and enter this:

 menuItem2.Enabled = cbAllowReset.Checked;

When you run the application, you can enable the Reset Menu item by clicking the checkbox. It still doesn't actually do anything, so add this function by typing it in. Don't double-click the Reset Menu item.

 private void EdEntry_ResetClicked(object sender, System.EventArgs e)
 {
 EdEntry.Text = "";
 }

If you run the app, when Reset is clicked nothing happens, because the Reset event isn't joined up to the ResetClick. Add this if statement to the cbAllow_ResetCheckedChanged() just after the line that starts:

 menuItem2.Enabled = cbAllowReset.Checked;
 if (menuItem2.Enabled) 
 {
 this.menuItem2.Click += new System.EventHandler(this.EdEntry_ResetClicked) ;
 }

The function should now look like this:

 private void cbAllowReset_CheckedChanged(object sender, System.EventArgs e)
 {
   menuItem2.Enabled = cbAllowReset.Checked;
   if (menuItem2.Enabled) 
     {
      this.menuItem2.Click += new System.EventHandler(this.EdEntry_ResetClicked) ;
   }
 }

When you run it now, type some text in the box, click the check box and click Reset. The text is cleared. This added the code to wire up an event at run-time.