Windows Presentation Foundation

What is WPF?

1. WPF, for Windows Presentation Foundation, is a UI framework developed by Microsoft specifically for building Windows desktop applications. It’s part of the .NET Framework and offers rich features to create visually appealing and feature-packed applications.
2. WPF’s rendering is vector-based, which enables applications to look great on high DPI monitors, as they can be infinitely scaled.

Explain the code architecture of WPF…

WPF architecture is built on three main layers:

1. Managed Layer: This layer is written in managed code (C#) and directly accessible to developers. It consists of two key components:

• Presentation Framework: This part provides the essential functionalities for building WPF applications, including:

a) Controls: A comprehensive set of built-in controls like buttons, text boxes, menus, etc., along with the ability to create custom controls.

b) Data binding: Simplifies linking UI elements to data sources, automatically updating the UI when the data changes.

c) Layout: Provides flexible layout systems like grids, stacks, and panels for arranging UI elements.

d) Styles and Templating: Allows for defining reusable styles and templates for consistent UI appearance and behavior.

e) Commands: Enables defining and handling user interactions within the application.

• PresentationCore: This component deals with the core graphics rendering engine of WPF. It handles tasks like:

a) Layering and compositing of UI elements.

b) Transformation and animation of UI elements.

c) Input handling and event routing.

2. Unmanaged Layer (Milcore): This layer, also known as Media Integration Library Core, is written in unmanaged code (C++). It acts as a bridge between the managed layer and the operating system’s graphics subsystem, providing:

• DirectX integration: Enables hardware acceleration for graphics rendering, improving performance and visual fidelity.
• Low-level graphics access: Provides fine-grained control over how UI elements are rendered on the screen.

3. Core API Layer: This layer consists of core operating system components like the kernel, User32 (user-mode API for user input and windowing), GDI (graphical device interface for basic graphics operations), device drivers, and graphic cards. These components provide the fundamental functionalities for interacting with the hardware and displaying graphics on the screen.

Understanding the Interaction:

• The managed layer (Presentation Framework and PresentationCore) exposes functionalities to developers through C# code.
• Developers interact with controls, data binding, layout, and other features within the managed layer.
• The managed layer interacts with Milcore through well-defined APIs, passing necessary information and instructions.
• Milcore, with its direct access to DirectX and low-level graphics capabilities, efficiently renders the UI elements on the screen using the capabilities of the graphics card and the operating system.

This layered architecture separates the concerns, making WPF development more manageable and efficient. The managed layer offers a high-level abstraction for developers, while the unmanaged layer handles the intricate details of graphics rendering and hardware interaction.

Let us start to build a button using WPF:

Step 1. Create a new WPF project: Launch Visual Studio, go to “Create a new project,” search for “WPF App (.NET),” choose a name and location for our project, and click “Next”.

Step 2. Create the project

Step 3. The following window should open.

Step 4. Inside file Mainwindow.xaml add the following line between <Grid> and </Grid>

<Window x:Class="button_tutorial.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:button_tutorial"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button Content="Click Me!" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Button_Click" />
        <Label x:Name="myLabel" Content="Waiting for button click..." HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,50,0,0" />
    </Grid>
</Window>

Step 5. Inside MainWindow.xaml.cs file, add 3 lines below InitializeComponent(); function

using System.Reflection.Emit;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace button_tutorial
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            myLabel.Content = "Button clicked!";
        }
    }
}

Step 6. Building and Running the Application:

Click the “Run” button (play icon) in Visual Studio to build and execute our application. Hot reload will also start, and the following screen should come up.

After clicking the button, the following text should be shown:

What layers of WPF were executed in the above tutorial?

References:

Windows Presentation Foundation for .NET 8 documentation

Repository for WPF

GitHub - dotnet/wpf: WPF is a .NET Core UI framework for building Windows desktop applications.