Dependency Properties in Silverlight

Very simply, a property of an element that depends on a number of property-providers outside the element is called a "dependency property". Each of these providers has its own level of precedence. These properties can be either set directly by code, or by one of Silverlight’s services (i.e. property providers) such as animation, data binding, styles etc.

Dependency properties were originally introduced in WPF and are a key concept in both Silverlight and WPF. These dependency features are designed to be read and set in code just like normal properties. However, the internal implementation of dependency properties differs from the implementation of ordinary properties.

To better understand dependency properties, let’s consider an example (this example has been taken and modified from this excellent blog post ):

<UserControl x:Class="DependencyProperty.MainPage"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <ItemsControl Foreground="Red">
            <TextBlock Foreground="Blue">
                1st line of text
            </TextBlock>
            <TextBlock>
                2nd line of text
            </TextBlock>
        </ItemsControl>

    </Grid>
</UserControl>

In this example, we use two TextBlock controls to display two lines of text. The results of running this app are shown below:
Image may be NSFW.
 Clik here to view.
The first TextBlock changes its Foreground property to Blue. Once we run this Silverlight app, we see that the first line of text has blue color, which matches our intuition since we did set the Foreground property to Blue. However, the second line of text is red. This is somewhat surprising (especially for folks who are new to WPF/Silverlight). I never set the Foreground property of the second TextBlock , so why is it red? 
This is an example of dependency properties. Foreground of a TextBlock is a dependency property and the Silverlight runtime sets it to red, which is the value of the Foreground property of the encapsulating ItemsControl .
Defining a Dependency Property
The syntax for creating a dependency property is different than creating an ordinary .NET property. Let's look at how to add a dependency property to a custom WidgetControl. 
1. The first step is to define the object that represents the property. This is an instance of DependencyProperty class. This object must be defined as static readonly field. By convention, this field has the name of the ordinary property plus the post-fix Property. For example, if my new property is called WidgetState, the DependencyProperty object will be called WidgetStateProperty. 
         public static readonly DependencyProperty WidgetStateProperty;

2. The second step is to register the dependency property with Silverlight. This step needs to be completed before any code uses the property, so it must be performed in a static constructor. 
        static WidgetControl()
        {
            WidgetStateProperty = DependencyProperty.Register(
                "WidgetState", 
                typeof(Boolean), 
                typeof(WidgetControl),
                new PropertyMetadata(false));
        }

The arguments to DependencyProperty.Register() method are: the property name (WidgetState in this example), the data type used by the property (Boolean), the type that owns this property (WidgetControl), and a PropertyMetadata object that provides additional information. In this example, I am simply passing a default value of "false" to the PropertyMetadata constructor 
3. Define a CLR wrapper property whose names matches the name of the dependency property. 
        public Boolean WidgetState
        {
            get
            {
                return (Boolean)GetValue(WidgetStateProperty);
            }
            set
            {
                SetValue(WidgetStateProperty, value);
            }
        }

We now have a fully functioning dependency property which can be set just like any other .NET property using the property wrapper 
	widgetCtrl.WidgetState = True;

OR, using XAML: 
        <cnmspc:WidgetControl x:Name="widgetCtrl" WidgetState="True">
        </cnmspc:WidgetControl>

The complete code for this WidgetControl is shown below: 
    public partial class WidgetControl : UserControl
    {
        public WidgetControl()
        {
            InitializeComponent();
        }

        public static readonly DependencyProperty WidgetStateProperty;

        static WidgetControl()
        {
            WidgetStateProperty = DependencyProperty.Register(
                "WidgetState", 
                typeof(Boolean), 
                typeof(WidgetControl),
                new PropertyMetadata(false));
        }

        public Boolean WidgetState
        {
            get
            {
                return (Boolean)GetValue(WidgetStateProperty);
            }
            set
            {
                SetValue(WidgetStateProperty, value);
            }
        }
    }


  Image may be NSFW.
 Clik here to view. Image may be NSFW.
 Clik here to view.