WPF Lesson 4.1 — First Window

WPF Desktop

First Window

“A real Windows app. Buttons. Text. Yours. Running on your desktop.”

⏱ About 20 minutes 🛠 Visual Studio Community ⭐ Lesson 1 of 3

Most coding sites skip WPF entirely. Not here.

WPF lets you build real Windows desktop apps — actual windows with buttons, text boxes, and forms that run on your computer. It’s used in professional software every day. You’re about to build one.

What you will have

A real Windows desktop app with a text box, a button, and a label. You type your name, click the button, and the label updates with a personalised greeting.

This is not a console window. This is a proper Windows application running on your desktop — with a title bar, minimize button, and everything.

Video Walkthrough

Watch the full lesson walkthrough.

Before you start

You need Visual Studio with the right workload.

If you’ve already done the C# Console lessons you have Visual Studio installed. Go to Tools → Get Tools and Features → make sure “.NET desktop development” is ticked.

Your prompt

Copy this. Paste it into your AI. Hit Enter.

📋 Your Prompt — Copy Everything Below

Create a WPF application in C#. The window should have a title “My First WPF App”. Include a TextBox where the user types their name, a Button labelled “Greet Me”, and a Label below the button. When the button is clicked, update the Label to show a friendly personalised greeting using the name from the TextBox. Keep the layout clean and centred. Include comments explaining the key parts.

✅ Copied! Now paste it into your AI.

What to do after

WPF is slightly different to Console — follow these steps carefully.

Create a new WPF project

Visual Studio → Create a new project → search WPF Application → select C# → name it FirstWindow → Create.

Notice there are TWO files

WPF projects have MainWindow.xaml (the visual layout) and MainWindow.xaml.cs (the logic). Put each piece of code in the right file.

Replace MainWindow.xaml content

Click MainWindow.xaml → Ctrl+A → Delete → paste the XAML code.

Replace MainWindow.xaml.cs content

Click MainWindow.xaml.cs → Ctrl+A → Delete → paste the C# code.

Press F5 to run

A real Windows window will appear. Type your name and click the button.

🛠️ Didn’t work?

WPF has two files — the most common mistake is putting code in the wrong one. Check that first. Then:

1 Look at the error list at the bottom of Visual Studio

2 Copy the error message

3 Say: “This didn’t work. Here’s the error: [paste it]. Please fix it.”

Vibe Tweak

Change the window colour.

Open MainWindow.xaml. Find the Background property. Change it to #1E3A5F — a deep navy blue.

Find this

Background=”White”

→

Change to this

Background=”#1E3A5F”

Extra Credit

Want to go further?

📋 Extra Credit Prompt

Update the WPF greeting app to also ask for the user’s favourite colour in a second TextBox. When the button is clicked, change the background colour of the window to the colour they typed. Handle invalid colour names gracefully.

✅ Copied!

Reflection

Before you move on — think about this.

“You just built a real Windows desktop application. Not a webpage. Not a console window. An actual app with a title bar and a button that does something when you click it.”

Up next

WPF Lesson 4.2 — Registration Form

Name, email, dropdown, buttons. A proper form that validates input and actually works.

Next Lesson →