Bindings in Silverlight - binding Textbox to a Datagrid

Hi , and welcome back. Now that you have seen how to bind data to controls, we will now see how to bind data from one control to another control.  This is an extension of what we have already done.  To bind one control to another , we use the ElementName and Path  properties of the Binding.

So Lets start by creating a DataGrid, and a TextBox .   In the code, create a list of numbers to use as data for the DataGrid.  

List<int> a = new List<int>();
for (int i = 1; i < 10; i++)
{
  a.Add(i *2);
}
dataGrid1.ItemsSource = a;

Now , In the Xaml , write the following binding for the Text property of the TextBox

Text="{Binding ElementName=dataGrid1, Path=SelectedItem}"
If you observe, we are using the ElementName to specify the element to which this is bound , and the path to specify which property of the element it is bound to.  Currently, i have chosen to use the SelectedItem property.   It is very important that all properties are CaseSensitive. In case you misspell, it will not cause any excaption, but it will not display anything either.

Now we need to talk a little about binding Modes .  there are 3 modes for binding in silverlight :
1)One time   2)One Way  3)TwoWay

Lets say you have two textboxes A and B to illustrate
A has the text "A" , and B is empty "".

In One Time, you obviously understood, that data is bound only once while the control is loading , and then there is no binding between the elements.  So when it loads, the content of B becomes A , and then if you  change the text of A , the value in b doesn't change.

In One way binding, which is the default option, you can always get the updated value to the bound element .  In one way binding, whatever the value of A , that value of B is also the same.However, if you change the value of B, there is no change in A.

In Two Way binding, change in value of any of the element results in a change in the value of the other.  For example , any change to A is accompanied by a change to B, and vice versa.

Now to make things more interesting with a demo , so add another TextBox to the screen.  Lets bind this to the textBox1's text property.  and set the mode to TwoWay.
 So for the textBox2 's  text property,

 Text="{Binding ElementName=textBox1, Path=Text,Mode=TwoWay}"
 Now any change to textbox2 should change textbox1.

You can notice a few things additionally in this example.
When you click on the datagrid values as the application loads , the contents of both the  textboxes change.
When you change the content of textBox 1, the contents of textbox2 change.

However, when you change the contents of textbox2 , and then click on the datagrid, the binding to the datagrid wont be valid. Clicking on 12 in dataGrid will not change the data in the textBoxes.

 Just experiment with the bindings with other controls and see more features of binding. In hte next post, we will use bindings and converters to change the color of the listboxes.  And that will be the last post of this mini series on basic bindings . See you next time.