Friday, February 12, 2010

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

Submit this story to DotNetKicks

del.icio.usSave Total0 users

4 comments:

Anonymous said...

Just wanted to drop a thanks for the Silverlight GetBindingExpression code snippet. It allowed me to force an update as text was being entered for a search box - very much appreciated!

Anonymous said...

in this msdn documentation, http://msdn.microsoft.com/en-us/library/system.windows.data.binding.updatesourcetrigger.aspx

it shows the UpdateSourceTrigger specifying an event - is this only in WPF

Hydroxatone said...

It helped me big time. over-delivered, full-packed with valuable resources and seasoned/timeless information as well.

Caralluma Actives said...

Pretty insightful post. Never thought that it was this simple after all. I had spent a good deal of my time looking for someone to explain this subject clearly

Post a Comment