WPF: Dependency Properties

Posted on 2/13/2007 @ 4:18 PM in #Silverlight and WPF by | Feedback | 9541 views

So you already know that XAML is HTML-esque. In other words, it tries to adopt the XML declarative style, or markup style in helping the programmer express his intent - atleast as far as the UI is concerned. This has numerous advantages, but I won't go into those now. But I invite you to look a tad bit deeper into this HTML'sque XML declarative way of specifying thick client UIs.

Examine the following XAML -

<Window x:Class="SayHello.Window1"
    <StackPanel Margin="20">
      <TextBlock>My Blog is http://blah.winsmarts.com</TextBlock>

Seems pretty straightforward eh? This is absolutely the same as expressing the above intent, in the following code -

public partial class Window1 : System.Windows.Window
    public Window1()
        StackPanel panel = new StackPanel();
        panel.Margin = new Thickness(20);
        Content = panel;

        TextBlock txt = new TextBlock();
        txt.Inlines.Add("My Blog is http://blah.winsmarts.com");

As you can see, the "HTML'sque" XAML translates to setting various properties. So the following XAML -

<StackPanel Margin="20">
  <TextBlock FontSize="20">My Blog is http://blah.winsmarts.com</TextBlock>

... should translate to the one extra line of code that looks like this - txt.FontSize = 20; ?

Ummmm .. well, go ahead and type that up in Visual Studio. You should see a window that looks like this -

Pretty much what you expected huh? Now this is where it starts getting funky.

Now change your XAML to look like this -

<Window x:Class="SayHello.Window1"
    Title="Winsmarts.com" FontSize="20"
  <StackPanel Margin="20">
    <TextBlock>My Blog is http://blah.winsmarts.com</TextBlock>

The only change I made is, I moved "FontSize=20" to Window. Now if you run the program, the output looks like this -

**** What the heck?

This makes complete sense from an HTML perspective - setting font on <body> means the entire document seems to inherit the font. But if you translate this in C#, I gotta ask, who the heck is setting this property on TextBlock? I know the clever ones of you think that the sneaky MSFT programmers do some magic behind the scenes, and the recursively look at all child controls and set the necessary property eh?

But if that was true ..  then StackPanel would need a property called "FontSize". Unfortunately, StackPanel doesn't have such a property. Oh man, this is getting hairer than a yeti.

So the question is, "How in the world is this darned thing working?".

The answer is "Dependency Properties".

Note: Try experimenting by specifying a FontSize on the TextBlock and a different FontSize on the Window - you will notice that the child (TextBlock) overrides the parent (Window) - makes complete sense.

A dependency property, put simply, is what you must understand to keep your sanity in WPF. WPF does a lot of stuff under the scenes, and it does so with the help of Dependency Properties. To understand Dependency Properties in further depth, let's pop open my favorite friend - Reflector. If you look at System.Windows.Controls.TextBlock, it has an interesting property specified called "FontSize" defined as follows -

[TypeConverter(typeof(FontSizeConverter)), Localizability(LocalizationCategory.None)]
public double FontSize
            return (double) base.GetValue(TextBlock.FontSizeProperty);
            base.SetValue(TextBlock.FontSizeProperty, value);

So, the "FontSize" property, seems to set and get the value of another variable called "FontSizeProperty". <--- Read that again 3 times. See anything funny going on here? I'm tellin' ya man, this is hairier than Mrs. Yeti. Well, don't stop here - keep divin'. Let us try and see what "FontSizeProperty" is declared as -

public static readonly DependencyProperty FontSizeProperty;

Very interesting, I must say. If you continue to dive deeper, you will eventually find something similar to -

FontSizeProperty = DependencyProperty.Register("FontSize", typeof(double), typeof(control))

Truthfully, there are many ways to associate a Property (FontSize), with a DependencyProperty (FontSizeProperty). You will find such a property/depdencyProperty combination on the Windows class as well - with the same name "FontSize". WPF uses this information to give you this "automatically set property values" behavior. This is also how changing the brush repaints a window automatically, as I had described in my Freezable WPF objects post earlier. This is also what forms the basis of Animation on WPF. This is something, you've gotta learn, if you care about WPF.

Sound off but keep it civil:

Older comments..

On 1/9/2009 6:12:00 PM Cleopatra said ..
Incredible! This a very informative article I read so much stuff before couldnt get it.

This one rocks!

On 3/31/2009 4:58:50 AM Vladimir said ..
Great! Best introduction word to Dependency Properties I've seen

On 9/30/2009 11:16:25 AM gianpaolo said ..
thanks a lot, it's the best article I've read so far about D. Prop.

I'm almost on it : )

On 10/15/2009 2:18:18 AM Ujwal Iyer said ..
Simple n easy to grasp... way 2 go!!!

On 12/7/2009 7:40:27 AM The queen said ..
I don't get it...!

On 12/7/2009 1:23:16 PM Sahil Malik said ..
Dear Queen,

What do you not get?

- The king

On 2/25/2010 2:53:29 PM Ravi said ..
Very good article.

On 2/8/2011 7:45:35 AM Leon said ..

I think there is a litle mistake you've got.

When you place the FontSize="20" inside the window, both the window title and the TextBox text fonts are getting bigger (tested on VS 2010). The window title in this case should also be shown with bigger font

In the second screen shot, you show the same picture while it should be not.

Thank you

On 3/28/2011 8:14:53 AM galvin verghese said ..
Great dear. Really it is helpful for me. Actually dependency property question is asked to me in the capgemini interview on sunday 27.03.2011 but i am unable to convince the interviewer. But now i am very confident to impress him when any one ask about dependency property. Great.................