Silverlight 4’s Improved Element Data Binding

Earlier this year, I wrote about Silverlight 3’s new element data binding feature, which enables XAML elements to be bound together declaratively. I also bemoaned the fact that the target of an element-to-element data binding had to be a Framework-element derivative. Good news! Silverlight 4 fixes this by extending element data binding to DependencyObject derivatives.

My Silverlight 3 element data binding sample was built from the following XAML:

<Grid x_Name=”LayoutRoot” Background=”White”>

    <Border>

        <Border.Projection>

            <PlaneProjection x_Name=”Projector” />

        </Border.Projection>

        <user:PenguinUserControl />

    </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>

The result was a penguin that could be rotated about the X, Y, and Z axes using Sliders:

When I wrote this demo, I wanted to attach the {Binding} expressions to the PlaneProjection, not the Slider controls. But Silverlight 3 didn’t allow this because PlaneProjection isn’t a FrameworkElement. My recourse was to apply the bindings to the Sliders themselves and to use 2-way bindings to sync the Sliders’ Value properties with the PlaneProjection’s RotationX, RotationY, and RotationZ properties.

Such shenanigans are no longer necessary in Silverlight 4, which supports the following syntax:

<Grid x_Name=”LayoutRoot” Background=”White”>

    <user:PenguinUserControl>

        <user:PenguinUserControl.Projection>

            <PlaneProjection

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

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

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

        </user:PenguinUserControl.Projection>

    </user:PenguinUserControl>

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

        <Slider x_Name=”SliderX” Minimum=”0″ Maximum=”360″ Width=”400″

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

        <Slider x_Name=”SliderY” Minimum=”0″ Maximum=”360″ Width=”400″

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

        <Slider x_Name=”SliderZ” Minimum=”0″ Maximum=”360″ Width=”400″

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

<

p class=”MsoNormal”>    </StackPanel>

</Grid>

Also note that you can now apply a PlaneProjection directly to a user control. Silverlight 3 didn’t support this, which explains why in the Silverlight 3 version of this demo, I enclosed the user control in a Border and applied the PlaneProjection to the Border. This is yet another new feature of Silverlight 4 that further narrows the gap between Silverlight and WPF.