Silverlight 3 – Element to Element Binding

Hi Folks..

Silverlight 3 Beta 1 is released and as expected, Microsoft has added some cool features. I am very excited about this new feature called Element to Element binding and lets do a walk through.

Element To Element Binding let binding a control’s property directly with another control’s property. For example, we can bind the value property of a slider control directly to the width property of a Rectangle control in the XAML iteself. Let’s see the example..

1. Make sure you have installed the followng Silverlight 3 sdk and tools
   • Microsoft Silverlight 3 SDK Beta 1
   • Microsoft Silverlight 3 Tools Beta 1 for Visual Studio 2008 sp1
   • Silverlight 3 Toolkit March 2009 Installer
2. Create a Silverlight application in the visual studio and in Page.xaml paste the following lines
3. < Grid x:Name=”LayoutRoot” Background=”White”>  <RowDefinition></RowDefinition>

    <RowDefinition ></RowDefinition>

    </Grid.RowDefinitions>

     <Slider x:Name=”mySlider” Grid.Row=”0″ Minimum=”0″ Maximum=”400″ Value=”50″ Orientation=”Horizontal” ></Slider>

     <Image Source=”DSC00443.JPG” Width= “{Binding Value, ElementName=mySlider}” Height=”{Binding Value, ElementName=mySlider}” Grid.Row=”1″ ></Image>

   </Grid>

    

    

   <Grid.RowDefinitions> Note that we have binded the width property of the image with the value property of the Slider control like this

4. 1. Width =”{ Binding Value, ElementName=mySlider}”
5. Now go ahead and hit the F5 button
6. Drag the Slider control and see the width of the image getting changed according to the value of the Slider control.

Cool. Isn’t it.

Please give your feedback on this post.

 Thanks,

Ramprasad