You are on page 1of 29

Dependency Properties


Value resolution strategy

The magic behind it

How to create a DepdencyProperty

Readonly DependencyProperties

Attached DependencyProperties

Listen to dependency property changes

How to clear a local value


When you begin to develop appliations with WPF, you will soon stumble across
DependencyProperties. They look quite similar to normal .NET properties, but the concept behind
is much more complex and powerful.

The main difference is, that the value of a normal .NET property is read directly from a private
member in your class, whereas the value of a DependencyProperty is resolved dynamically
when calling the GetValue() method that is inherited from DependencyObject.

When you set a value of a dependency property it is not stored in a field of your object, but in a
dictionary of keys and values provided by the base class DependencyObject. The key of an
entry is the name of the property and the value is the value you want to set.

The advantages of dependency properties are

• Reduced memory footprint

It's a huge dissipation to store a field for each property when you think that over 90% of
the properties of a UI control typically stay at its initial values. Dependency properties
solve these problems by only store modified properties in the instance. The default
values are stored once within the dependency property.

• Value inheritance
When you access a dependency property the value is resolved by using a value
resolution strategy. If no local value is set, the dependency property navigates up the

logical tree until it finds a value. When you set the FontSize on the root element it applies
to all textblocks below except you override the value.

• Change notification
Dependency properties have a built-in change notification mechanism. By registering a
callback in the property metadata you get notified, when the value of the property has
been changed. This is also used by the databinding.

Value resolution strategy

Every time you access a dependency property, it internally resolves the value by following the
precedence from high to low. It checks if a local value is available, if not if a custom style trigger is
active,... and continues until it founds a value. At last the default value is always available.

The magic behind it

Each WPF control registers a set of DependencyProperties to the static
DependencyProperty class. Each of them consists of a key - that must be unique per type -
and a metadata that contain callbacks and a default value.

All types that want to use DependencyProperties must derive from DependencyObject.
This baseclass defines a key, value dictionary that contains local values of dependency
properties. The key of an entry is the key defined with the dependency property.
When you access a dependency property over its .NET property wrapper, it internally calls
GetValue(DependencyProperty) to access the value. This method resolves the value by
using a value resolution strategy that is explained in detail below. If a local value is available, it
reads it directly from the dictionary. If no value is set if goes up the logical tree and searches for
an inherited value. If no value is found it takes the default value defined in the property metadata.
This sequence is a bit simplified, but it shows the main concept.

How to create a DependencyProperty

To create a DependencyProperty, add a static field of type DepdencyProperty to your type and
call DependencyProperty.Register() to create an instance of a dependency property. The

name of the DependendyProperty must always end with ...Property. This is a naming convention
in WPF.

To make it accessable as a normal .NET property you need to add a property wrapper. This
wrapper does nothing else than internally getting and setting the value by using the GetValue()
and SetValue() Methods inherited from DependencyObject and passing the DependencyProperty
as key.

Important: Do not add any logic to these properties, because they are only called when
you set the property from code. If you set the property from XAML the SetValue() method
is called directly.

If you are using Visual Studio, you can type propdp and hit 2x tab to create a dependency

// Dependency Property
public static readonly DependencyProperty CurrentTimeProperty =
DependencyProperty.Register( "CurrentTime", typeof(DateTime),
typeof(MyClockControl), new

// .NET Property wrapper

public DateTime CurrentTime
get { return (DateTime)GetValue(CurrentTimeProperty); }
set { SetValue(CurrentTimeProperty, value); }

Each DependencyProperty provides callbacks for change notification, value coercion and
validation. These callbacks are registered on the dependency property.

new FrameworkPropertyMetadata( DateTime.Now,

OnCoerceCurrentTimeProperty ),
OnValidateCurrentTimeProperty );

Value Changed Callback

The change notification callback is a static method, that is called everytime when the value of the
TimeProperty changes. The new value is passed in the EventArgs, the object on which the value
changed is passed as the source.

private static void OnCurrentTimePropertyChanged(DependencyObject

DependencyPropertyChangedEventArgs e)
MyClockControl control = source as MyClockControl;
DateTime time = (DateTime)e.NewValue;
// Put some update logic here...

Coerce Value Callback

The coerce callback allows you to adjust the value if its outside the boundaries without throwing
an exception. A good example is a progress bar with a Value set below the Minimum or above
the Maximum. In this case we can coerce the value within the allowed boundaries. In the
following example we limit the time to be in the past.

private static object OnCoerceTimeProperty( DependencyObject sender,

object data )
if ((DateTime)data > DateTime.Now )
data = DateTime.Now;
return data;

Validation Callback

In the validate callback you check if the set value is valid. If you return false, an
ArgumentException will be thrown. In our example demand, that the data is an instance of a

private static bool OnValidateTimeProperty(object data)
return data is DateTime;

Readonly DependencyProperties

Some dependency property of WPF controls are readonly. They are often used to report the state
of a control, like the IsMouseOver property. Is does not make sense to provide a setter for this

Maybe you ask yourself, why not just use a normal .NET property? One important reason is that
you cannot set triggers on normal .NET propeties.

Creating a read only property is similar to creating a regular DependencyProperty. Instead of

calling DependencyProperty.Register() you call
DependencyProperty.RegisterReadonly(). This returns you a
DependencyPropertyKey. This key should be stored in a private or protected static readonly
field of your class. The key gives you access to set the value from within your class and use it like
a normal dependency property.

Second thing to do is registering a public dependency property that is assigned to

DependencyPropertyKey.DependencyProperty. This property is the readonly property that
can be accessed from external.

// Register the private key to set the value

private static readonly DependencyPropertyKey IsMouseOverPropertyKey =
typeof(bool), typeof(MyClass),
new FrameworkPropertyMetadata(false));

// Register the public property to get the value

public static readonly DependencyProperty IsMouseoverProperty =

// .NET Property wrapper

public int IsMouseOver
get { return (bool)GetValue(IsMouseoverProperty); }
private set { SetValue(IsMouseOverPropertyKey, value); }

Attached Properties

Attached properties are a special kind of DependencyProperties. They allow you to attach a value
to an object that does not know anything about this value.

A good example for this concept are layout panels. Each layout panel needs different data to
align its child elements. The Canvas needs Top and Left, The DockPanel needs Dock, etc.
Since you can write your own layout panel, the list is infinite. So you see, it's not possible to have
all those properties on all WPF controls.

The solution are attached properties. They are defined by the control that needs the data from
another control in a specific context. For example an element that is aligned by a parent layout

To set the value of an attached property, add an attribute in XAML with a prefix of the element
that provides the attached property. To set the the Canvas.Top and Canvas.Left property of a
button aligned within a Canvas panel, you write it like this:

<Button Canvas.Top="20" Canvas.Left="20" Content="Click me!"/>

public static readonly DependencyProperty TopProperty =

