0% found this document useful (0 votes)

676 views

WPF Tutorial PDF

Uploaded by

Juan Sebastian Gutierrez Ardila

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

676 views

WPF Tutorial PDF

Uploaded by

Juan Sebastian Gutierrez Ardila

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 306

WPF

About the Tutorial

WPF stands for Windows Presentation Foundation. It is a powerful framework for building
Windows applications. This tutorial explains the features that you need to understand to
build WPF applications and how it brings a fundamental change in Windows applications.

Audience
This tutorial has been designed for all those readers who want to learn WPF and to apply
it instantaneously in different type of applications.

Prerequisites
Before proceeding with this tutorial, you should have a basic understanding of XML, Web
Technologies and HTML.

Copyright & Disclaimer

All the content and graphics published in this e-book are the property of Tutorials Point (I)
Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish
any contents or a part of contents of this e-book in any manner without written consent
of the publisher.

We strive to update the contents of our website and tutorials as timely and as precisely as
possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt.
Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our
website or its contents including this tutorial. If you discover any errors on our website or
in this tutorial, please notify us at [email protected]

i
WPF

Table of Contents
About the Tutorial .................................................................................................................................. i

Audience ................................................................................................................................................ i

Prerequisites .......................................................................................................................................... i

Copyright & Disclaimer ........................................................................................................................... i

Table of Contents .................................................................................................................................. ii

1. WPF OVERVIEW .............................................................................................................. 1

WPF Architecture .................................................................................................................................. 1

WPF Advantages ................................................................................................................................. 2

WPF Features...................................................................................................................................... 2

2. WPF ENVIRONMENT SETUP ............................................................................................ 3

Installation ............................................................................................................................................ 3

3. WPF HELLO WORLD ........................................................................................................ 7

4. WPF XAML OVERVIEW .................................................................................................. 12

Basic Syntax ......................................................................................................................................... 12

Why XAML in WPF ............................................................................................................................... 13

5. WPF ELEMENTS TREE .................................................................................................... 17

Logical Tree Structure .......................................................................................................................... 17

Visual Tree Structure ........................................................................................................................... 18

6. WPF DEPENDENCY PROPERTIES .................................................................................... 20

Why We Need Dependency Properties ................................................................................................ 21

Custom Dependency Properties .......................................................................................................... 22

7. WPF ROUTED EVENTS ................................................................................................... 25

Direct Event ......................................................................................................................................... 25

ii
WPF

Bubbling Event .................................................................................................................................... 25

Tunnel Event ....................................................................................................................................... 25

Custom Routed Events ........................................................................................................................ 29

8. WPF CONTROLS ............................................................................................................ 34

9. BUTTON ........................................................................................................................... 37

10. CALENDAR ....................................................................................................................... 46

11. CHECKBOX ....................................................................................................................... 52

12. COMBOBOX ..................................................................................................................... 62

13. CONTEXTMENU ............................................................................................................... 69

14. DATAGRID ........................................................................................................................ 76

15. DATEPICKER ..................................................................................................................... 85

16. DIALOG BOX ..................................................................................................................... 90

17. GRIDVIEW ........................................................................................................................ 93

18. IMAGE.............................................................................................................................. 99

19. LABEL ............................................................................................................................. 104

20. LISTBOX.......................................................................................................................... 108

21. MENU ............................................................................................................................ 113

22. PASSWORDBOX.............................................................................................................. 119

23. POPUP ........................................................................................................................... 123

24. PROGRESSBAR ............................................................................................................... 126

25. RADIOBUTTON ............................................................................................................... 130

iii
WPF

26. SCROLLVIEWER .............................................................................................................. 137

27. SLIDER ............................................................................................................................ 143

28. TEXTBLOCK .................................................................................................................... 148

29. TOGGLEBUTTON ............................................................................................................ 151

30. TOOLTIP ......................................................................................................................... 155

31. WINDOW ....................................................................................................................... 158

32. THIRD-PARTY CONTROLS ............................................................................................... 162

33. WPF LAYOUTS ............................................................................................................. 169

Stack Panel ........................................................................................................................................ 169

Wrap Panel ........................................................................................................................................ 172

Dock Panel......................................................................................................................................... 175

Canvas Panel ..................................................................................................................................... 179

Grid Panel .......................................................................................................................................... 183

34. NESTING OF LAYOUT...................................................................................................... 187

35. WPF INPUT.................................................................................................................. 189

Mouse ............................................................................................................................................... 189

Keyboard .......................................................................................................................................... 193

ContextMenu or RoutedCommands .................................................................................................. 195

Multi Touch ....................................................................................................................................... 198

36. WPF COMMAND LINE ................................................................................................. 203

37. WPF DATA BINDING .................................................................................................... 208

One-Way Data Binding ...................................................................................................................... 208

Two-Way Data Binding ...................................................................................................................... 212

iv
WPF

