Silverlight 3 – UI Element to Element Binding
Silverlight 3 now allows UI elements to bind to each other’s properties. This is something WPF folks are pretty used to, but is new to the Silverlight world.
Element Binding is very simple to use. As of this writing, there are some restrictions as to what you can bind to (for example, Transforms were not supported at this time), but this will save a ton of the glue/proxy code many of us have been writing for the life of Silverlight 2.
To use Element Binding, simply include the ElementName property in the binding expression:
Text="{Binding Value, ElementName=SizeSlider}"
Here’s a simple example that uses a slider to resize a button. As the slider is moved, the value is displayed in the label, and the button is resized to that value.
<StackPanel Width="200"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Slider x:Name="SizeSlider"
Minimum="10"
Maximum="200"
Value="100" />
<TextBlock x:Name="SizeLabel"
Text="{Binding Value, ElementName=SizeSlider}" />
<Button x:Name="MyButton"
Content="Hello There"
Width="{Binding Value, ElementName=SizeSlider}"
Height="{Binding Value, ElementName=SizeSlider}" />
</StackPanel>The screen shots below show the slider at 100, down to 24 and change, and up to 200. Notice that the textblock changes as does the size of the button, and all without a single line of code!