typeof(double), typeof(Canvas),
new FrameworkPropertyMetadata(0d,

public static void SetTop(UIElement element, double value)

element.SetValue(TopProperty, value);

public static double GetTop(UIElement element)
return (double)element.GetValue(TopProperty);

Listen to dependency property changes

If you want to listen to changes of a dependency property, you can subclass the type that defines
the property and override the property metadata and pass an PropertyChangedCallback. But an
much easier way is to get the DependencyPropertyDescriptor and hookup a callback by
calling AddValueChanged()

DependencyPropertyDescriptor textDescr = DependencyPropertyDescriptor.

FromProperty(TextBox.TextProperty, typeof(TextBox));

if (textDescr!= null)
textDescr.AddValueChanged(myTextBox, delegate
// Add your propery changed logic here...

How to clear a local value

Because null is also a valid local value, there is the constant

DependencyProperty.UnsetValue that describes an unset value.

button1.ClearValue( Button.ContentProperty );

DataBinding in WPF


WPF provides a simple and powerful way to auto-update data between the business model and
the user interface. This mechanism is called DataBinding. Everytime when the data of your
business model changes, it automatically reflects the updates to the user interface and vice
versa. This is the preferred method in WPF to bring data to the user interface.

Databinding can be unidirectional (source -> target or target <- source), or bidirectional
(source <-> target).

The source of a databinding can be a normal .NET property or a DependencyProperty. The

target property of the binding must be a DependencyProperty.

To make the databinding properly work, both sides of a binding must provide a change
notification that tells the binding when to update the target value. On normal .NET properties this
is done by raising the PropertyChanged event of the INotifyPropertyChanged interface.
On DependencyProperties it is done by the PropertyChanged callback of the property metadata

Databinding is typically done in XAML by using the {Binding} markup extension. The
following example shows a simple binding between the text of a TextBox and a Label that reflects
the typed value:

<TextBox x:Name="txtInput" />
<Label Content="{Binding Text, ElementName=txtInput,
UpdateSourceTrigger=PropertyChanged}" />


Every WPF control derived from FrameworkElement has a DataContext property. This
property is meant to be set to the data object it visualizes. If you don't explicity define a source
of a binding, it takes the data context by default.

The DataContext property inherits its value to child elements. So you can set the
DataContext on a superior layout container and its value is inherited to all child elements. This
is very useful if you want to build a form that is bound to multiple properties of the same data

<StackPanel DataContext="{StaticResource myCustomer}">

<TextBox Text="{Binding FirstName}"/>
<TextBox Text="{Binding LastName}"/>
<TextBox Text="{Binding Street}"/>
<TextBox Text="{Binding City}"/>


If you want to bind two properties of different types together, you need to use a
ValueConverter. A ValueConverter converts the value from a source type to a target type and
back. WPF already includes some value converters but in most cases you will need to write your
own by implementing the IValueConverter interface.

A typical example is to bind a boolean member to the Visibility property. Since the visibility is
an enum value that can be Visible, Collapsed or Hidden, you need a value converter.

<BooleanToVisibilityConverter x:Key="boolToVis" />

<CheckBox x:Name="chkShowDetails" Content="Show Details" />

<StackPanel x:Name="detailsPanel"

Visibility="{Binding IsChecked,
Converter={StaticResource boolToVis}}">

The following example shows a simple converter that converts a boolen to a visibility property.
Note that such a converter is already part of the .NET framework.

public class BooleanToVisibilityConverter : IValueConverter

public object Convert(object value, Type targetType, object
CultureInfo culture)
if (value is Boolean)
return ((bool)value) ? Visibility.Visible :

return value;

public object ConvertBack(object value, Type targetType, object

CultureInfo culture)
throw new NotImplementedException();

Tip: you can derive your value converter from MarkupExtension and return its own instance in
the ProvideValue override. So you can use it directly without referencing it from the resources.

How to Navigate, Group, Sort and Filter Data in WPF

What is a CollectionView?





How to create a CollectionView in XAML

What is a CollectionView?

WPF has a powerful data binding infrastructure. It allows you to bind almost any kind of collection
directly to a view. But when it comes to sorting, filtering and grouping the support of the
collections is rare. That's the point where the CollectionView comes into play. A collection view
is a wrapper around a collection that provides the following additional features:

• Navigation
• Sorting
• Filtering
• Grouping

How to Create and Use a CollectionView

The following example shows you how to create a collection view and bind it to a ListBox

<Window xmlns=""
<ListBox ItemsSource={Binding Customers} />

public class CustomerView

public CustomerView()

DataContext = new CustomerViewModel();

public class CustomerViewModel

private ICollectionView _customerView;

public ICollectionView Customers

get { return _customerView; }

public CustomerViewModel()
IList<Customer> customers = GetCustomers();
_customerView = CollectionViewSource.GetDefaultView(customers);


The collection view adds support for selection tracking. If you set the property
IsSynchronizedWithCurrentItem to True on the view that the collection is bound to, it
automatically synchronizes the current item of the CollectionView and the View.

<ListBox ItemsSource="{Binding Customers}"

IsSynchronizedWithCurrentItem="True" />

If you are using a MVVM (Model-View-ViewModel) pattern, you don't have to extra wire-up the
SelectedItem of the control, because it's implicity available over the CollectionView.

IList<Customer> customers = GetCustomers();

ICollectionView _customerView =

_customerView.CurrentChanged = CustomerSelectionChanged;

private CustomerSelectionChanged(object sender, EventArgs e)

// React to the changed selection

You can also manually control the selection from the ViewModel by calling the
MoveCurrentToFirst() or MoveCurrentToLast() methods on the CollectionView.


To filter a collection view you can define a callback method that determines if the item should be
part of the view or not. That method should have the following signature: bool Filter(object
item). Now set the delegate of that method to the Filter property of the CollectionView and
you're done.

ICollectionView _customerView =
_customerView.Filter = CustomerFilter

private bool CustomerFilter(object item)

Customer customer = item as Customer;
return customer.Name.Contains( _filterString );

Refresh the filter

If you change the filter criteria and you want to refresh the view, you have to call Refresh() on
the collection view

public string FilterString

get { return _filterString; }

_filterString = value;


Sorting data ascending or descending by one or multiple criterias is a common requirement for
viewing data. The collection view makes it so easy to achieve this goal. Just add as many
SortDescriptions as you like to the CollectionView

ICollectionView _customerView =
new SortDescription("LastName",
ListSortDirection.Ascending );
new SortDescription("FirstName",
ListSortDirection.Ascending );

Fast Sorting

The sorting technique explained above is really simple, but also quite slow for a large amount of
data, because it internally uses reflection. But there is an alternative, more performant way to do
sorting by providing a custom sorter.

ListCollectionView _customerView =
as ListCollectionView;
_customerView.CustomSort = new CustomerSorter();

public class CustomerSorter : IComparer
public int Compare(object x, object y)
Customer custX = x as Customer;
Customer custY = y as Customer;
return custX.Name.CompareTo(custY.Name);


Grouping is another powerful feature of the CollectionView. You can define as many groups as
you like by adding GroupDescriptions to the collection view.

Note: Grouping disables virtualization! This can bring huge performance issues on large data
sets. So be careful when using it.

ICollectionView _customerView =

To make the grouping visible in the view you have to define a special GroupStyle on the view.

<ListBox ItemsSource="{Binding Customers}">

<TextBlock Text="{Binding Path=Name}"/>

How to create a CollectionView in XAML

It's also possible to create a CollectionView completely in XAML

<Window xmlns=""
<CollectionViewSource Source="{Binding}" x:Key="customerView">
<PropertyGroupDescription PropertyName="Country" />
<ListBox ItemSource="{Binding Source={StaticResource customerView}}"

How to Bind to Values of an Enum

You cannot directly bind the values of an enum to a WPF list control, because the enum type
does not provide a property that returns all values. The only way to get the names is to call the
GetNames() method. But how to call a method from XAML?

The trick is to use an ObjectDataProvider, that allows us to specify the name of a method and
their parameters and he invokes it from XAML. The result can be used by using a normal data


<ObjectDataProvider x:Key="aligmnments"

MethodName="GetNames" ObjectType="{x:Type
<x:Type TypeName="VerticalAlignment" />

<ComboBox ItemsSource="{Binding Source={StaticResource aligmnments}}" />

Popular DataBinding Expressions

DataContext Bindings

Each control in WPF has a DataContext property. It's meant to be bound to an object that contains the data to be
displayed. The DataContext property is inherited along the logical tree.

{Binding} Binds object in the DataContext

Binds the Name property of the
{Binding Name}
object in the DataContext
Binds the Length property of the
{Binding Name.Length} Name property of the object in the

RelativeSource Binding

The relative source mode of the binding extension helps you to bind to an object with an relative relation to you. You
don't know your or its abolute position, but you know if it's the previous or next item, two levels above you or of an
specific type.

Bind to your self. Helpful to access

{Binding RelativeSource={RelativeSource Self}}
your own properties.
Binds Text property of the target
{Binding Text, RelativeSource={RelativeSource Self}}
{Binding IsSelected, RelativeSource={RelativeSource Binds to the IsSelected property of a
Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}} parent element of type ListBoxItem.

Current Item of Collection Bindings

The slash is a special operator that lets you access the current item of a collection view.

Binds to the current item of a

{Binding /}
collection in the data context.
Binds to the current item of a
{Binding Customers/} collection from the Customer
property within the data context.
Binds to the Name property of the
{Binding Customers/Name} current item of the Customer
collection within the data context.
Data Validation in WPF
What we want to do is a simple entry form for an e-mail address. If the user enters an invalid e-
mail address, the border of the textbox gets red and the tooltip is showing the reason.

Implementing a ValidationRule (.NET 3.0 style)

In this example I am implementing an generic validation rule that takes a regular expression as
validation rule. If the expression matches the data is treated as valid.

