MSDN Documentation

WPF Basics: An Introduction

Welcome to the fundamental concepts of Windows Presentation Foundation (WPF). This tutorial will guide you through the essential building blocks of WPF, enabling you to create rich and dynamic user interfaces for desktop applications.

What is WPF?

Windows Presentation Foundation (WPF) is a UI framework that creates applications that are visually stunning, scalable, and feature-rich. It's part of the .NET Framework and allows developers to build applications with unparalleled graphical capabilities, utilizing hardware acceleration for smooth rendering and animations.

Key Concepts

• XAML: Extensible Application Markup Language is an XML-based declarative language used to define the user interface. It separates the UI design from the application logic.
• Dependency Properties: A WPF property system that supports property value inheritance, data binding, style triggers, and animation.
• Windows and Pages: The top-level containers for your UI. Windows are typically standalone application windows, while Pages can be used to create multi-page applications.
• Controls: The UI elements that users interact with, such as buttons, text boxes, labels, and more.
• Layout Panels: Containers that arrange child elements within a UI. Common panels include Grid, StackPanel, DockPanel, and Canvas.
• Data Binding: A mechanism that connects UI elements to data sources, allowing for dynamic updates and seamless data synchronization.

Your First WPF Application

Let's start with a simple "Hello, WPF!" application.

1. Creating a New Project

In Visual Studio, create a new WPF project. Choose "WPF App (.NET)" or "WPF Application" template.

2. Understanding XAML

Open the MainWindow.xaml file. You'll see something like this:

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TextBlock Text="Hello, WPF!" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36"/>
    </Grid>
</Window>

Explanation:

• <Window>: Defines the main window of the application.
• <Grid>: A flexible layout panel that divides the window into rows and columns.
• <TextBlock>: Displays plain text. We've centered it and set a larger font size.

3. Running the Application

Press F5 or click the "Start" button in Visual Studio. You should see a window with "Hello, WPF!" displayed in the center.

Working with Controls

Let's add a button to our application.

Modifying MainWindow.xaml:

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="Hello, WPF!" FontSize="36" Margin="0,0,0,20"/>
        <Button Content="Click Me" Width="120" Height="40" Click="ButtonClick"/>
    </StackPanel>
</Window>

We've replaced the Grid with a StackPanel for simpler vertical arrangement and added a Button with a Click event handler.

Handling the Button Click

Open the code-behind file (e.g., MainWindow.xaml.cs) and add the event handler:

using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void ButtonClick(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Button was clicked!");
        }
    }
}

Next Steps

This is just the beginning! In subsequent tutorials, you'll explore:

• Advanced layout techniques using different panels.
• Powerful data binding scenarios.
• A wide range of WPF controls and their customization.
• Styling your application with themes and templates.

Continue your WPF journey to build sophisticated and visually appealing desktop applications.