Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the most satisfying areas in the Silverlight API is the binding framework. Data binding and its affiliated areas are a huge topic, one that deserves its own title. In this chapter, I will concentrate on show you the fundamentals of data binding. With this demonstration, I will start in Visual Studio in a project called ConnectingElementsWithBinding. I will start by showing you this element-to-element sample. Press F5 to run the application. All the examples on this page are using the fundamental element-to-element binding.
This type of binding is between elements on the visual tree. The value from one element is synchronized with another element through the dependency system. You can see here I have a calendar. When I click on the day, the information from the calendar is placed in this text box. This is being done to element-to-element binding and through the dependency system. In this example I am selecting a day. I am seeing the positional number found in this text block. Over here I'm binding the day name to the text block. And then finally in this example as I typed text, I'm binding the length of the string that I'm typing to the text block on the bottom.
Let me show you how to create a binding in Visual Studio. To do that, I am going to open SetupBinding. The user interface in this demo has three text boxes. The first text box is going to serve as the source of the data, and the other two text boxes are going to serve as the targets. So I click the target that I am interested in, this text box, and I come down to my XAML and I type in the property name that I want to be bound. The text property on this text box is going to be bound.
Normally, the way you put text in here is you type a string. With binding, I replace the string with a markup extension called Binding. Now I have to tell the binding engine where my source is. My type of source is going to be an element source, so I will use the ElementName binding, and here I have to provide the name of the source. In my case, it's SourceTB. Next, I have to tell the binding engine which property on the source to bind to.
That is done by setting the path property. I want to bind to the text property. Now you can see by looking in my designer that it is bound to the data and the source. Just to prove it, I will run the application by pressing F5, clicking on the Element To Element tab, and typing some text in this top text box. If I move to the second text box and type text, nothing happens in the first one. That's because the default binding is called a one-way binding. I might want to have a two-way binding.
This is especially useful when you are going from a text box back to a data store. Let me show you how you set up a two-way binding. Return back to my XAML, type a comma, and I will set the Mode property. As you can see there are three modes: OneTime, OneWay, and TwoWay. I am going to choose the TwoWay binding and then run the application again. I type text in the first text box. It looks good. I come down to the second text box.
I start typing, and it doesn't look like the binding is working, but it is; it's just when the trigger condition happens. I need to tab out of the text box or move out of the text box for that data to update. If I would like to have it happen instantaneously, I need to change another property. Back to my XAML. The property I am looking for its called UpdateSourceTrigger. I am going to choose this PropertyChanged, which means the binding is updated as soon as the property changes.
Press F5 one more time. Now you see it's going in both directions. You might have noticed there are lot of other properties to set, for instance, RelativeSource binding, StringFormatting, a FallbackValue, converters, a lot of different parameters. I am going to look at the converter in the next demo. Rather than hand-editing by XAML, I can use Expression Blend or Visual Studio to create the binding for me.
I need to delete this comma here. Choose the third text box. Now I am going to use Visual Studio to set the binding. To do that, I will use the Property window. Come over to the Property window. I will come down here and click the Text property, and you might notice that there is a tiny, little icon here. I am going to click on this icon and choose Apply Data Binding. I get a dialog, and in this dialog I can set up my binding. I am going to do an element-to- element binding, so I will click ElementName here. Visual Studio reads through all of my elements that have names and shows then in this list. I will choose SourceTB as my source. Then I can come down here to the Path section.
That shows me all the eligible sources. I want to use the Text property on the source, and then I will press Enter. You can see it's working, and you can also see down here what was written by Visual Studio. This is a nice solution, and simple to set up. There are times when I might want to run code during the binding process. The most common scenario for this is data conversion. That means the data in the source is not compatible with the data target. Silverlight provides the Converter property on the binding, which makes it easy to add a conversion.
To do that, I need to write a .NET type. I have two converters already in this project: ReverseStringConverter and TextToBooleanConverter. For today's demo, I will look at ReverseStringConverter. To create a converter, you need to implement the IValue converter interface. What that means to me is that I have to write a Convert function and I have to write a ConvertBack function. In my Convert function, I get the incoming value through this parameter here. You notice I also get a number of other parameters, but for this demonstration, we are going to concentrate on this first parameter.
This is the data coming from the text box. So what do I do with that data? I take it and store it in a string variable. I then take the array of chars that's inside that string and store it in a charArray over here. Then I use the built-in Array.Reverse function to reverse to chars, and then I generate a new string out of that and return the string. So let's review. A string comes in from the source. It gets converted and sent back out of the string to the target. Go back to my SetupBinding, click on this third text box again, go down to the text property.
Notice how the symbol is different this time. It has a little yellow cylinder. That represents that it's data bound. I will click here, choose Apply Data Binding, and now I will come down to the Converter section. The Converter section lists all of the available converters that implement IValue converter that are in scope in my project. I want the converter that's in my code, so I'll click here, and I will choose to ReverseStringConverter. To use the converter, it needs to be instantiated. Visual Studio is offering to do that for me with this link here, Create New, so I will do that.
I will choose the default name and the default location and click OK. And as you can see in the text box, the text is reversed. What did Visual Studio on my behalf? Up at the top in my UserControl.Resources, it created an instance of my ReverseStringConverter and then in my binding, it added this property, ConverterEqual, and then it's choosing a static resource lookup to find that instance of the converter. I mentioned earlier that you can also use Expression Blend to create your binding.
I will show you how to do that now. I am inside Expression Blend and I have opened the same project. I am in the page called BindingInBlend. This has an image with a few borders around it and a couple of slider controls at the bottom. What I want to implement here is a desaturation filter on this picture. I am going to use on of the built-in effects in Blend to do this. So I will go to my Assets pane. I will scroll down to the Effect section. These are pixel shader effects. I will choose this first one, Bloom-Desaturated, and drag it and drop it on my picture.
That looks nice. The key thing here is that Microsoft implemented this effect and they added dependency properties. You can see these properties over here on this side. These are bindable properties. So I can bind the BaseIntensity and the BaseSaturation level. To do that, I click on this little rectangle here called the Property peg. I will click on this and choose DataBinding. Notice the yellow color there? That is very important; keep that in mind. I will click DataBinding and then I am going to bind to an element.
The element that I want is this first slider, and then the property that I want to bind to is down at the bottom, the Value property. And then I will click OK. Remember that yellow color? The property peg is now yellow and so is the border around this BaseIntensity. That tells me at a glance that this is a bound property. Let me add the BaseSaturation binding. Go through the same steps, and I am ready to run the application.
I will press F5, click here on the binding in Blend, and as the user drags the sliders, they can change the desaturations levels. That's nice. I really love the data binding in Silverlight. This movie has shown some of the element-to element binding features. In the next movie, you will see how to bind elements to business data.
Get unlimited access to all courses for just $25/month.Become a member