Welcome to Pete Brown's 10rem.net

First time here? If you are a developer or are interested in Microsoft tools and technology, please consider subscribing to the latest posts.

You may also be interested in my blog archives, the articles section, or some of my lab projects such as the C64 emulator written in Silverlight.

(hide this)

Silverlight 3 – UI Element to Element Binding

Pete Brown - 18 March 2009

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!

image image image

   
posted by Pete Brown on Wednesday, March 18, 2009
filed under:    

3 comments for “Silverlight 3 – UI Element to Element Binding”

  1. dennysays:
    what about this:

    I have RIA / EDM

    I have a combobox that is bound to a list

    I now want to setup a second control that is bound to a second list

    i have a RIA / DOmain method that needs a parameter that will be the selected id from the combo box.

    say the combo box is bound to a list of ID,Name

    so when the user picks the 3rd item the ID == 45
    i want to have the second control update to get the data for ID 45

    i can get a text box and a button on the form to do this....
    but i want the combo box to make it happen....
    idealy w/o code using routed commading ???

Comment on this Post

Remember me

6 trackbacks for “Silverlight 3 – UI Element to Element Binding”

  1. Community Blogssays:
    For those of you watching the agenda for MIX09, the announcement of Silverlight 3 probably didn’t
  2. DotNetShoutoutsays:
    Thank you for submitting this cool story - Trackback from DotNetShoutout
  3. Delay's Blogsays:
    I came across a question on the Silverlight Toolkit support forum yesterday asking how to animate the