Under the hood: Attached Properties - Rudi Grobler
Monday, January 14, 2008 11:02 AM rudi

Under the hood: Attached Properties

I recently started playing round with attached properties. They are very useful. I wrote 2 CodeProject articles on how to effectively use them.

Glass Effect

Drag & Drop

The code for these articles is available for download here

To understand how attached properties work, we first have to grasp how DependencyObject and DependancyProperty work! I will explain the basics by dissecting a very basic application. I wrote a small application that has a StackPanel and in the stack panel are 2 buttons. The first button just has text inside and the other has a small image. Let's start off by defining what a visual tree is. The visual tree is exactly (or almost) what it sounds like. It's a tree of visual elements and how they are related. Here is a simplified visual tree for our application.

 

PS. Use mole to see a more detailed visual tree

 [EDIT] Adam Nathan's book WPF unleashed has a excellent chapter about Visual and Logical trees. I found a link where you can download this chapter

Next, most controls are derived from DependencyObject. DependencyObject functions as a cup where you can store all your DependencyProperties for the selected control (Similar to a dictionary). It is important to realize that each control has its own DependencyObject that holds all the DependancyProperties for this control's instance.

This is also where the magic happens... If you look at the visual tree, then you will soon realize that a DependancyObject also stores all the properties for the items "above" it in the visual tree. Ok, this is a huge concept to grasp!!! Look at the provided Visual Tree. It is important to notice that although Window has a DependancyPropety called FontSize, the StackPanel doesn't! But because the DependancyObject "inherits" everything above it, the StackPanel also knows what the items above its FontSize are!!! Well, that sounds amazing, prove it... Ok, let's start by setting the windows FontSize to something like.

FontSize = 32;

If you now run this application, all the buttons size will also change to 32 because Window is above all the controls, all the items underneath it knows its FontSize!!! Ok, Button has a FontSize but what about the StackPanel? Let's have a look at the StackPanel

double fontSize = (double)rootSP.GetValue(Control.FontSizeProperty);

This should now ask the rootSP's "cup" if it is holding any FontSizeProperty values... This should return 32. Ok, so this proves that although StackPanel has no property called FontSize, it can hold such a value if it has an item above it in the visual tree with such a property! OK, how does this relate to Attached Properties? Attached Properties are DependancyProperties, they are just register differently.

Let's look at how regular DependancyProperty works

Register a DependencyProperty object (i.e. FontSizeProperty) and then define a public property (ie. FontSize) that use the standard CLR properties get and set to call GetValue and SetValue on itself!

Attached properties works similar, register a DependencyProperty object (i.e. FontSizeProperty) with RegisterAttach and then define static Get<PropertyName> and Set<PropertyName> (ie. SetFontSize and GetFontSize). The Get and Set gets passed as a parameter the element it needs to set the DependencyProperty on!

OK, but how does this work? Imagine you are designing a layout system. In the old days you needed to have each control expose a Left & Top property. This worked great but how do I now make it use a new layout system that has no concept of Left and Top but rather relies on Time or Date? In the old days it would have been difficult to do. Let's look at a way of doing it now:

As we discussed earlier, a control can remember a property even if that property doesn't exist on it. That is great, let's look at a practical example:

If I replace my StackPanel with a DockPanel, I can then set each child control to a specific type of dock.

<Button x:Name="btn1" Content="Button #1" DockPanel.Dock="Top"/>

Now, if the dock panel does its rendering and layout, it can interrogate each item for information on how to display it!!!

This dramatically reduces the amount of predefined properties we need and makes the layout options endless!!!

Have a look at my 2 CodeProject articles for more ideas on how to use Attached Propeties practically.

Filed under: ,

Comments

# Under the hood: Attached Properties

Monday, January 14, 2008 11:11 AM by DotNetKicks.com

You've been kicked (a good thing) - Trackback from DotNetKicks.com

# Keeping track of open windows in WPF

Thursday, March 27, 2008 7:46 AM by Rudi Grobler

Hopeful by now, everybody has seen the Lawson Smart Client created by Frog Design? If not, have a look

# Why WPF Rocks (Custom Layout Panel Showcase)

Tuesday, April 15, 2008 7:56 AM by Rudi Grobler

Another enhancement in WPF that makes it stand out above the rest is the excellent layout system. In