38. WPF RESOURCES ......................................................................................................... 215

Resource Scope ................................................................................................................................. 217

Resource Dictionaries ........................................................................................................................ 217

39. WPF TEMPLATES ......................................................................................................... 220

Control Template............................................................................................................................... 220

Data Template ................................................................................................................................... 222

40. WPF STYLES................................................................................................................. 227

Control Level ..................................................................................................................................... 231

Layout Level ...................................................................................................................................... 232

Window Level .................................................................................................................................... 234

Application Level ............................................................................................................................... 235

41. WPF TRIGGERS ............................................................................................................ 238

Property Triggers ............................................................................................................................... 238

Data Triggers ..................................................................................................................................... 239

Event Triggers .................................................................................................................................... 241

42. WPF DEBUGGING ........................................................................................................ 244

Debugging in C# ................................................................................................................................. 244

Debugging in XAML ........................................................................................................................... 248

UI Debugging Tools for XAML ............................................................................................................ 251

43. WPF CUSTOM CONTROLS ........................................................................................... 254

User Control ...................................................................................................................................... 254

Custom Controls ................................................................................................................................ 258

44. WPF EXCEPTION HANDLING ........................................................................................ 263

Syntax ............................................................................................................................................... 263

Hierarchy ........................................................................................................................................... 264

v
WPF

45. WPF LOCALIZATION .................................................................................................... 270

46. WPF INTERACTION ...................................................................................................... 277

Behaviors .......................................................................................................................................... 277

Drag and Drop ................................................................................................................................... 280

47. WPF 2D GRAPHICS ...................................................................................................... 284

Shapes and Drawing .......................................................................................................................... 284

48. WPF 3D GRAPHICS ...................................................................................................... 288

49. WPF MULTIMEDIA ...................................................................................................... 293

Speech Synthesizer ............................................................................................................................ 295

vi
1. WPF OVERVIEW WPF

WPF was first introduces in .NET framework 3.0 version, and then so many other features
were added in the subsequent .NET framework versions.

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

Presentation Framework

Presentation Core

CLR

Milcore
User32 DirectX

Kernel
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
1
WPF

