Swiftorial Logo
Home
Swift Lessons
Tutorials
Learn More
Career
Resources

Building Desktop Applications with Windows Presentation Foundation (WPF)

Introduction

Windows Presentation Foundation (WPF) is a UI framework for building rich desktop applications. It provides a modern approach to building desktop UIs with a flexible and powerful system for data binding and styling.

Setting Up the Development Environment

To start building WPF applications, you need to install Visual Studio with the .NET desktop development workload.

1. Installing Visual Studio

Download and install Visual Studio from the official website. During installation, select the ".NET desktop development" workload.

2. Creating a WPF Project

To create a new WPF project:

  1. Open Visual Studio.
  2. Click on "Create a new project".
  3. Search for "WPF App (.NET Core)" and select it.
  4. Click "Next" and configure your project details.
  5. Click "Create" to generate the project.

Designing the User Interface

WPF uses XAML (eXtensible Application Markup Language) to design the user interface. Below is an example of a simple WPF window with a Button and a TextBlock.

Example: Simple WPF Window

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="400">
    <Grid>
        <Button Content="Click Me" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
        <TextBlock Name="TextBlockMessage" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,50,0,0"/>
    </Grid>
</Window>

Writing Code

Add the following code in the code-behind file (MainWindow.xaml.cs) to handle the button click event and update the TextBlock.

Example: Button Click Event

using System.Windows;

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

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            TextBlockMessage.Text = "Hello, WPF!";
        }
    }
}

Running the Application

Press F5 or click the "Start" button in Visual Studio to run your application. The window will appear, and you can interact with it.

Data Binding

WPF provides a powerful data binding system that allows you to bind UI elements to data sources. Below is an example of binding a TextBox to a property in the code-behind file.

Example: Data Binding

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="400">
    <Grid>
        <TextBox Text="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Margin="10"/>
        <Button Content="Submit" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="10,50,0,0" Click="Button_Click"/>
    </Grid>
</Window>

Styling and Templates

WPF allows you to define styles and templates to customize the appearance of UI elements. Below is an example of a button style.

Example: Button Style

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="400">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="LightBlue"/>
            <Setter Property="Foreground" Value="DarkBlue"/>
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Styled Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Margin="10"/>
    </Grid>
</Window>

Conclusion

Building desktop applications with WPF allows for a modern, flexible, and powerful UI. By leveraging XAML, data binding, and styling, you can create rich and interactive applications efficiently.