Silverlight 3’s New Element Data Binding

One of the improvements you can look forward to in Silverlight 3 is element data binding, also known as element-to-element data binding. Silverlight 2’s {Binding} expression allowed you to specify the name of the property you were binding to, but not the element that owned the property. This typically meant you had to write a line of code to complete the binding. In Silverlight 3, {Binding} expressions can identify elements as well as properties.

Here’s an example:

<Grid x:Name=”LayoutRoot” Background=”White”>

    <Border>

        <Border.Projection>

            <PlaneProjection x:Name=”Projector” />

        </Border.Projection>

        <user:Penguin />

    </Border>

    <StackPanel Orientation=”Vertical” VerticalAlignment=”Top”>

        <Slider Minimum=”0″ Maximum=”360″

            Value=”{Binding RotationX, ElementName=Projector, Mode=TwoWay}”

            Width=”400″ VerticalAlignment=”Top” Margin=”0,20,0,0″ />

        <Slider Minimum=”0″ Maximum=”360″

            Value=”{Binding RotationY, ElementName=Projector, Mode=TwoWay}”

            Width=”400″ VerticalAlignment=”Top” Margin=”0,20,0,0″ />

        <Slider Minimum=”0″ Maximum=”360″

            Value=”{Binding RotationZ, ElementName=Projector, Mode=TwoWay}”

            Width=”400″ VerticalAlignment=”Top” Margin=”0,20,0,0″ />

    </StackPanel>

</Grid>

This XAML declares a user control that draws a penguin, and then wires up a trio of sliders to the RotationX, RotationY, and RotationZ properties of a PlaneProjection. The result? You can rotate the penguin about the X, Y, and Z axes by moving the sliders. And there’s no code required.

Pretty cool. But element data binding has a couple of limitations/nuances of which you should be aware. First, I applied the PlaneProjection to a Border containing the penguin user control because element data binding didn’t work when I applied it directly to the user control. I’m assuming this is simply a beta bug and that in the final release, I can get rid of the Border.

Second, and more importantly, the target of an element data binding must be a FrameworkElement derivative. I would have preferred to write my XAML like this:

<Grid x:Name=”LayoutRoot” Background=”White”>

    <Border>

        <Border.Projection>

            <PlaneProjection

                RotationX=”{Binding Value, ElementName=SliderX}”

                RotationY=”{Binding Value, ElementName=SliderY}”

                RotationZ=”{Binding Value, ElementName=SliderZ}”

            />

        </Border.Projection>

        <user:Penguin />

    </Border>

    <StackPanel Orientation=”Vertical” VerticalAlignment=”Top”>

        <Slider x:Name=”SliderX” Minimum=”0″ Maximum=”360″ Value=”0″

            Width=”400″ VerticalAlignment=”Top” Margin=”0,20,0,0″ />

        <Slider x:Name=”SliderY” Minimum=”0″ Maximum=”360″ Value=”0″

            Width=”400″ VerticalAlignment=”Top” Margin=”0,20,0,0″ />

        <Slider x:Name=”SliderZ” Minimum=”0″ Maximum=”360″ Value=”0″

            Width=”400″ VerticalAlignment=”Top” Margin=”0,20,0,0″ />

    </StackPanel>

</Grid>

But that produces a XAML parsing error since PlaneProjection isn’t a FrameworkElement. It is unclear at the moment whether the requirement that an element data binding target a FrameworkElement will change before Silverlight 3 ships. The good news is that lots of elements do derive from FrameworkElement. It is perfectly legal, for example, to bind a Slider representing a volume control to the Volume property of a MediaElement since MediaElement derives from FrameworkElement (and Volume is a dependency property).

Incidentally, I’m always interested to hear about companies who adopt Silverlight and put it to work in creative ways. But when John Robbins told me that Playboy magazine is now using Silverlight Deep Zoom, I wasn’t sure what to think. I wondered why John had suddenly developed an interest in Silverlight. 🙂

I’ve had a blast this week blogging about Silverlight 3, and I have many more tips and samples to share. However, I’m leaving for Microsoft India in a few hours, so I won’t be blogging much for the next week or so. I plan to resume my series on Silverlight 3 the week after next and hope to be posting new entries right up to Devscovery.