(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 Allows to define a control inside another control as a content.

Control

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

2
2. WPF ENVIRONMENT SETUP WPF

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. For this tutorial, we will mostly
be using Visual Studio.

Installation
Microsoft provides a free version of Visual Studio which can be downloaded from
https://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspx.

Download the files and follow the steps given below to set up WPF application development
environment on your system.

1. After the download is complete, run the installer. The following dialog will be
displayed.

3
WPF

2. Click the Install button and it will start the installation process.

4
WPF

3. Once the installation process is completed successfully, you will get to see the
following dialog box.

4. Close this dialog box and restart your computer if required.

5. Now open Visual Studio from the Start Menu which will open the following dialog
box.

5
WPF

6. Once all is done, you will see the main window of Visual Studio.

You are now ready to build your first WPF application.

6
3. WPF HELLO WORLD WPF

In this chapter, we will develop a simple Hello World WPF application. So lets start the
simple implementation by following the steps given below.

1. Click on File > New > Project menu option.

7
WPF

2. The following dialog box will be displayed.

3. Under Templates, select Visual C# and in the middle panel, select WPF Application.

4. Give the project a name. Type HelloWorld in the name field and click the OK button.

5. By default, two files are created, one is the XAML file (mainwindow.xaml) and the
other one is the CS file (mainwindow.cs)

6. On mainwindow.xaml, you will see two sub-windows, one is the design window and
the other one is the source (XAML) window.

7. In WPF application, there are two ways to design an UI for your application. One is to
simply drag and drop UI elements from the toolbox to the Design Window. The second
way is to design your UI by writing XAML tags for UI elements. Visual Studio handles
XAML tags when drag and drop feature is used for UI designing.

8. In mainwindow.xaml file, the following XAML tags are written by default.

8
WPF

</Grid>
</Window>

9. By default, a Grid is set as the first element after page.

10. Lets go to the toolbox and drag a TextBlock to the design window.

11. You will see the TextBlock on the design window.

9
WPF

12. When you look at the source window, you will see that Visual Studio has generated
the XAML code of the TextBlock for you.

13. Lets change the Text property of TextBlock in XAML code from TextBlock to Hello
World.

14. Now, you will see the change on the Design Window as well.

10
WPF

When the above code is compiled and executed, you will see the following window.

Congratulations! You have designed and created your first WPF application.

11
4. WPF XAML OVERVIEW WPF

One of the first things you will encounter while working with WPF is XAML. XAML stands
for Extensible Application Markup Language. Its a simple and declarative language based
on XML.

In XAML, it very easy to create, initialize, and set properties of objects with
hierarchical relations.

It is mainly used for designing GUIs, however it can be used for other purposes as
well, e.g., to declare workflow in Workflow Foundation.

Basic Syntax
When you create your new WPF project, you will encounter some of the XAML code by
default in MainWindow.xaml as shown below.

</Grid>
</Window>

The above XAML file contains different kinds of information. The following table briefly
explains the role of each information.

Information Description
<Window It is the opening object element or container
of the root.
It is a partial class declaration which connects
x:Class="Resources.MainWindow" the markup to the partial class code defined
behind.
xmlns="http://schemas.microsoft.com/ Maps the default XAML namespace for WPF
winfx/2006/xaml/presentation" client/framework.
xmlns:x="http://schemas.microsoft.co XAML namespace for XAML language which
m/winfx/2006/xaml" maps it to x: prefix
> End of object element of the root
<Grid> It is starting and closing tags of an empty grid
</Grid> object.
</Window> Closing the object element

12
WPF

The syntax rules for XAML is almost similar to XML. If you look at an XAML document, then
you will notice that it is actually a valid XML file, but an XML file is not necessarily an XAML
file. It is because in XML, the value of the attributes must be a string while in XAML, it can
be a different object which is known as Property element syntax.

The syntax of an Object element starts with a left angle bracket (<) followed by
the name of an object, e.g. Button.

Define some Properties and attributes of that object element.

The Object element must be closed by a forward slash (/) followed immediately by
a right angle bracket (>).

Example of simple object with no child element:

Example of object element with some attributes:

Example of an alternate syntax do define properties (Property element

syntax):
<Button
<Button.Content>Click Me</Button.Content>
<Button.Height>30</Button.Height>
<Button.Width>60</Button.Width>
</Button>

Example of Object with Child Element: StackPanel contains Textblock as

child element
<StackPanel Orientation="Horizontal">
<TextBlock Text="Hello"/>
</StackPanel>

Why XAML in WPF

XAML is not only the most widely known feature of WPF, but it's also one of the most
misunderstood features. If you have exposure to WPF, then you must have heard of XAML;
but take a note of the following two less known facts about XAML:

13
WPF

WPF doesn't need XAML

XAML doesn't need WPF

They are in fact separable pieces of technology. To understand how that can be, let's look
at a simple example in which a button is created with some properties in XAML.

In case you choose not to use XAML in WPF, then you can achieve the same GUI result
with procedural language as well. Lets have a look at the same example, but this time,
we will create a button in C#.

using System.Windows;
using System.Windows.Controls;

namespace WPFXAMLOverview
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// Create the StackPanel
StackPanel stackPanel = new StackPanel();

14
WPF

this.Content = stackPanel;

// Create the Button

Button button = new Button();
button.Content = "Click Me";
button.HorizontalAlignment = HorizontalAlignment.Left;
button.Margin = new Thickness(150);
button.VerticalAlignment = VerticalAlignment.Top;
button.Width = 75;
stackPanel.Children.Add(button);

}
}
}

When you compile and execute either the XAML code or the C# code, you will see the
same output as shown below.

From the above example, it is clear that what you can do in XAML to create, initialize, and
set properties of objects, the same tasks can also be done using code.

XAML is just another simple and easy way to design UI elements.

With XAML, it doesnt mean that what you can do to design UI elements is the only
way. You can either declare the objects in XAML or define them using code.

15
WPF

XAML is optional, but despite this, it is at the heart of WPF design.

The goal of XAML is to enable visual designers to create user interface elements
directly.

WPF aims to make it possible to control all visual aspects of the user interface from
mark-up.

16
5. WPF ELEMENTS TREE WPF

There are many technologies where the elements and components are ordered in a tree
structure so that the programmers can easily handle the object and change the behavior
of an application. Windows Presentation Foundation (WPF) has a comprehensive tree
structure in the form of objects. In WPF, there are two ways that a complete object tree
is conceptualized:

Logical Tree Structure

Visual Tree Structure

With the help of these tree structures, you can easily create and identify the relationship
between UI elements. Mostly, WPF developers and designers either use procedural
language to create an application or design the UI part of the application in XAML keeping
in mind the object tree structure.

Logical Tree Structure

In WPF applications, the structure of the UI elements in XAML represents the logical tree
structure. In XAML, the basic elements of UI are declared by the developer. The logical
tree in WPF defines the following:

Dependency properties
Static and dynamic resources
Binding the elements on its name etc.

Lets have a look at the following example in which a button and a list box are created.

17
WPF

If you look at the XAML code, you will observe a tree structure, i.e. the root node is the
Window and inside the root node, there is only one child, that is StackPanel. But StackPanel
contains two child elements, button and list box. List box has three more child list box
items.

Visual Tree Structure

In WPF, the concept of the visual tree describes the structure of visual objects, as
represented by the Visual Base Class. It signifies all the UI elements which are rendered
to the output screen.

When a programmer wants to create a template for a particular control, he is actually

rendering the visual tree of that control. The visual tree is also very useful for those who
want to draw lower level controls for performance and optimization reasons.

