Desktop Apps with WPF and XAML

WPF (Windows Presentation Foundation) is the modern way to build rich Windows desktop apps in C#. By the end of this lesson you'll be able to lay out a window in XAML , understand the visual tree , arrange controls with Grid and StackPanel , connect UI to data with {' '} , push live updates through INotifyPropertyChanged , and structure the whole thing cleanly with the MVVM pattern and ICommand .

Learn Desktop Apps with WPF and XAML in our free C# course — an interactive lesson with worked examples, a practice exercise and a quick reference.

Part of the free C# course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Think of building a house. XAML is the blueprint — it declares what rooms exist and where the walls go, without doing any construction itself. The ViewModel is the building's wiring and plumbing : it holds the state (is the light on? what's the thermostat reading?) and the actions (flip the switch). Data binding is the wire connecting the switch on the wall to the light — flip one and the other responds automatically, with no one manually carrying the signal across. MVVM is simply keeping the blueprint, the wiring, and the raw building materials as three separate, swappable layers.

WPF flips how you think about UIs. Instead of writing code that creates and positions every control, you declare the interface in XAML and bind its properties to data. When the data changes, the UI updates itself; when the user edits the UI, the data updates itself. Your C# stops poking at controls and instead manages plain objects.

The payoff: your logic lives in testable ViewModel classes, and the XAML is a thin, swappable skin. That separation is the entire point of MVVM.

Bindings on the View resolve against its DataContext , which you typically set to an instance of the ViewModel.

1. XAML, the Visual Tree, and Layout Panels

XAML is XML that describes your UI. A Window contains a single root element — usually a layout panel that arranges children. A Grid splits space into rows and columns for aligned, resizable layouts; a StackPanel simply stacks children in a line. All these elements together form the visual tree that WPF renders. Read the worked example and notice how Grid.Row places elements into rows.

2. Live Updates with INotifyPropertyChanged

For the UI to refresh when data changes, the bound object must implement INotifyPropertyChanged and raise its PropertyChanged event in each property setter. WPF bindings subscribe to that event and update the screen. The [CallerMemberName] attribute fills in the property name for you, so you rarely type it by hand. Notice how the computed Greeting is refreshed by also notifying for it when Name changes.

Your turn. This counter ViewModel just needs to store the incoming value and pass the property name to the event. Fill in the two ___ blanks using the hints.

3. Data Binding and DataContext

A binding links a control property to a property on the DataContext . Write Text="{' '}" and the TextBox stays in sync with the ViewModel's Message . The DataContext — typically set to your ViewModel — is the object every {' '} on that element and its children resolves against. Bindings can flow one way or two ways, so user edits push back into the ViewModel.

4. Commands with ICommand and RelayCommand

Rather than handling button clicks in code-behind, MVVM binds a control's Command to an ICommand on the ViewModel. A reusable RelayCommand wraps two delegates: Execute (what to do) and CanExecute (whether it's allowed — WPF uses it to enable or disable the control). This keeps click logic testable and out of the View entirely.

Now you try — in XAML this time. Two-way bind the TextBox to Message and bind the Button's command to SaveCommand . Fill in the two ___ blanks:

WPF lets you define reusable look-and-feel in resources and apply it with styles — think of a style as CSS for controls. A Style sets a bundle of properties on a target type, stored in a ResourceDictionary and referenced by key (or applied to every control of a type).

The reason bindings, styles, and animations can target control properties at all is dependency properties — a special WPF property system that supports change notification, data binding, and value inheritance down the visual tree. You'll mostly use them through XAML; you only author your own when building custom controls.

Here's a compact MVVM ViewModel that uses everything above: an ObservableCollection (which notifies the UI when items change), a bindable NewItem property, and an AddCommand that's only enabled when there's text. The View binds a TextBox, a Button, and a ListBox to it — with zero code-behind.

Because the collection and properties raise change notifications, the list and button state update on their own as the user types and clicks.

WinForms draws pixel-based controls and you mostly position them in code. WPF uses XAML markup with resolution-independent vector rendering, plus powerful data binding, templating, and styling — which is what makes MVVM practical.

Q: Why must my ViewModel implement INotifyPropertyChanged ?

Bindings need to know when a value changes so they can refresh the UI. INotifyPropertyChanged raises the PropertyChanged event that bindings listen for. Without it, the UI shows the initial value and never updates.

It's the object that an element's bindings resolve against, and it flows down to child elements. You normally set a window or control's DataContext to an instance of your ViewModel.

Q: Why use commands instead of Click event handlers?

Binding a Command keeps the action (and its enabled/disabled logic via CanExecute ) in the ViewModel, where it can be unit-tested and reused, rather than buried in the View's code-behind.

No blanks this time — just a brief and an outline. Build a ViewModel with a Celsius property and a computed Fahrenheit property, making sure the setter notifies for both so the Fahrenheit display updates live. The View binds a TextBox to Celsius and a TextBlock to Fahrenheit.

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary