Sunday, September 4, 2011

Make a Silverlight TextBox update its binding on every character

Problem :
              One of the problem which I have faced during my learning and working in MVVM pattern and one of requirement when you have provided the search box as user type in some character in text box control you want to show results in the data grid control. But in silverlight there is only two option when you bind a property to update the source Default and Explicit. There is no PropertyChanged option which is provided in the WPF.

Solution : 
              For the problem I have created sample application to discuss how to get this working if you have similar situation mean there may be requirement from your client to provide such functionality mean as client type in some character the result should displayed in the some control link datagrid which I have used. In the example I have used one text box control ( for user to type contact name ) and a datagrid control to show the matching result of the user search. You can see the layout of the example in Image 1, I have home page which contain the problem and the working example which is working fine as user type in character in the text box matching results are filtered in the data grid control.

Image 1
Example 1:
                For example 1 which is shown in the Home page link you can see I have used the normal binding of the text box control. The code for the first example is shown in the List 1. Here you can see that I have not set UpdateSourceTrigger which is default mean when control lost focus then latest value is send back to the view model as binding mode is TwoWay.  I have created two view models for home and the Working Example view but the code is nearly same in both view models. The change will be in the xaml of the both the views.

List 1
Example 2: 
             For Example 2 which is shown in working example page link here you can see  as user is typing in the contact name text box records in the datagrid are filtered.The xaml code for the Example 2 is shown in the List 2. Here you can see that I have used the Behavior for updating the source whenever user type in some character in the text box.


List 2

Note: I have also tried to use the event trigger to solve this problem but in event trigger the problem is it didn't send last character entered by the user. For exam if user enter character 'AN' then it will send 'A' back to the source not 'N' which is the last character entered by the user. That is why I didn't use that solution as end user will not get latest result because of last character exclusion. 

By using the above technique mean using the Behavior my problem of filtering the record on every key press was solved hope if you have requirement like this you can use same technique to solve it.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!

1 comment:

Ryan Watson said...

Once I stuck to this binding section but after some efforts I got through it..Nice one!!