In WPF applications, visual tree is used for;

Rendering the visual objects.

Rendering the layouts.
The routed events mostly travel along the visual tree, not the logical tree.

To see the visual tree of the above simple application which contains a button and a list
box, lets compile and execute the XAML code and you will see the following window.

When the application is running, you can see the visual tree of the running application in
Live Visual Tree window which shows the complete hierarchy of this application, as shown
below.

18
WPF

The visual tree is typically a superset of the logical tree. You can see here that all the
logical elements are also present in the visual tree. So these two trees are really just two
different views of the same set of objects that make up the UI.

The logical tree leaves out a lot of detail enabling you to focus on the core structure
of the user interface and to ignore the details of exactly how it has been presented.

The logical tree is what you use to create the basic structure of the user interface.

The visual tree will be of interest if you're focusing on the presentation. For
example, if you wish to customize the appearance of any UI element, you will need
to use the visual tree.

19
6. WPF DEPENDENCY PROPERTIES WPF

In WPF applications, dependency property is a specific type of property which extends the
CLR property. It takes the advantage of specific functionalities available in the WPF
property system.

A class which defines a dependency property must be inherited from the

DependencyObject class. Many of the UI controls class which are used in XAML are
derived from the DependencyObject class and they support dependency properties, e.g.
Button class supports the IsMouseOver dependency property.

The following XAML code creates a button with some properties.

The x:Type markup extension in XAML has a similar functionality like typeof() in C#. It is
used when attributes are specified which take the type of the object such as <Style
TargetType="{x:Type Button}">

20
WPF

When the above code is compiled and executed, you would get the following
MainWindow. When the mouse is over the button, it will change the foreground color of
a button. When the mouse leaves the button, it changes back to its original color.

Why We Need Dependency Properties

Dependency property gives you all kinds of benefits when you use it in your application.
Dependency Property can used over a CLR property in the following scenarios;

If you want to set the style

If you want data binding
If you want to set with a resource (a static or a dynamic resource)
If you want to support animation

Basically, Dependency Properties offer a lot of functionalities that you wont get by using
a CLR property.

The main difference between dependency properties and other CLR properties are
listed below:

CLR properties can directly read/write from the private member of a class by using
getter and setter. In contrast, dependency properties are not stored in local
object.

Dependency properties are stored in a dictionary of key/value pairs which is

provided by the DependencyObject class. It also saves a lot of memory because it
stores the property when changed. It can be bound in XAML as well.

21
WPF

Custom Dependency Properties

In .NET framework, custom dependency properties can also be defined. Follow the steps
given below to define custom dependency property in C#.

Declare and register your dependency property with system call register.
Provide the setter and getter for the property.
Define a static handler which will handle any changes that occur globally
Define an instance handler which will handle any changes that occur to that
particular instance.

The following C# code defines a dependency property to set the SetText property of the
user control.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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 WpfApplication3
{
/// <summary>
/// Interaction logic for UserControl1.xaml
/// </summary>
public partial class UserControl1 : UserControl
{
public UserControl1()
{
InitializeComponent();
}

22
WPF

public static readonly DependencyProperty SetTextProperty =

DependencyProperty.Register("SetText", typeof(string), typeof(UserControl1),
new PropertyMetadata("", new PropertyChangedCallback(OnSetTextChanged)));
public string SetText
{
get { return (string)GetValue(SetTextProperty); }
set { SetValue(SetTextProperty, value); }
}
private static void OnSetTextChanged(DependencyObject d,
DependencyPropertyChangedEventArgs e)
{
UserControl1 UserControl1Control = d as UserControl1;
UserControl1Control.OnSetTextChanged(e);
}
private void OnSetTextChanged(DependencyPropertyChangedEventArgs e)
{
tbTest.Text = e.NewValue.ToString();
}

}
}

Here is the XAML file in which the TextBlock is defined as a user control and the Text
property will be assigned to it by the SetText dependency property.

The following XAML code creates a user control and initializes its SetText dependency
property.

23
WPF

Let's run this application. You can immediately observe that in our MainWindow, the
dependency property for user control has been successfully used as a Text.

24
7. WPF ROUTED EVENTS WPF

A routed event is a type of event that can invoke handlers on multiple listeners in an
element tree rather than just the object that raised the event. It is basically a CLR event
that is supported by an instance of the Routed Event class. It is registered with the WPF
event system. RoutedEvents have three main routing strategies which are as follows;

Direct Event
Bubbling Event
Tunnel Event

Direct Event
A direct event is similar to events in Windows forums which are raised by the element in
which the event is originated.

Unlike a standard CLR event, direct routed events support class handling and they can be
used in Event Setters and Event Triggers within your style of your Custom Control.

A good example of a direct event would be the MouseEnter event.

