In WPF you can bind values to any property on a DependencyObject, however in Silverlight, you can only bind to FrameworkElements. Most often when I have hit this roadblock is when I want to bind the rotation or scale of an element to a value. For instance a compass direction bounded to the current heading.
In WPF this would look like this:
<Image>
<Image.RenderTransform >
<RotateTransform Angle="{Binding Path=Heading}" />
</Image.RenderTransform>
</Image>
Unfortunately, since RotateTransform isn’t a FrameworkElement, this won’t work in Silverlight.
Enter: Attached Properties.
Attached properties are really neat when you start getting to know them, and you can do some pretty cool stuff, and still stick to all the MVC glory that the above case prevents you from. Using an custom attached property that manages rotation, I could for instance write:
<Image local:SurrogateBinder.Angle="{Binding Path=Heading}">
<Image.RenderTransform >
<RotateTransform />
</Image.RenderTransform>
</Image>
So what does this binder look like? The first step is to declare the actual attached property, as well as a get and set method. Note that the naming of the property and the two get and set methods are important for this to work.
public static class SurrogateBinder
{
public static readonly DependencyProperty AngleProperty =
DependencyProperty.RegisterAttached("Angle", typeof(double),
typeof(SurrogateBinder),
new PropertyMetadata(OnAngleChanged));
public static double GetAngle(DependencyObject d)
{
return (double)d.GetValue(AngleProperty);
}
public static void SetAngle(DependencyObject d, double value)
{
d.SetValue(AngleProperty, value);
}
}
The next step is to react to when this value is being set/changed. The property declaration above references an OnAngleChanged method to call when the property changes. The idea is that when the value changes, we grab the rotate transform and set the value.
private static void OnAngleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is UIElement)
{
UIElement b = d as UIElement;
if (e.NewValue is double)
{
double c = (double)e.NewValue;
if (!double.IsNaN(c))
{
if (b.RenderTransform is RotateTransform)
(b.RenderTransform as RotateTransform).Angle = c;
else
b.RenderTransform = new RotateTransform() { Angle = c };
}
}
}
}
In this case, the property binder is only made to work with a UIElement that wants a rotation applied. But by using a little reflection magic, we can create a completely generic binder that can set any property.
Instead of using one attached property, we use two. One for the value to bind, and another for the property to bind to. This is very similar to when you are creating animations and you both set the target you are animating and the property you are animating on. Apart from the Reflection magic, the code is pretty much the same:
public static class SurrogateBind
{
public static readonly DependencyProperty TargetProperty =
DependencyProperty.RegisterAttached("Target", typeof(string), typeof(SurrogateBind), null);
public static string GetTarget(DependencyObject d)
{
return (string)d.GetValue(TargetProperty);
}
public static void SetTarget(DependencyObject d, string value)
{
d.SetValue(TargetProperty, value);
}
public static readonly DependencyProperty ValueProperty =
DependencyProperty.RegisterAttached("Value", typeof(object), typeof(SurrogateBind),
new PropertyMetadata(OnValueChanged));
public static object GetValue(DependencyObject d)
{
return (object)d.GetValue(ValueProperty);
}
public static void SetValue(DependencyObject d, object value)
{
d.SetValue(ValueProperty, value);
}
private static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
string path = GetTarget(d);
if (String.IsNullOrEmpty(path)) return;
string[] pathElements = path.Split(new char[] { '.' });
PropertyInfo propertyInfo = null;
object o = d;
for (int i = 0; i < pathElements.Length; i++)
{
if (o == null) break;
string s = pathElements[i];
int begin = s.LastIndexOf('[');
bool isIndexed = s.EndsWith("]") && begin >= 0;
propertyInfo = o.GetType().GetProperty(isIndexed ? s.Substring(0, s.LastIndexOf('[')) : s);
if (propertyInfo == null) break;
if (i < pathElements.Length - 1)
{
object[] index = null;
if (isIndexed)
{
index = new object[] { int.Parse(s.Substring(begin + 1, s.LastIndexOf(']') - begin - 1)) };
}
o = propertyInfo.GetValue(o, index);
}
}
if (propertyInfo != null && propertyInfo.PropertyType == e.NewValue.GetType())
{
propertyInfo.SetValue(o, e.NewValue, null);
}
}
}
This allows us to to the same thing in XAML:
<TextBox Text="Hello World"
binders:SurrogateBind.Value="{Binding Path=Heading}"
binders:SurrogateBind.Target="RenderTransform.Angle" >
<TextBox.RenderTransform>
<RotateTransform />
</TextBox.RenderTransform>
</TextBox>
Or if we have nested controls:
<TextBox RenderTransformOrigin="0.5,0.5"
Text="Hello Universe!"
binders:SurrogateBind.Value="{Binding Path=MoreValues.Heading}"
binders:SurrogateBind.Target="RenderTransform.Children.Item[1].Angle" >
<TextBox.RenderTransform>
<TransformGroup>
<ScaleTransform />
<RotateTransform />
</TransformGroup>
</TextBox.RenderTransform>
</TextBox>
This approach can actually be extended to invoke methods on your control. For instance when a value changes, you can trigger a storyboard to start playing etc. This is partly something we will get with Triggers in Silverlight 3.0, but if you can’t wait, this is one way to do it. Maybe I’ll cover this in a later blogpost. but for now you can download the source-code and example here: