exotribe

In WPF and Silverlight 2.0 Beta 1, the FrameworkElement class provides a Tag property.

From the Silverlight 2.0 documentation on MSDN:

[Tag] Gets or sets an arbitrary object value that can be used to store custom information about this element.

This property is analogous to Tag properties in other programming models. Tag is intended to provide a pre-existing property location where you can store some basic custom information about any FrameworkElement without requiring you to subclass an element.

The Tag property allows you to link a domain object to a control (in WinForms and WPF), or even to provide an event handler with a marker to aid in code reuse (e.g. you have several buttons, and the share the same click handler code, which checks the tag to determine how to proceed). 

In Silverlight, the Tag property is limited (from MSDN):

Silverlight restricts the Tag value to a string, despite the Object type in the signature. This restriction is enforced both by the XAML processor when parsing property values for Tag, and by the native code implementation if you attempt to set Tag to an object in code.

If you want to attach some arbitrary domain object or data to a control, you might think that you have to resort to the old OO practice of derive and extend.  Derive a new control from some existing control, and add your own custom property.  An arguably more elegant way to attach a custom property to an existing control is to use (wait for it) a custom  Attached Property.

For this example, I'm going to return the bit of the sample code I borrowed from WPF in Action with Visual Studio 2008. The sample code builds a simple calculator user interface, then proceeds to use custom attached properties to define the calculator operations.

In the Tag based implementation of of the Calculator, the divide operator button is defined with (see Page_step_one.xaml and .cs in the attached project):

<Button Grid.Column="3" Grid.Row="2" Content="/" 
    Style="{StaticResource calcButtonStyle}" 
    Tag="Divide" Click="ClickOperator" />

And the ClickOperator() event handler is implemented with:

private void ClickOperator(object sender, RoutedEventArgs e)
{
    string operation = ((Button)sender).Tag.ToString();
    System.Diagnostics.Debug.WriteLine(operation);
    // perform operation code here...
}

To convert the calculator to use a custom attached property for the operation value, we first need to define an Enum and then create a dependency property (Operator.cs):

[update: The IValueConverter is not needed for this project. See Conversion Conversation.]

Before we can use this new attached property in xaml, we need to define a value converter (OperationConverter.cs):

public class OperationConverter : IValueConverter
{

    public object Convert(object value, Type targetType, 
        object parameter, System.Globalization.CultureInfo culture)
    {
        if (targetType == typeof(System.String))
        {
            return Enum.Parse(typeof(Operation), 
                System.Convert.ToString(value, culture), true);
        }
        return Operation.None;
    }

    public object ConvertBack(object value, Type targetType, 
        object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }

}

Finally, we can use the new attached property in our xaml:

<Button Grid.Column="3" Grid.Row="2" Content="/" 
    Style="{StaticResource calcButtonStyle}" 
    local:Operator.Operation="Divide" Click="ClickOperator" />
        

and in our click event handler:

private void ClickOperator(object sender, RoutedEventArgs e)
{
    Operation operation = Operator.GetOperation((Button)sender);
    System.Diagnostics.Debug.WriteLine(operation.ToString());
    // perform operation code here...
}

A custom attached property is the tool of a Silverlight/WPF developer.  Not as clumsy or random as a Tag, but an elegant tool for a more civilized technology.

Published May 18, 2008

Technorati Tags: Silverlight 2.0 WPF DependencyProperty Attached Property WPF in Action

Trackback URL for this post: