Exploring C# Form Design with Tim Corey — A Guided Walkthrough

Tim Corey

1h 06m 41s

In this lesson, Tim Corey takes us through the process of building the user interface for a C# Windows Forms application. He explains that the goal is not to write logic yet, but to turn the planning sketches from earlier lessons into real, functioning forms. Tim emphasizes that we will focus on design first, and later we'll connect everything with code. This is a deeper look at the topic of C# form building, and Tim's video helps explain how a Windows Forms app is constructed step by step inside Visual Studio.

Introduction to Form Building

Tim starts by welcoming us to lesson seven and states the purpose clearly: we're building the forms. He reminds us that this is similar to the class library work, but now we are implementing the actual UI based on our earlier planning sketches. Tim notes that we might be tempted to add code during this stage, but he urges us to concentrate only on building the forms.

He also explains that our previous designs were rough sketches, and now we're making the forms look good. Tim states that the design guide is important, and although he won't show the experimentation he went through, he will walk us through the end results. He also points out that the designs from planning step four are the basis for this lesson, and suggests referring back to those designs if needed.

Add New Project and Start a Windows Forms Application

Tim shows us how to add a new project to the solution. In Solution Explorer, he right-clicks the solution, selects Add New Project, and chooses Windows Form Application. This creates a new project type specifically for building Windows desktop applications. He names the project Tournament Tracker UI.

He explains that the default Form1.cs file is automatically generated when creating a Windows Forms app. Since the app needs a starting form, Tim decides not to delete it. Instead, he renames the file and the class to TournamentViewerForm, and accepts the prompt to rename all references. This ensures the main window of the application will run correctly.

Renaming the Form Class

Tim emphasizes that you must have a form that runs in a Windows Forms application. He explains that if you delete the default Form1.cs, you must update the entry point in Program.cs manually. To avoid that complexity, Tim simply renames the form. This is a typical step when starting a Windows Forms app: renaming the class and file to match the project's purpose.

Using the Properties Window

Tim pulls out the Properties Window and begins modifying the form's properties. He changes the Text property to "Tournament Viewer" so the title bar displays the proper name.

Next, he changes the BackColor from the default Visual Studio gray to white, explaining that white is more modern and doesn't distract from the form's content. This is part of establishing a design guide for the UI.

He then changes the Font to a 16-point modern font, and explains why this should be done early: controls added later will inherit the new font automatically. Tim explains that this is an important tip for building forms efficiently.

Changing the Icon and Resources

Tim changes the form's icon by importing a custom icon file. He explains that he used a free tool called Metro Studio to create the icon. This helps him avoid writing or designing icons from scratch. He also notes that he will use the same icon across all forms to create a cohesive look for the application.

Adding Controls to the Form

Tim begins building the UI by dragging controls from the Toolbox onto the form. He adds a header label and changes its properties:

• ForeColor → RGB (51, 153, 255)
• Font → Light, 28
• Text → "Tournament:"
• Name → "headerLabel"

He then copies and pastes the header label to create the tournament name label, setting its text to "None" temporarily and naming it tournamentNameLabel. Tim explains that copying and pasting controls is a quick way to maintain consistent styling and save time.

Adding Round Selection Controls

Tim adds a Round label and a ComboBox dropdown. He changes the label's font to 20 and sets the color to the same blue accent. He uses Visual Studio's alignment guides to make sure the controls line up properly.

Next, he adds a CheckBox labeled "Unplayed Only." He changes its style to flat and modifies the check mark color to blue. Tim also explains his naming convention: he adds the control type at the end (e.g., roundDropDown, unplayedOnlyCheckbox) to make searching and code navigation easier.

Adding Matchup List and Score Controls

Tim adds a ListBox named matchupListBox and sets its border style to fixed single. He explains that ListBox behaves similarly to ComboBox, which makes coding easier later.

Then he adds labels and text boxes for team names and scores. He demonstrates a powerful technique: selecting multiple controls, copying them, and pasting them together. This preserves spacing and layout, speeding up the design process.

Tim also explains that you must rename every control properly, avoiding default names like label1 or textBox2, which can cause confusion later.

Adding the VS Label and Score Button

Tim adds a "VS" label between the two team sections. Then he adds a Score button and customizes its style:

• FlatStyle → Flat
• BorderColor → Silver
• MouseDownBackColor → (102, 102, 102)
• MouseOverBackColor → (242, 242, 242)
• Font → Semi-bold, 16
• ForeColor → (51, 153, 255)
• Text → "Score"

He explains that these settings make the button look modern and responsive, especially when the user hovers or clicks.

Running the Form

Tim explains that the project currently has the wrong startup project. The class library is bold in Solution Explorer, which means it is set as the startup project, but a class library cannot run on its own. He sets Tracker UI as the startup project.

When he runs the application, the form appears with Windows 10 styling. Tim points out the hover and click behavior of the button, showing that the UI is responsive and modern.

Create Tournament Form

Tim adds a new form called CreateTournamentForm and sets its properties (font, color, icon). He copies controls from the Tournament Viewer form to speed up development.

He adds:

• Tournament name input
• Entry fee input (default value 0)
• Add team dropdown
• Create team link label
• Add team button
• Create prize button
• Tournament players list box
• Delete buttons
• Create tournament button

Tim explains his design choice to keep the link label blue because users are trained to recognize blue underlined text as a link.

Create Team Form

Tim creates the CreateTeamForm and adds:

• Team name input
• Select team member dropdown
• Add member button
• Group box for adding new members
• First name, last name, email, and cellphone fields
• Create member button
• Team members list box
• Delete selected member button
• Create team button

He explains that the group box provides a visual boundary and makes it easier to manage grouped controls. It also helps when moving the group as a unit.

Create Prize Form

Tim builds the CreatePrizeForm with:

• Place number input
• Place name input
• Prize amount input
• Prize percentage input
• "Or" label
• Create prize button

He uses alignment tools to ensure the layout looks clean and professional.

Tournament Dashboard Form

Tim builds the final form: TournamentDashboardForm. He adds:

• Load existing tournament dropdown
• Load tournament button
• Create tournament button

He uses alignment and spacing tools to make the layout visually balanced.

Naming and Organization Tips

Tim stresses the importance of proper naming. He shows how the Properties dropdown can help identify unnamed controls like label1 or textBox2 that were accidentally left behind. He demonstrates renaming a group box to addNewMemberGroupBox for clarity.

Setting the Startup Form

Tim explains how to change the startup form in Program.cs. He changes:

Application.Run(new TournamentViewerForm());

Application.Run(new TournamentViewerForm());

to:

Application.Run(new TournamentDashboardForm());

Application.Run(new TournamentDashboardForm());

He explains that this line creates the form instance and pauses the application until the form is closed.

Why Main Matters

Tim compares Windows Forms to console applications: both have a static void Main. He clarifies that once Main completes, the application closes. That's why the form must remain open to keep the application running.

He also notes that Visual Studio includes XML comments, and he encourages adding XML documentation for methods later.

What Comes Next

Tim concludes the lesson by stating that the next step is wiring the forms together with logic. He reassures viewers that the intimidating part is coming, but it will be manageable once the forms are built. He says the logic will feel like assembling LEGO pieces, and the hard part will gradually disappear as we progress.