Visual C# Lesson 2: Labels and TextBoxes

Introduction

In this tutorial, we will explore adding and interacting with labels and textboxes in Visual Studio 2012. 

I assume you know how to create a Windows Forms Application, as described in Visual C# Lesson 1.

Adding a Button, a Label and a TextBox

A label is a user interface control that is typically used for displaying information.  This information could be static information - like a basic "signpost" telling the user "hey, here is where you enter your name:", or it can be used to output information to the user in a more complex fashion.

A textbox is a control that is typically used to obtain user input.  The user types something in it, then sometime later, your program makes use of this input.

Before we proceed, let's add the two user interface controls. 

1. Create a new Windows Forms Application in C# and name it Lesson2
2. Drag a Label control from the Toolbox onto the form
3. Drag a TextBox control onto the form
4. Move the textbox so it is near the top of the form, and make it a little wider using the sizing handles
5. Move the label so it's a little bit under the textbox
6. Add a Button onto the form and put it near the bottom of the label and textbox

It should look something like the following when you're done with the above steps:



 



Now we need to modify the properties in the Properties window.  For each of the controls, make the following modifications:

The label1 label

• Change the (Name) property to lblOutput
• Remove the text in the Text property entirely

Don't be afraid that you can't "grab" the label easily on the form in Design View anymore.  It's actually very easy to select it again.  You just go to the drop-down above the Properties window and select the control you want.


The textBox1 textbox

• Change the (Name) property to txtInput

Since textboxes do not contain text by default, you don't have to modify the Text property

The button1 button

• Change the (Name) property to btnExecute
• Change the Text property to Click Me!

Generating the Event Handler

Just like we did in Lesson 1, double click the btnExecute button to generate the event handler.  You are now in the Code view.  Inside the event handler, you will add statements to simply set the lblOutput label's Text property equal to the Text property of txtInput.

Let's look at the code I've added:

       private void btnExecute_Click(object sender, EventArgs e)
        {
            lblOutput.Text = txtInput.Text;
        }

This code is fairly straightforward.  I'm saying, "When the user clicks the button btnExecute, set the lblOutput's Text property equal to the Text property of the txtInput text box."

So, all three of our controls are playing a part in this.  The button is used as the "signaller" to the program to say "do this...".  The label lblOutput has its Text property changed to whatever text string is in the txtInput text box's Text property.

Observing the Output

Build and run the application and then put your name in the text box, and click the button.  The label will echo the text in the text box.  You can keep modifying the text in the text box and clicking the button and it will update the label's text.

 

 

Summary

 



This very simply application gives us insight into the inner-workings of a Windows Forms application.  Specifically, we looked at how we can use labels, textboxes, and buttons to interact with the user.  If you're coming from a programming language where you wrote Console applications, then you're used to writing code and having it execute in a realitvely sequential manner (with slight variations due to our selection and repetition control structures like if-statements and while-loops.)

This paradigm of programming we're using is called event-driven programming.  Event-driven programs respond to, well, events!  An event can be a number of different things - clicking a button, typing in a text box, the selected item in a drop-down menu (ListBox).  The sky is the limit.  We will explore more as I write more tutorials.