Drawing User Interface Controls in C# WinForms

Buttons, Labels, and TextBoxes in Windows Forms

Windows Forms makes it easy to build interactive desktop apps with drag-and-drop controls — but you can also create and place controls using code! This is a great way to learn how the UI works under the hood and gives you more dynamic control.

🧰 What Are UI Controls?

UI controls are the building blocks of your application’s interface — things like buttons, labels, and text boxes. While Visual Studio lets you drag them onto a form, you can also create them directly in C# code using the System.Windows.Forms namespace.

🚀 Getting Started

🛠 Requirements:

• Visual Studio 2022 (or newer)
• .NET Desktop Development workload

✨ Creating a WinForms Project:

1. Open Visual Studio
2. Click Create a new project
3. Search for Windows Forms App (.NET)
4. Select C#, name your project, and click Create

✅ You’ll see a blank form — let’s add controls using code!

🧱 Drawing Controls in Code

You can create and place controls like this:

Label label1 = new Label();
label1.Text = "Name:";
label1.Location = new Point(10, 20);
label1.AutoSize = true;
this.Controls.Add(label1);

✅ Most common UI controls:

⚙️ Example: Hello App Using Code

Let’s create a simple app that says hello when a button is clicked.

🧩 Full Example:

using System;
using System.Drawing;
using System.Windows.Forms;

public class HelloForm : Form
{
    public HelloForm()
    {
        this.Text = "Hello App";

        Label lbl = new Label();
        lbl.Text = "Enter your name:";
        lbl.Location = new Point(10, 20);
        lbl.AutoSize = true;
        this.Controls.Add(lbl);

        TextBox txt = new TextBox();
        txt.Location = new Point(130, 18);
        txt.Width = 150;
        this.Controls.Add(txt);

        Button btn = new Button();
        btn.Text = "Say Hello";
        btn.Location = new Point(10, 60);
        this.Controls.Add(btn);

        Label output = new Label();
        output.Location = new Point(10, 100);
        output.AutoSize = true;
        this.Controls.Add(output);

        btn.Click += (s, e) => {
            output.Text = "Hello, " + txt.Text + "!";
        };
    }

    [STAThread]
    public static void Main()
    {
        Application.Run(new HelloForm());
    }
}

🧠 How It Works

• You create each control with new
• You set properties like .Text, .Location, and .Size
• You add them to the form with this.Controls.Add()
• You can handle events like Click to respond to user actions

🗂 Project Structure Review

✅ Best Practices

• ✅ Use clear, meaningful control names (txtName, btnSubmit)
• ✅ Keep control setup separate from logic where possible
• ✅ Use layout features like Anchor, Dock for resizing
• ✅ Group related controls with Panel or GroupBox

🧪 Quick Challenge

🧩 Create a small app that:

• Takes two text inputs: Name & City
• Shows a message like:
  "Hi Mia from London!"

💡 Hints:

• Use two TextBox controls
• One Button
• One Label for output
• Use += (s, e) => {} to handle the Click event

🖼 Visual Guide

-------------------------------
| Name:  [__________]         |
| City:  [__________]         |
|                             |
| [ Show Message ]            |
|                             |
| Hi Mia from London!         |
-------------------------------

📚 Summary

🎓 Want to Build More?

• ✅ Make a calculator app
• ✅ Build a simple login screen
• ✅ Add image support with PictureBox
• ✅ Create multi-form apps
• ✅ Combine with file save/load or SQLite database

💬 Got questions? Want help building your first dynamic UI?
We’re here to help you bring your ideas to life, one control at a time.