Bubbling Event
A bubbling event begins with the element where the event is originated. Then it travels up
the visual tree to the topmost element in the visual tree. So, in WPF, the topmost element
is most likely a window.

Tunnel Event
Event handlers on the element tree root are invoked and then the event travels down the
visual tree to all the children nodes until it reaches the element in which the event
originated.

The difference between a bubbling and a tunneling event is that a tunneling event will
always start with a preview.

In a WPF application, events are often implemented as a tunneling/bubbling pair. So, you'll
have a preview MouseDown and then a MouseDown event.

Given below is a simple example of a Routed event in which a button and three text blocks
are created with some properties and events.

<Window x:Class="WPFRoutedEvents.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="450" Width="604"

25
WPF

ButtonBase.Click ="Window_Click" >

<Grid>

<StackPanel Margin="20" ButtonBase.Click="StackPanel_Click">

Here is the C# code for the Click events implementation for Button, StackPanel, and
Window.

using System.Windows;

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

private void Button_Click(object sender, RoutedEventArgs e)

{
txt1.Text = "Button is Clicked";

26
WPF

}
private void StackPanel_Click(object sender, RoutedEventArgs e)

{
txt2.Text = "Click event is bubbled to Stack Panel";
}
private void Window_Click(object sender, RoutedEventArgs e)
{
txt3.Text = "Click event is bubbled to Window";
}
}
}

When you compile and execute the above code, it will produce the following window:

27
WPF

When you click on the button, the text blocks will get updated, as shown below.

If you want to stop the routed event at any particular level, then you will need to set the
e.Handled = true;

Lets change the StackPanel_Click event as shown below:

private void StackPanel_Click(object sender, RoutedEventArgs e)

{
txt2.Text = "Click event is bubbled to Stack Panel";
e.Handled = true;
}

When you click on the button, you will observe that the click event will not be routed to
the window and will stop at the stackpanel and the 3rd text block will not be updated.

28
WPF

Custom Routed Events

In .NET framework, custom routed event can also be defined. You need to follow the steps
given below to define a custom routed event in C#.

Declare and register your routed event with system call RegisterRoutedEvent.
Specify the Routing Strategy, i.e. Bubble, Tunnel, or Direct.
Provide the event handler.

Lets take an example to understand more about custom routed events. Follow the steps
given below:

1. Create a new WPF project with WPFCustomRoutedEvent

2. Right click on your solution and select Add > New Item...

3. The following dialog will open, now select Custom Control (WPF) and name it
MyCustomControl.

4. Click the Add button and you will see that two new files (Themes/Generic.xaml and
MyCustomControl.cs) will be added in your solution.

The following XAML code sets the style for the custom control in Generic.xaml file.

29
WPF

<Style TargetType="{x:Type local:MyCustomControl}">

<Button x:Name="PART_Button" Content="Click Me" />

</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

Given below is the C# code for the MyCustomControl class which inherits from the
Control class in which a custom routed event Click is created for the custom control.

using System.Windows;
using System.Windows.Controls;

namespace WPFCustomRoutedEvent
{
public class MyCustomControl : Control
{
static MyCustomControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(MyCustomControl),
new FrameworkPropertyMetadata(typeof(MyCustomControl)));
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();

//demo purpose only, check for previous instances and remove the handler first

var button = GetTemplateChild("PART_Button") as Button;

30
WPF

if (button != null)
button.Click += Button_Click;

void Button_Click(object sender, RoutedEventArgs e)

{
RaiseClickEvent();
}

public static readonly RoutedEvent ClickEvent =

EventManager.RegisterRoutedEvent("Click", RoutingStrategy.Bubble,
typeof(RoutedEventHandler), typeof(MyCustomControl));

public event RoutedEventHandler Click

{
add { AddHandler(ClickEvent, value); }
remove { RemoveHandler(ClickEvent, value); }
}

protected virtual void RaiseClickEvent()

{
RoutedEventArgs args = new
RoutedEventArgs(MyCustomControl.ClickEvent);
RaiseEvent(args);
}
}
}

Here is the custom routed event implementation in C# which will display a message box
when the user clicks it.

using System.Windows;

namespace WPFCustomRoutedEvent
{
// <summary>
// Interaction logic for MainWindow.xaml

31
WPF

// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void MyCustomControl_Click(object sender, RoutedEventArgs e)

{
MessageBox.Show("It is the custom routed event of your custom control");

}
}
}

Here is the implementation in MainWindow.xaml to add the custom control with a routed
event Click.

When the above code is compiled and executed, it will produce the following window which
contains a custom control.

32
WPF

When you click on the custom control, it will produce the following message.

33
8. WPF CONTROLS WPF

Windows Presentation Foundation (WPF) allows developers to easily build and create
visually enriched UI based applications.

The classical UI elements or controls in other UI frameworks are also enhanced in

WPF applications.

All of the standard WPF controls can be found in the Toolbox which is a part of the
System.Windows.Controls.