Finally, as I wrote the sentence “element data binding has a couple of limitations/nuances of which you should be aware,” I was reminded of a quotation from Winston Churchill:

Which is why I sometimes do allow myself to end sentences with prepositions!

Jeff Prosise

View Comments

  • Hi,
    since SL2 I've been waiting for the support for binding to things like Angle property of the RotateTransform for example.
    Based on your current experience, it seems like that still doesn't work :( since RotateTransform ultimately inherits from DependencyObject and not FrameworkElement (I'm at work now and don't have access to SL3 to check if they changed the base class, though I don't see why they would, it makes no sense).
    I'm really puzzled why Microsoft went this route. Binding to Angle property enables some pretty cool scenarios.
    Decisions like this really baffle me, though besides from this and a couple of other minor quibbles, I really love Silverlight.

  • I came across a question on the Silverlight Toolkit support forum yesterday asking how to animate the

  • I try it like you,but ,my DataBinding have a question just becouse I use another way.
    RotationX="{Binding ElementName=SliderX,path=Value}"
    and it does not work, can you help me?

  • PlaneProjection doesn't derive from FrameworkElement, so you must write the XAML the way I did.

  • Ah Winston - he may have been a drunkard and a dope but he had a way with the language few can grasp :-)

  • There is a bug in this ElementName binding. If you are trying to bind to a dependency property on the usercontrol and you provide a name for the usercontrol so you can bind to it, the name is over-written by the parent control if they give it a name. This makes it impossible to know what the name of the usercontrol is to bind to.
    Take for example I'm building a DateTimePicker (pretty sad I have to build my own). I have a texbox inside the DateTimePicker usercontrol that I want to bind the the dependency property Value on the control. So I give my control a name of myUC and use that in binding to the property Value.
    Now somebody comes along and uses two instances of my DateTimePicker control, naming each differently. Now my binding doesn't work :`(

  • I ended up doing the following....don't know if it's the best idea but it seems to work.
    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.ComponentModel;
    namespace TimeInputControl
    {
    public class data: INotifyPropertyChanged
    {
    private DateTime _DateValue;
    public DateTime DateValue
    {
    get { return _DateValue; }
    set { _DateValue = value; if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("DateValue"));}
    }
    #region INotifyPropertyChanged Members
    public event PropertyChangedEventHandler PropertyChanged;
    #endregion
    }
    public partial class DateTimePicker : UserControl
    {
    private data dc = new data();
    public DateTimePicker()
    {
    InitializeComponent();
    this.DataContext = dc;
    }
    public DateTime Value
    {
    get { return (DateTime)GetValue(ValueProperty); }
    set { SetValue(ValueProperty, value); dc.DateValue = value; }
    }
    // Using a DependencyProperty as the backing store for Value. This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ValueProperty =
    DependencyProperty.Register("Value", typeof(DateTime), typeof(DateTimePicker), new PropertyMetadata(System.DateTime.Now));
    }
    }

Recent Posts

How to Navigate Azure Governance

 Cloud management is difficult to do manually, especially if you work with multiple cloud…

6 days ago

Why Azure’s Scalability is Your Key to Business Growth & Efficiency

Azure’s scalable infrastructure is often cited as one of the primary reasons why it's the…

3 weeks ago

Unlocking the Power of AI in your Software Development Life Cycle (SDLC)

https://www.youtube.com/watch?v=wDzCN0d8SeA Watch our "Unlocking the Power of AI in your Software Development Life Cycle (SDLC)"…

1 month ago

The Role of FinOps in Accelerating Business Innovation

FinOps is a strategic approach to managing cloud costs. It combines financial management best practices…

1 month ago

Azure Kubernetes Security Best Practices

Using Kubernetes with Azure combines the power of Kubernetes container orchestration and the cloud capabilities…

2 months ago

Mastering Compliance: The Definitive Guide to Managed Compliance Services

In the intricate landscape of modern business, compliance is both a cornerstone of operational integrity…

2 months ago