wpf-getting-started

WPF Getting Started

In this post we are going with followings:

• WPF Architecture
• WPFEnvironment Setup
• Creating first WPF application

WPF Architecture

Before WPF, the other user interface frameworks offered by Microsoft such as MFC and Windows forms, were just wrappers around User32 and GDI32 DLLs, but WPF makes only minimal use of User32. So,

• WPF is more than just a wrapper.
• It is a part of the .NET framework.
• It contains a mixture of managed and unmanaged code.

The major components of WPF architecture are as shown in the figure below. The most important code part of WPF are −

• Presentation Framework
• Presentation Core
• Milcore

The presentation framework and the presentation core have been written in managed code. Milcore is a part of unmanaged code which allows tight integration with DirectX (responsible for display and rendering). CLR makes the development process more productive by offering many features such as memory management, error handling, etc.

WPF Advantages

In the earlier GUI frameworks, there was no real separation between how an application looks like and how it behaved. Both GUI and behavior was created in the same language, e.g. C# or VB.Net which would require more effort from the developer to implement both UI and behavior associated with it.

In WPF, UI elements are designed in XAML while behaviors can be implemented in procedural languages such C# and VB.Net. So it very easy to separate behavior from the designer code.

With XAML, the programmers can work in parallel with the designers. The separation between a GUI and its behavior can allow us to easily change the look of a control by using styles and templates.

WPF Features

WPF is a powerful framework to create Windows application. It supports many great features, some of which have been listed below −

Feature	Description
Control inside a Control	Allows to define a control inside another control as a content.
Data binding	Mechanism to display and interact with data between UI elements and data object on user interface.
Media services	Provides an integrated system for building user interfaces with common media elements like images, audio, and video.
Templates	In WPF you can define the look of an element directly with a Template
Animations	Building interactivity and movement on user Interface
Alternative input	Supports multi-touch input on Windows 7 and above.
Direct3D	Allows to display more complex graphics and custom themes

WPF Environment Setup

Microsoft provides two important tools for WPF application development.

• Visual Studio
• Expression Blend

Both the tools can create WPF projects, but the fact is that Visual Studio is used more by developers, while Blend is used more often by designers.  We will mostly be using Visual Studio.

Creating first WPF application

In this post, we will develop a simple Hello World WPF application. So let’s start the simple implementation by following the steps given below.

1. Start Visual Studio and then select Create New project option
2. In the Search template area, search for wpf
3. Then you can select one of following options:
   1. WPF Application (A project for creating a .NET WPF Application) language C# or Visual Basic
   2. WPF App (.NET Framework) (Windows Presentation Foundation client application) language C# or Visual Basic

Here I am selecting WPF App (.NET Framework) (Windows Presentation Foundation client application) with language Visual Basic.

4. Press to next and give a name for project name ( I am giving “Wpf_vb_net“) and välj path as showing in the following figure:

5- Press to Create button, then visual studio shall show the following two files:

• Application.xaml
• MainWindow.xaml

Every of this files has a vb.net code and an xaml desing (with xmal code).

MainWindow.xaml has an xmal code as follow:

<Window x:Class="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:Wpf_vb_net"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        
    </Grid>
</Window>

and a design UI as follow:

Open Toolbox and drag and drop a TextBlock to the design of MainWindow and in the Properties of this TextBlock, give the name to txtblock and Text value to ‘Hellow World’ and press to Enter.

then you shall see the Source of this file the following line is added:

<Grid>
        <TextBlock x:Name="txtblock" HorizontalAlignment="Left" Margin="331,228,0,0" TextWrapping="Wrap" Text="Hellow World" VerticalAlignment="Top"/>

    </Grid>

Compile an run the application by pressing to the Start button on the Visual studio then it shall show the following:

You can choose other language like C# or other type of application in the step 3.

Now we add a button to the UI of WPF by drag and drop from Toolbox and in the Property of this button control give the name to btnClickme and Content to Click me the UI shall be seen as follow:

The Source code (XAML) code for this button shall be and seen as follow:

<Button x:Name="btnClickme" Content="Click me" HorizontalAlignment="Left" Margin="367,172,0,0" VerticalAlignment="Top"/>

Adding click event to btnClickme button:

In the design MainWindow, double click to the button btnClickme then the following event code (Sub btnClickme_Click) will be added to the MainWindow.vb as follow:

Imports System.Collections.ObjectModel
Imports System.Reflection.Emit

Class MainWindow
    Private Sub btnClickme_Click(sender As Object, e As RoutedEventArgs) Handles btnClickme.Click
        

    End Sub
End Class

Now add the following code (event code) to the btnClickme_Click method:

txtblock.Text = "Hellow my world"

Then the method shall be as follow:

Private Sub btnClickme_Click(sender As Object, e As RoutedEventArgs) Handles btnClickme.Click
        txtblock.Text = "Hellow my world"

    End Sub

By this event function: If user clicks on the btnClickme button the text of Textblock shall be change to the “Hellow my world”.

Start application by pressing to F5, UI is displayed with Click me button, If you press to this button then shows the following:

Conclusion

In this post, We have described WPF Architecture, how to setup WPF Environment, and in the end we have create a WPF application in .NET Framework  with VB.NET as language via Visual Studio 2022.

My Next post explains WPF Data binding

This post is part of “WPF step by step”

Back to home page