.Net Programming - Financial independence

How to Work with Windows Forms (Part 1) – C#/Visual Basic

Now is the time to start looking at Windows Forms and how to create them! Windows Forms is used to display user friendly interface components so they can interact with the computer. In fact most of the interface windows in Microsoft Windows Operating System are created with either Windows Forms or WPF (Windows Presentation Foundation). This is why Windows Forms is such an important part of .Net programming (C# and VB.Net). Some might say that WPF, which is a newer technology will replace Windows Forms, and I must say that I thought so as well but after reading a few books and articles, it seems like WPF serves another purpose and that Windows Forms is here to stay!

In this tutorial we will cover an overview of the controls and what they have in common. Mostly, properties, events and methods.

Note: this tutorial contains a lot of images, if you cannot clearly see, you can just click on the one you want to expand it.

Introduction to Form Controls!

To create a new Windows Forms project, it is fairly the same procedure as creating a Console Application, but instead of choosing the Console template, you will have to pick the Windows Forms template. Make sure you select the right language! If you prefer using C# or Visual Basic doesn’t mather really.

Create new Windows Forms

Create new Windows Forms template

This should create an empty form like the one below. Note: My background is dark because I changed the theme of Visual Studio, I will provide a new Quick Tips on how to do that really soon!

Windows Forms

You can now drag and drop controls from the toolbox! Where is the toolbox? It should be on the left most of your Visual Studio interface, if it isn’t, you can click on the View menu item and then find Toolbox and click on it. The panel below should appear. You will then be able to expand All Windows Forms to gain access to all the available controls.

ToolBox and Controls

Try to find the Button control and drag it on your form. It should look like the image below. You can move your newly added button by dragging it around on the form if you want.

Form with Button

This button is built on a class, that means it has methods, properties and events (which we haven’t seen yet).

Properties

The properties of the button object can be changed to modify its appearance, text and more. They can be found in the Properties Window. Again, if you cannot see it, you will have to click on the View menu item and then Properties Window. It will look like:

Properties Window

If you click only once on the button you just added on your form. The Properties Window should change to display the button’s properties. You can try changing the Text property for example to change the content of the button! Isn’t that easy!

Button Properties

Above is an example of what it should give you once you’ve changed the Text property. Feel free to play with other properties and remember that each object that you can put on a form will have properties, methods and events, meaning that they all work pretty much the same way.

Events

An event will be raised at the time a specific action (most of the time from the user but can also be from the system) occurs. The best example is the Click event on the button. When is the event raised? When the user clicks on the button. You can have access to all the possible events of an object by using the event panel, switch from the properties to the event panel by clicking on the lightning icon at the top of the properties window. Also, you can switch the property or event view to A-Z with the A-Z button on the left (depending on your preference).

Event A to Z button

After you click on the event button, you will see all the events that this control (in our case, the button) will respond to. To create a new event handling in the code, simply double-click on the empty box beside the desired event, this will create the code automatically!

Tip: you can also double-click on the control itself to generate its default event, in the case of the button, it is the click event!

The code generated should look like:

Visual Basic

Public Class frmWinForms
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

    End Sub
End Class

C#

    public partial class frmWinForms : Form
    {
        public frmWinForms()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {

        }
    }

The two parameters passed are not really important for now, what is important is what is handled : Button1->Click. In other words, when the user will click this button, the code in the curly brackets (body) will be executed. You can put whatever you want in this code block, for example, we could change the Text property of the button itself.

Visual Basic

Public Class frmWinForms
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Button1.Text = "New Text!"
    End Sub
End Class

C#

    public partial class frmWinForms : Form
    {
        public frmWinForms()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            button1.Text = "New Test!";
        }
    }

Note: For C#, the InitializeComponent(); method is used to create the form itself and is in the Constructor for this purpose.

Button 1 Click event

Here is the chronological order of things when they happen : User clicks on the button -> Event Button1_Click is raised -> Button1_Click code is executed. The code above changes the Text property of the Button1, which changes what is written inside of the button.

Is it possible to change the name of this button for something a bit more relevant than button1? Sure it is! You will want to change the property Name in the properties Window. I will change the name of the button to btnClicker. This is kind of a wierd name but that’s because I am using a naming convention which consist of using a prefix abreviation of the control’s type. In our case, since it’s a button I will be using btn and a relevant name. Let’s pretend it’s a submit button, I could call it btnSubmit.

Once you’ve renamed the button, you can use it in your code with its new name!

Visual Basic

Public Class frmWinForms
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles btnClicker.Click
        btnClicker.Text = "New Text!"
    End Sub
End Class

C#

    public partial class frmWinForms : Form
    {
        public frmWinForms()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            btnClicker.Text = "New Test!";
        }
    }

This principle is the same for every control you will encounter.

Note: if your code does not run, it might be because I’ve changed the name of my form to frmWindForms, you can do that or just copy the method itself.

Methods

Controls can have methods too! To give you an example, I will use the Hide method of the button. In fact it does exactly what its called, hides the button.

Visual Basic

Public Class frmWinForms
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles btnClicker.Click
        btnClicker.Text = "New Text!"
        btnClicker.Hide()
    End Sub
End Class

C#

    public partial class frmWinForms : Form
    {
        public frmWinForms()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            btnClicker.Text = "New Test!";
            btnClicker.Hide();
        }
    }

The final result should look like:

Button method hide

Some controls have more methods than others, but remember that methods are actions and that, in Windows Forms, whenever you want to accomplish a task, you should ask yourself which control is going to be working or which control you should ask for information. If I want for example the content of a TextBox, I will ask for the name of this TextBox and its Text property:

Visual Basic

Dim AssignedValue As String = btnMyButton.Text

C#

string AssignedValue = btnMyButton.Text;

What’s next?

We’ve seen only one control yet, there are plenty more to explore but now you should have a better idea of how the Windows Forms controls work in general, this will help with what comes next. In the next tutorial we’re going to explore a few other controls in more or less details to get you started.

Here is the link to the part 2.

Visual Basic

C#

Next article How to Change Interface Theme in Visual Studio
Previous article Using Classes in Visual Basic/C# - Exercise and Solution

Related posts

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Comment

Your data will be safe! Your e-mail address will not be published. Also other data will not be shared with third person. Required fields marked as *