Web Design that taps into the haromny and vision of your dreams.

Basics of C# Windows Forms Applications

How to create a basic Windows application

Written By on in C#

1,045 words, estimated reading time 5 minutes.

This guide will give you an introduction to Windows Forms development using Visual Studio and C# and the basics of form design.

Windows Forms Applications Series
  1. Basics of C# Windows Forms Applications
  2. Menus, Popups and Toolbars in .Net Forms and C#
  3. Using Common Dialogue Boxes in C#
  4. List Boxes and Tree Views in C#
  5. List Box Data Binding in C# Windows Forms Application
  6. Using Multiple Forms in C# Applications with MDI
  7. Creating Controls for Windows Forms and C#
  8. Saving User Preferences and Settings within your C# Application

This article relates to an old version of the .Net Framework. While the contents are still relevant, future versions of the framework may change, or improve upon, the contents of this article.

Controls such as text boxes, buttons, checkboxes and so on, can all be added to a form by dragging and dropping from the toolbox to the form. The editor will also allow you to align multiple controls and will show you the recommended distance between controls.

When you create a new Windows Application project in Visual Studio or Visual C# Express, you are presented with a blank form in design mode. You can resize the form using the draggable corner markers and you can drag controls to the form by dragging and dropping them from the toolbox to the form.

The main areas of the Integrated Development Environment (IDE) that will be used are the form designer, code designer, control toolbox, solution explorer and the properties window. If these panels or windows are not visible in your IDE, you can access them from within the View menu. They can be set to fold away when not in use to create more design/code space and appear when you hover over the tab, or it can be 'pinned' with the push pin icon and it will stay open in its current position.

Visual Basic Form Design
Visual Basic Form Design

Have a play with dragging components onto the form from the toolbox and add a text box. Now add a button to the form and drag it around. Notice how the editor will provide alignment markers, and how it will 'snap' to the recommended position next to the textbox.

It is very highly recommended, as well as good practice, to name all components and forms properly and meaningful. When you have a complex form, it is difficult to differentiate between Button1, Button2, Button3, TextBox1, TextBox2, TextBox3 and so on when you are coding. It much much better to give these components proper names to avoid confusion.

The recommendation is to use a three-letter prefix (lowercase) for the type of control (e.g. btn for Button, txt for TextBox, lbl for Label and so on) followed by a meaningful name (e.g. btnSubmitData, txtUsername or lblPasswordReminder). You should also rename the form to frmMain or an appropriate name for the function of the form.

You can rename components by changing the (Name) property in the properties window.

I have named the button btnShowMessage and the text box txtUserInput. You should also give the button a caption that is meaningful, so find the property called Title and type in "Show Message".

The most used feature of the ID is the properties and Events window. Events will be covered in more detail in a later tutorial, but for the purposes of Windows Forms, an event is called when the user does something, e.g. Clicks a button, this will fire the Click event of the button. Events in Windows applications are automatically wired up, you do not have to do any special coding. Events can be automatically wired up in one of two ways. You can double-click a component, which will auto-wire the components default event (Default button event is the Click event, Default form event is Load). The other method is to select the component and select events from the Properties window. This will list all the events associated with that control, to wire up an event simply double click the event which will load up the code editor with the event wired up for you.

Visual C# Properties Window
Visual C# Properties Window

Let's continue our simple demo program, double click on the button and you will a new function in the code:

private void btnShowMessage_Click(object sender, EventArgs e)
{
 
}

Into this function, we shall show a message box containing the data entered in the text box.

MessageBox.Show(txtUserInput.Text);

When run, this will show a message box with the string entered into the text box.

Auto Code Generation

When you place a button or a textbox (or any other component) onto a form, an instance of an object is created for you. At the top of the code viewer, you may have noticed two drop down boxes. These allow you to quickly navigate through your methods, events and classes. If you drop down the right-hand box, select the InitializeComponent method. This will take you to a hidden region in the code that contains the code added by Visual Studio. You should be able to locate two lines that create a text box and button.

this.btnShowMessage = new System.Windows.Forms.Button();
this.txtUserInput = new System.Windows.Forms.TextBox();
 

Because we are creating an instance of classes defined by Microsoft, they all inherit certain methods and properties. All objects will have a ToString method, and all controls will have an ID and Name among other items. Input elements will have a Text or Value property, all clickable items (Button, Checkbox, Radio button and so on) will have a click event. Default values are setup in the InitializeComponent method, you can add or modify these items.

A little lower down, you should be able to find a line that hooks up the click event to a click function, such as the one shown below.

this.btnShowMessage.Click += new System.EventHandler(this.btnShowMessage_Click);

You do not have to worry about any of these automatically generated code sections and they have hidden away from you, but you should still be familiar with the concepts.

We Digress

Back to our program, we are going to add another button under our existing button, named btnUpdateTextBox with a title of Update. Double click on the button to add the event and enter the code below:

txtUserInput.Text = "Hello World"

Now when you run the program, you can type some text into the box and press the first button to see a message dialogue with the contents of the text box and press the second to update the contents of the text box.

Summary and Conclusions

In this tutorial, we have seen briefly how to use the Visual Studio Integrated Development Environment (IDE), how to add controls to a form, events, showing message boxes and how to read and write properties of components.

Last updated on: Friday 23rd June 2017

 

Comments
Matt

Matt

Short, concise, beautiful.

Reply to Matt

 

Leave a Reply

Your email address will not be published.





If you find something abusive or that does not comply with our terms or guidelines please flag it as inappropriate.

Copyright © 2001-2018 Tim Trott, all rights reserved. Web Design by Azulia Designs

This web page is licensed for your personal, private, non-commercial use only.

Disclaimer, Privacy & LegalSitemapContact Me