These controls can also be created in XAML markup language.

The complete inheritance hierarchy of WPF controls are as follows:

34
WPF

The following table contains a list of controls which we will discuss in the subsequent
chapters.

Sr. Controls & Description

No.

1 Button
A control that responds to user input

2 Calendar
Represents a control that enables a user to select a date by using a visual
calendar display.
3 CheckBox
A control that a user can select or clear.

4 ComboBox
A drop-down list of items a user can select from.

5 ContextMenu
Gets or sets the context menu element that should appear whenever the
context menu is requested through user interface (UI) from within this element.
6 DataGrid
Represents a control that displays data in a customizable grid.

7 DatePicker
A control that lets a user select a date.

8 Dialogs
An application may also display additional windows to help the user gather or
display important information.
9 GridView
A control that presents a collection of items in rows and columns that can scroll
horizontally.
10 Image
A control that presents an image.

11 Label
Displays text on a form. Provides support for access keys.

12 ListBox
A control that presents an inline list of items that the user can select from.

13 Menus
Represents a Windows menu control that enables you to hierarchically organize
elements associated with commands and event handlers.
14 PasswordBox
A control for entering passwords.

15 Popup
Displays content on top of existing content, within the bounds of the application
window.
16 ProgressBar
A control that indicates progress by displaying a bar.

35
WPF

17 RadioButton
A control that allows a user to select a single option from a group of options.

18 ScrollViewer
A container control that lets the user pan and zoom its content.

19 Slider
A control that lets the user select from a range of values by moving a Thumb
control along a track.
20 TextBlock
A control that displays text.

21 ToggleButton
A button that can be toggled between 2 states.

22 ToolTip
A pop-up window that displays information for an element.

23 Window
The root window which provides minimize/maximize option, Title bar, border
and close button
24 3rd Party Controls
Use third-party controls in your WPF applications.

We will discuss all these controls one by one with their implementation.

36
9. BUTTON WPF

The Button class represents the most basic type of button control. The hierarchical
inheritance of Button class is as follows:

37
WPF

Commonly Used Properties of Button Class

Sr. Property & Description

No.

1 Background
Gets or sets a brush that provides the background of the control. (Inherited
from Control)

2 BorderBrush
Gets or sets a brush that describes the border fill of a control. (Inherited from
Control)

3 BorderThickness
Gets or sets the border thickness of a control. (Inherited from Control)

4 Content
Gets or sets the content of a ContentControl. (Inherited from ContentControl)

5 ClickMode
Gets or sets a value that indicates when the Click event occurs, in terms of
device behavior. (Inherited from ButtonBase)

6 ContentTemplate
Gets or sets the data template that is used to display the content of the
ContentControl. (Inherited from ContentControl)

7 FontFamily
Gets or sets the font used to display text in the control. (Inherited from
Control)

8 FontSize
Gets or sets the size of the text in this control. (Inherited from Control)

9 FontStyle
Gets or sets the style in which the text is rendered. (Inherited from Control)

38
WPF

10 FontWeight
Gets or sets the thickness of the specified font. (Inherited from Control)

11 Foreground
Gets or sets a brush that describes the foreground color. (Inherited from
Control)

12 Height
Gets or sets the suggested height of a FrameworkElement. (Inherited from
FrameworkElement)

13 HorizontalAlignment
Gets or sets the horizontal alignment characteristics that are applied to a
FrameworkElement when it is composed in a layout parent, such as a panel
or items control. (Inherited from FrameworkElement)

14 IsEnabled
Gets or sets a value indicating whether the user can interact with the control.
(Inherited from Control)

15 IsPressed
Gets a value that indicates whether a ButtonBase is currently in a pressed
state. (Inherited from ButtonBase)

16 Margin
Gets or sets the outer margin of a FrameworkElement. (Inherited from
FrameworkElement)

Name
17 Gets or sets the identifying name of the object. When a XAML processor
creates the object tree from XAML markup, run-time code can refer to the
XAML-declared object by this name. (Inherited from FrameworkElement)

Opacity
18 Gets or sets the degree of the object's opacity. (Inherited from UIElement)

Resources
19 Gets the locally defined resource dictionary. In XAML, you can establish
resource items as child object elements of a frameworkElement.Resources
property element, through XAML implicit collection syntax. (Inherited from
FrameworkElement)

39
WPF

20 Style
Gets or sets an instance Style that is applied for this object during layout and
rendering. (Inherited from FrameworkElement)

Template
21 Gets or sets a control template. The control template defines the visual
appearance of a control in UI, and is defined in XAML markup. (Inherited from
Control)

VerticalAlignment
22 Gets or sets the vertical alignment characteristics that are applied to a
FrameworkElement when it is composed in a parent object such as a panel or
items control. (Inherited from FrameworkElement)

