ElementBinding,Binding Modes & UpdateSourceTrigger Property in Silverlight

Silverlight has a great binding syntax and its two way binding approach is a life saver, also it gives room to various new and creative concepts which developers can use to create really cool apps and features. In this article i will talk a little about the Two Way Silverlight binding and the UpdateSourceTrigger Property. Consider an example where we have a TextBox and a Silder control, now we want our TextBox to change its numeric text as we move the thumb of the slider control, now doing this is very simple in Silverlight by the element to element binding syntax, you just have to set the textbox text property to bind to the element slider and set its binding path to the value property of the slider control.

<Slider x:Name="slider" Maximum = "40" Value= "10" />
<TextBox x:Name="tbSliderValues" Text="{Binding ElementName = slider,Path = Value}"/>

So by the above code what you can do is as soon as you change the slider value i.e as you move the slider thumb the text in the textbox gets changed to the current value of the slider.

Now what if you change the text in the textbox , will the same thing works in the reverse order as well , meaning changing the text in the textbox will change the slider value , is it possible ????

Yes this is possible with a very simple tweak , just say thanks to the TwoWay DataBinding syntax of Silverlight

Just modify your code as given below and it will work like charm.

<Slider x:Name="slider" Maximum = "40" Value= "10" />
<TextBox x:Name="tbSliderValues" Text="{Binding ElementName = slider,Path = Value,Mode = TwoWay}"/>

Also to make a little point here about the different types of mode available in Silverlight, basically there are 3 types of mode in Silverlight :-

1. OneWay
2. TwoWay
3. OneTime

One way is used when you know that the changes have to take place in only one direction meaning you can use oneway mode with Slider and TextBlock control in a simple case.

TwoWay mode is used when you want both the binding elements to reflect changes when either one is changed.TwoWay binding mode is the most commonly used mode in silverlight.

OneTime mode is used when you already know that you need to perform binding only one time and later the values related to that thing will never change in your application or if ever they are changing you are not reflecting those changes to your UI.

That said you have got the idea about the binding in Silverlight,now consider a situation in which you have a textbox and on the textchanged property you want to perform the binding to the slider, by setting the mode to two way will only work in this case when you loose focus from the text box i mean it will by default not work on the textchanged event.

So here what we have to do is explicitly force an Update to the property value.

private void tbSliderValue_TextChanged(object sender, TextChangedEventArgs e)
{
BindingExpression expression =
tbSliderValue.GetBindingExpression(TextBox.TextProperty);
expression.UpdateSource();
}

Now this will update your property everytime the textchanged event is fired for the textbox.

Now if you know that you will not need to update this using the default behaviour as in the case above you can reduce overhead by specifying the UpdateSourceTrigger = Explicit which tells that you already have set the update behavior explicitly so no need to check for the updates

<Slider x:Name="slider" Value="1" Maximum="100" Minimum="1" Width="300" Height="20" />
<TextBox x:Name="tbxSliderValue" TextChanged="tbxSliderValue_TextChanged" Text="{Binding Value, ElementName=slider, Mode=TwoWay, UpdateSourceTrigger=Explicit}" VerticalAlignment="Top" Width="300"/>

UpdateSourceTrigger property has only two values one is Explicit and another is Default

Happy Programminig!!!!!!!!!!!!!