Designing the User Interface

Learn how to plan, customise, and build professional Windows Forms interfaces in Visual Basic 2026 — both at design-time using the Properties Window and at runtime using VB.NET code.

2.1 Introduction to UI Design

Before writing a single line of code, every professional developer starts with a plan. Whether you are building a desktop game, a financial calculator, a database management tool, or a multimedia application, having a clear picture of what the interface should look like will save you hours of redesign work later.

Visual Basic 2026 follows an event-driven programming model — your application responds to things the user does (clicking buttons, typing text, selecting items). The UI you design defines what the user can do and how they interact with your program. Getting it right from the start matters.

The Two-Stage UI Development Workflow

2.2 The Properties Window

The Properties Window is the central hub for customising every aspect of your form and controls at design-time — before you run the program. You can open it at any time by pressing F4 or selecting View → Properties Window from the menu.

It is divided into three key areas:

2.3 Customising the Default Form

When you create a new Windows Forms project in Visual Basic 2026, you get a default blank form called Form1. The first thing most developers do is customise it to suit their application. Here are the most important form properties you should know:

Interactive Properties Demo

Below is a representation of how the Properties Window looks after customising Form1 for a simple application. Properties that have been changed from their defaults are highlighted:

Choosing Colours

When you click on a colour property such as BackColor or ForeColor, Visual Studio 2026 opens a colour picker with three tabs:

2.4 Changing Form Properties at Runtime

Setting properties in the Properties Window works perfectly for fixed designs. But sometimes you want properties to change while the program is running — for example, changing the background colour when a user clicks a button, or resizing the form based on a user's preference. This is called runtime property modification, and it is done through VB.NET code.

In code, the current form is always referred to using the Me keyword. Think of Me as the form saying "I" — Me.BackColor means "my background colour".

Example 2.1 — Setting Form Properties on Load

The most common place to set runtime properties is in the Form_Load event — code that runs automatically as soon as the form opens. Double-click on an empty area of the form in the designer to create this event handler:

Public Class Form1

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

        ' Set the title bar text
        Me.Text = "My First VB 2026 Program"

        ' Set the background colour
        Me.BackColor = Color.LavenderBlush

        ' Set the default text colour
        Me.ForeColor = Color.Crimson

        ' Disable the maximise button
        Me.MaximizeBox = False

        ' Keep the minimise button enabled
        Me.MinimizeBox = True

    End Sub

End Class

Example 2.2 — Advanced Form Customisation

This example demonstrates additional runtime properties including form size, opacity, and screen positioning — all available as first-class properties in Visual Basic 2026:

Public Class Form1

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

        ' Title bar text
        Me.Text = "My First VB 2026 Project"

        ' Background colour
        Me.BackColor = Color.Beige
		
		' Foreground colour
        Me.ForeColor = Color.Red

        ' Disable maximise button
        Me.MaximizeBox = False
        Me.MinimizeBox = True

        ' Set the form size to 500 x 400 pixels
        Me.Size = New Size(500, 400)

        ' Set form opacity to 90% (slightly transparent)
        Me.Opacity = 0.9

        ' Centre the form on the user's screen
        Me.CenterToScreen()

        ' Prevent the user from resizing the form
        Me.FormBorderStyle = FormBorderStyle.FixedSingle

    End Sub

End Class

2.5 Common Runtime Form Properties

Here is a complete reference of the most useful form properties you can set at runtime in Visual Basic 2026:

2.6 Using GitHub Copilot to Design Your UI

Visual Studio 2026 ships with deep GitHub Copilot integration that makes UI design faster than ever. Here are three practical ways to use Copilot specifically for designing forms in Visual Basic 2026:

1. Generate Form Properties Code from a Comment

Type a comment describing what you want, press Enter, and Copilot suggests the code:

' Create a dark-themed form, 600x400, centred on screen, non-resizable
' ↓ Copilot generates all of the following automatically:
Me.BackColor = Color.FromArgb(30, 30, 30)
Me.ForeColor = Color.White
Me.Size = New Size(600, 400)
Me.CenterToScreen()
Me.FormBorderStyle = FormBorderStyle.FixedSingle
Me.Text = "Dark Theme App"

2. Ask Copilot Chat to Explain a Property

If you see a property in the Properties Window that you do not understand — for example ImeMode or KeyPreview — open Copilot Chat (View → GitHub Copilot Chat) and ask: "What does the KeyPreview property do on a Windows Form?". Copilot explains it in plain English with an example.

3. Let Copilot Suggest Appropriate Colours

Ask the Copilot Chat: "What background and foreground colour combinations work well for a professional business application in VB.NET?" — Copilot will suggest colour pairings with good contrast ratios and provide the exact Color values to paste into your code.

Related Resources

Featured Books

Visual Basic 2022 Made Easy

by Dr. Liew Voon Kiong

The ultimate beginner-friendly guide to Windows Forms development with Visual Basic — clear, step-by-step, and beginner-accessible.

View on Amazon →

VB Programming With Code Examples

by Dr. Liew Voon Kiong

48 fully-explained code examples spanning VB6 through VB.NET — ideal for building real-world applications.

View on Amazon →