23 Visibility
Gets or sets the visibility of a UIElement. A UIElement that is not visible is not
rendered and does not communicate its desired size to layout. (Inherited from
UIElement)

24 Width
Gets or sets the width of a FrameworkElement. (Inherited from
FrameworkElement)

Commonly Used Methods of Button Class

Sr.
No. Method & Description

1 ClearValue
Clears the local value of a dependency property. (Inherited from
DependencyObject)

2 FindName
Retrieves an object that has the specified identifier name. (Inherited from
FrameworkElement)

40
WPF

OnApplyTemplate
3 Invoked whenever application code or internal processes (such as a rebuilding
layout pass) call ApplyTemplate. In simplest terms, this means the method is
called just before a UI element displays in your app. Override this method to
influence the default post-template logic of a class. (Inherited from
FrameworkElement)

OnContentChanged
4 Invoked when the value of the Content property changes. (Inherited from
ContentControl)

5 OnDragEnter
Called before the DragEnter event occurs. (Inherited from Control)

OnDragLeave
6 Called before the DragLeave event occurs. (Inherited from Control)

7 OnDragOver
Called before the DragOver event occurs. (Inherited from Control)

8 OnDrop
Called before the Drop event occurs. (Inherited from Control)

9 OnGotFocus
Called before the GotFocus event occurs. (Inherited from Control)

OnKeyDown
10 Called before the KeyDown event occurs. (Inherited from Control)

41
WPF

OnKeyUp
11 Called before the KeyUp event occurs. (Inherited from Control)

12 OnLostFocus
Called before the LostFocus event occurs. (Inherited from Control)

SetBinding
13 Attaches a binding to a FrameworkElement, using the provided binding object.
(Inherited from FrameworkElement)

Commonly Used Events of Button Class

Sr.
No. Event & Description

Click
1 Occurs when a button control is clicked. (Inherited from ButtonBase)

DataContextChanged
2 Occurs when the value of the FrameworkElement.DataContext property
changes. (Inherited from FrameworkElement)
DragEnter
3 Occurs when the input system reports an underlying drag event with this
element as the target. (Inherited from UIElement)
DragLeave
4 Occurs when the input system reports an underlying drag event with this
element as the origin. (Inherited from UIElement)
DragOver
5 Occurs when the input system reports an underlying drag event with this
element as the potential drop target. (Inherited from UIElement)
DragStarting
6 Occurs when a drag operation is initiated. (Inherited from UIElement)

GotFocus
7 Occurs when a UIElement receives focus. (Inherited from UIElement)

Holding
8 Occurs when an otherwise unhandled Hold interaction occurs over the hit test
area of this element. (Inherited from UIElement)
IsEnabledChanged
9 Occurs when the IsEnabled property changes. (Inherited from Control)

KeyDown
10 Occurs when a keyboard key is pressed while the UIElement has focus.
(Inherited from UIElement)

42
WPF

KeyUp
11 Occurs when a keyboard key is released while the UIElement has focus.
(Inherited from UIElement)
LostFocus
12 Occurs when a UIElement loses focus. (Inherited from UIElement)

SizeChanged
13 Occurs when either the ActualHeight or the ActualWidth property changes
value on a FrameworkElement. (Inherited from FrameworkElement)

Example
Lets take a simple example to understand the concepts better. Follow the steps given
below:

1. Open Visual Studio and then Click File > New > Project menu option.

2. In the New Project dialog box, in the Templates pane, click on Visual C# and in
middle pane, select WPF Application.

3. In the Name box, type WPFButtonControl, and then click OK.

4. A new WPF project is created.

5. Drag a Button control from the Toolbox to the WPF design window.

6. Now click the button and go to the Properties window and set the following
properties of the button.

Property Value
Content Click Me
Margin 200
Height 20
Width 75

7. If you look at the XAML window, you will see the following code which is generated
by Visual Studio.

<Window x:Class="WPFButtonControl.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:WPFButtonControl"
mc:Ignorable="d"

43
WPF

Title="MainWindow" Height="350" Width="525">

</Grid>
</Window>

8. Lets now go to the design window and double-click on the button which will open
the MainWindow.xaml.cs file.

9. We will write the following C# code to display a message when the user clicks the
button.

using System.Windows;

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

private void button_Click(object sender, RoutedEventArgs e)

{
MessageBox.Show("You have clicked the button");
}
}
}

When you compile and execute the above code, it will produce the following output:
44
WPF

When you click the button, it will display the following message:

We recommend that you execute the above example code and experiment with some other
properties and events.

45
10. CALENDAR WPF

Calendar is a control that enables a user to select a date by using a visual calendar display.
It provides some basic navigation using either the mouse or keyboard. The hierarchical
inheritance of Calendar class is as follows:

Commonly Used Properties of Calendar Class

Sr.
No. Properties & Description

1 BlackoutDates
Gets a collection of dates that are marked as not selectable.