/// <summary>
/// Validates a text against a regular expression

/// </summary>
public class RegexValidationRule : ValidationRule
private string _pattern;
private Regex _regex;

public string Pattern

get { return _pattern; }
_pattern = value;
_regex = new Regex(_pattern, RegexOptions.IgnoreCase);

public RegexValidationRule()

public override ValidationResult Validate(object value, CultureInfo

if (value == null || !_regex.Match(value.ToString()).Success)
return new ValidationResult(false, "The value is not a valid
e-mail address");
return new ValidationResult(true, null);

First thing I need to do is place a regular expression pattern as string to the windows resources


<sys:String x:Key="emailRegex">^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@

Build a converter to convert ValidationErrors to a multi-line


The following converter combines a list of ValidationErrors into a string. This makes the
binding much easier. In many samples on the web you see the following binding expression:

{Binding RelativeSource={RelativeSource Self},Path=(Validation.Errors)


This expression works if there is one validation error. But if you don't have any validation errors
the data binding fails. This slows down your application and causes the following message in your
debug window:

System.Windows.Data Error: 16 : Cannot get ‘Item[]‘ value (type

‘ValidationError’) from ‘(Validation.Errors)’ (type
‘ReadOnlyObservableCollection`1′). BindingExpression:Path=(0).
[0].ErrorContent; DataItem=’TextBox’...

The converter is both, a value converter and a markup extension. This allows you to create and
use it at the same time.

public class ValidationErrorsToStringConverter : MarkupExtension,
public override object ProvideValue(IServiceProvider serviceProvider)
return new ValidationErrorsToStringConverter();

public object Convert(object value, Type targetType, object

CultureInfo culture)

ReadOnlyObservableCollection<ValidationError> errors =
value as ReadOnlyObservableCollection<ValidationError>;

if (errors == null)
return string.Empty;

return string.Join("\n", (from e in errors

select e.ErrorContent as

public object ConvertBack(object value, Type targetType, object

CultureInfo culture)
throw new NotImplementedException();

Create an ErrorTemplate for the TextBox

Next thing is to create an error template for the text box.

<ControlTemplate x:Key="TextBoxErrorTemplate" TargetType="Control">

<Grid ClipToBounds="False" >
<Image HorizontalAlignment="Right" VerticalAlignment="Top"
Width="16" Height="16" Margin="0,-8,-8,0"
Source="{StaticResource ErrorImage}"
ToolTip="{Binding ElementName=adornedElement,
<Border BorderBrush="Red" BorderThickness="1" Margin="-1">
<AdornedElementPlaceholder Name="adornedElement" />


The ValidationRule and the ErrorTemplate in Action

Finally we can add the validation rule to our binding expression that binds the Text property of a
textbox to a EMail property of our business object.

<TextBox x:Name="txtEMail" Template={StaticResource

<Binding Path="EMail" UpdateSourceTrigger="PropertyChanged" >
<local:RegexValidationRule Pattern="{StaticResource

How to manually force a Validation

If you want to force a data validation you can manually call UpdateSource() on the binding
expression. A useful scenario could be to validate on LostFocus() even when the value is
empty or to initially mark all required fields. In this case you cann call ForceValidation() in
the Loaded event of the window. That is the time, when the databinding is established.

The following code shows how to get the binding expression from a property of a control.

private void ForceValidation()


Debug Databinding Issues in WPF
DataBinding is one of the most powerful features in WPF. But because it resolves the bindings at
runtime and does not throw exceptions, it's sometimes hard to find the reason why the data do
not appear as expected. There are mainly two reasons:

• The DataBinding expression is invalid. Then use Trace Output to resolve.

• The DataBinding expression is valid, but the result is not the expected. Then use a
Debug Converter to resolve it.

Method 1: Trace messages in the output window

In the example, the text property of the TextBlock is bound to the property "InvalidPath" of the
StackPanel - which does not exists.

<Window x:Class="DebugDataBinding.Window1"
xmlns:x="" >
<StackPanel x:Name="stack">
<TextBlock Text="{Binding ElementName=stack,
Path=InvalidPath}" />

In this case the invalid databinding expression is reported by a trace message in the output

System.Windows.Data Error: 39 : BindingExpression path error:

'InvalidPath' property not found on 'object' ''StackPanel'
(Name='stack')'. BindingExpression:Path=InvalidPath;
DataItem='StackPanel' (Name='stack'); target element is 'TextBlock'
(Name=''); target property is 'Text' (type 'String')

Note: Binding to a path of a property that has NULL value is a valid expression and does not
generate an error message (for e.g. binding to a property of the data context that is NULL).

Adjust the trace level (.NET 3.5 and higher)

NET3.5 has a new feature that allows you to set the level of details of trace messages to None,
Low, Medium or High.

To set the trace level you have to include an extra namespace to your XAML:

<Window x:Class="DebugDataBinding.Window1"

<StackPanel x:Name="stack">
<TextBlock Text="{Binding ElementName=stack, Path=InvalidPath,
" />

The following snipped shows how to adjust the trace level by code:

new ConsoleTraceListener());

PresentationTraceSources.DataBindingSource.Switch.Level =

Method 2: Use a ValueConverter to break into the debugger

A simple trick is to write a value converter that does nothins except breaking into the debugger.
All you need to do now is to add this converter to the binding expression that fails and you can
easily see the values that should be bound.

/// <summary>
/// This converter does nothing except breaking the
/// debugger into the convert method

/// </summary>
public class DatabindingDebugConverter : IValueConverter
public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
return value;

public object ConvertBack(object value, Type targetType,

object parameter, CultureInfo culture)
return value;

To use the converter in XAML, reference the namespace of the assembly that contains the
converter and add an instance of it to the resources of your window.

<Window x:Class="DebugDataBinding.Window1"
Title="Window1" Height="300" Width="300">

<local:DatabindingDebugConverter x:Key="debugConverter" />

<StackPanel x:Name="stack">
<TextBlock Text="{Binding ElementName=stack, Path=ActualWidth,
Converter={StaticResource debugConverter}}" />



If you want to databind two properties that have incompatible types, you need a piece of code in
between, that converts the value from source to target type and back. This piece of code is called
ValueConverter. A value converter is a class, that implements the simple interface
IValueConverter with the two methods object Convert(object value) and object
ConvertBack(object value).

How to implement a ValueConverter

WPF already provides a few value converts, but you will soon need to implement your own
converts. To do this, add a class to your project and call it
[SourceType]To[TargetType]Converter. This is a common naming for value converters.
Make it public and implement the IValueConverter interface. That's all you need to do.

public class BoolToVisibilityConverter : IValueConverter

public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
// Do the conversion from bool to visibility

public object ConvertBack(object value, Type targetType,

object parameter, CultureInfo culture)
// Do the conversion from visibility to bool

How to use a ValueConverter in XAML

First thing you need to do is to map the namespace of your converter to a XAML namespace.
Then you can create an instance of a value converter in the resources of the view and give it a
name. Then you can reference it by using {StaticResource}

<Window x:Class="VirtualControlDemo.Window1"
<l:BoolToVisibilityConverter x:Key="converter" />
<Button Visibility="{Binding HasFunction,
Converter={StaticResource converter}}" />

Simplify the usage of ValueConvers

If you want to use a normal ValueConverter in XAML, you have to add an instance of it to the
resources and reference it by using a key. This is cumbersome, because and the key is typically
just the name of the converter.

A simple and cool trick is to derive value converters from MarkupExtension. This way you can
create and use it in the binding like this: Text={Binding Time,
Converter={x:MyConverter}}, and that is quite cool!

public abstract class BaseConverter : MarkupExtension

public override object ProvideValue(IServiceProvider serviceProvider)

return this;

StringFormat Converter

The StringFormatConverter is a useful converter to control the format of an implicit string

conversion of an object (e.g. if you bind a DateTime to a TextBlock ).

[ValueConversion(typeof(object), typeof(string))]
public class StringFormatConverter : BaseConverter, IValueConverter
public object Convert(object value, Type targetType, object
System.Globalization.CultureInfo culture)
string format = parameter as string;
if (!string.IsNullOrEmpty(format))
return string.Format(culture, format, value);
return value.ToString();

public object ConvertBack(object value, Type targetType, object

System.Globalization.CultureInfo culture)
return null;