CalendarButtonStyle
2 Gets or sets the Style associated with the control's internal CalendarButton
object.

3 CalendarDayButtonStyle
Gets or sets the Style associated with the control's internal CalendarDayButton
object.

46
WPF

4 CalendarItemStyle
Gets or sets the Style associated with the control's internal CalendarItem
object.

5 DisplayDate
Gets or sets the date to display.

6 DisplayDateEnd
Gets or sets the last date in the date range that is available in the calendar.

7 DisplayDateStart
Gets or sets the first date that is available in the calendar.

DisplayMode
8 Gets or sets a value that indicates whether the calendar displays a month,
year, or decade.

9 FirstDayOfWeek
Gets or sets the day that is considered the beginning of the week.

10 IsTodayHighlighted
Gets or sets a value that indicates whether the current date is highlighted.

11 SelectedDate
Gets or sets the currently selected date.

12 SelectedDates
Gets a collection of selected dates.

13 SelectionMode
Gets or sets a value that indicates what kind of selections are allowed.

Commonly Used Methods of Calendar Class

Sr.
No. Method & Description

1 OnApplyTemplate
Builds the visual tree for the Calendar control when a new template is applied.
(Overrides FrameworkElement.OnApplyTemplate().)

47
WPF

ToString
2 Provides a text representation of the selected date. (Overrides
Control.ToString().)

Commonly Used Events of Calendar Class

Sr. Events & Description
No.

1 DisplayDateChanged
Occurs when the DisplayDate property is changed.

2 DisplayModeChanged
Occurs when the DisplayMode property is changed.

3 SelectedDatesChanged
Occurs when the collection returned by the SelectedDates property is changed.

4 SelectionModeChanged
Occurs when the SelectionMode changes.

Example
1. Lets create a new WPF project with WPFCalenderControl name.

2. Drag the calendar control from a toolbox and change the background color in the
properties window.

3. Now switch to XAML window in which you will see the XAML tags for calendar and
its background.

4. Add some more properties to set the blackouts dates and selection event, as shown
in the following XAML code.

<Window x:Class="WPFCalenderControl.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:WPFCalenderControl"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="604">
<Grid>
<Calendar Margin="20" SelectionMode="MultipleRange"
48
WPF

IsTodayHighlighted="false"
DisplayDate="1/1/2015"
DisplayDateEnd="1/31/2015"
SelectedDatesChanged="Calendar_SelectedDatesChanged"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<Calendar.BlackoutDates>
<CalendarDateRange Start="1/2/2015" End="1/4/2015"/>
<CalendarDateRange Start="1/9/2015" End="1/9/2015"/>
<CalendarDateRange Start="1/16/2015" End="1/16/2015"/>
<CalendarDateRange Start="1/23/2015" End="1/25/2015"/>
<CalendarDateRange Start="1/30/2015" End="1/30/2015"/>
</Calendar.BlackoutDates>
<Calendar.SelectedDates>
<sys:DateTime>1/5/2015</sys:DateTime>
<sys:DateTime>1/12/2015</sys:DateTime>
<sys:DateTime>1/14/2015</sys:DateTime>
<sys:DateTime>1/13/2015</sys:DateTime>
<sys:DateTime>1/15/2015</sys:DateTime>
<sys:DateTime>1/27/2015</sys:DateTime>
<sys:DateTime>4/2/2015</sys:DateTime>
</Calendar.SelectedDates>
<Calendar.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE4EAF0" Offset="0"/>
<GradientStop Color="#FFECF0F4" Offset="0.16"/>
<GradientStop Color="#FFFCFCFD" Offset="0.16"/>
<GradientStop Color="#FFD80320" Offset="1"/>
</LinearGradientBrush>
</Calendar.Background>
</Calendar>
</Grid>
</Window>

The select event implementation in C# is as follows:

using System;
using System.Windows;

49
WPF

using System.Windows.Controls;

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

private void Calendar_SelectedDatesChanged(object sender,

SelectionChangedEventArgs e)
{
var calendar = sender as Calendar;
if (calendar.SelectedDate.HasValue)
{
DateTime date = calendar.SelectedDate.Value;
this.Title = date.ToShortDateString();
}

}
}
}

When you compile and execute the above code, it will produce the following window which
shows some of the dates are selected while some are blacked out.

50
WPF

If you select another date, then it will be shown on the title of this window.

We recommend that you execute the above example code and try its other properties and
events.

51
11. CHECKBOX WPF

A checkbox is a control that a user can select (check) or clear (uncheck). It provides a list
of options that a user can select, such as a list of settings to apply to an application. The
hierarchical inheritance of Checkbox class is as follows:

52
WPF

Commonly Used Properties of CheckBox

Sr. Property & Description
No.

Background
1 Gets or sets a brush that provides the background of the control. (Inherited
from Control)

BorderBrush
2 Gets or sets a brush that describes the border fill of a control. (Inherited from
Control)