Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Business data is the lifeblood of any real-world application. Whether it is medical data, astronomy data, or social data there has to be a way to manipulate a report on that information. Silverlight has a magnificent binding framework, which I will show you in this movie. For this demonstration, I'm using Visual Studio and a project called Using Business Data in Binding. I will start by showing you one of my business classes. I have a class called RentalHouse which contains a number of properties like MarketingName, WeekPrice, IsWaterFront, and so on.
This class works in conjunction with another class called RentalManager. RentalManager has one interesting method called GetHouses, which returns an observable collection of RentalHouse. This is a generic collection, and the nice thing about the observable collection is it works really well with the Silverlight binding engine. In the body of my code, I'm instantiating a house, setting some properties, and then adding it to the houses collection. And then I add a second house.
My UI for this demonstration is over here in BasicOfDataBindingPage. And I just unpinned my tab. Let me repin that. You can always repin a tab in Visual Studio by holding down the Ctrl key and double-clicking on the title bar. There is my UI. It consists of several text boxes, a checkbox, and an image. I'm going to bind these controls to my underlying data source. So first let's go and look at the underlying data source in my code behind.
Press F7 to switch over there. For a successful binding in Silverlight, you need to set up five different parts. First of all of course, I need a data source. My data source here is coming from the DataClasses.Rental Manager, that class I showed you just a few seconds ago. I am called GetHouses, and then I am returning the first item in that collection. I am storing this house in this variable. Next, I am going to take that house variable and I am going to go my LayoutRoot-- the grid is part of my UI--and I am going to set as a DataContext to that house.
What this does is it provides the data source for this element and all of its children. So any element that is part of my layout root, any of the children elements, will have access to this data. Now the other four parts of the successful binding are listed here. I have the data source, but I also need to set the DataSource property. For example, that would be the MarketingName or the Location. I have to specify that target; in this case that will be one of my UI elements: my text box or my text block. I have to specify which property on my target is going to be bound.
That might be the text property or the IsChecked property. This has to be a dependency property for Silverlight to do the binding correctly. I also have to use the Silverlight binding class. Now that we have seen these parts, let's move over to XAML and set this up. I will start by looking at my Image. My image is one part of those five. The image is the data target, and the Source property is the data target property. It as two parts. The third part is the Binding class.
The fourth part is the name of the property on my underlying data source, and the fifth part was the part that I set my code behind, where I instantiated my data source and assigned it to the data context. With those five pieces, I can load the picture into this image. I am going to add a binding to this Weekly Price text box to show you how this works. I will go up here. I will set the Text property equal to, I will type in a curly brace. Visual Studio recognizes I am working with a markup extension and adds the second curly brace.
It also shows me a list of available markup extensions. I want this first one, Binding, and then I'm going to type in the name of my source. I underline the source, so I am going to choose Weekly Price. I think this is the name I picked. No, WeekPrice, it's called WeekPrice, WeekPrice. And now I will save the Binding works. Press F5. I have a build error.
I see somehow have added a second empty text property here. I will delete that, press F5 and run the application, and I have success. There is the weekly price, there is the image, and there is the house name. If your business data changes in the underlying data store, the Silverlight Binding framework should update your UI. It will manage your updates for you if you configure your data sources correctly. The mechanism of alerting Silverlight about data changes is the INotifyPropertyChanged interface.
Your data source implements this interface and raises an event whenever the data changes. The Silverlight dependency system listens for that event and updates the UI accordingly. I will return back to Visual Studio, and I will look at a different business class. Here I have a RentalHouseUpdate class. It's nearly the same as the business class I showed you a few minutes ago, except it implements INotifyPropertyChanged, and this requires me to have an event called PropertyChanged.
Here it is. And then I raise this event when I want to notify Silverlight that something changed. Here is the code that does that. When I set my weekPrice right here in the center, I am assigning the value to my underlying back invariable, and then I'm using a little helper class RaisePropertyChange event to notify Silverlight, yes, I have just changed the weekPrice. I have a helper class that works with this. Over here, this helper class instantiates my RentalHouseUpdate class and then returns some data. And to just simulate that the data is changing on the back end, I have a DispatcherTimer which fires every three seconds. That's being set up right here, Interval equal three seconds.
I set up a timer.Tick event procedure here and start my timer and then every time this function runs, I have a random number generator that calculates a new price for that house. Now when I run the application and click on this one here called Updating source, you can see that the Weekly Price is changing. Remember this RentalHouse class? It didn't implement INotifyPropertyChanged. Your business classes might not implement this interface and you might not have permission to alter the business code.
There is a pattern in the Silverlight world that works around this problem. It is called the The Model-View-View-Model pattern, or MVVM. The way this works is instead of binding directly to my RentalHouse, I create an intermediate class called the View model. The View model instantiates my RentalHouse on my behalf and then exposes it through properties on the View model, and then my form--in this case the BasicsOfBusinessBinding--instead of binding directly to the RentalHouse, binds to my view model instead.
I suggest you learn more about MVVM, as it is a common UI pattern in the Silverlight community. From my last demonstration, I thought I would show you binding to a different data source and also how you could bind the tooltip to the underlying data source. My business data in this case is CalendarDays, which has two properties: DayName and IsWeekend. And then I also have a class down here called Calendar Days which implements List of calendar day. And as you can see in the body here, I'm setting up some days and whether IsWeekend is true or false.
My UI is over here in this binding tooltip section. What am I doing here? I have a list box and I am binding it to the CalenderDays. If you looked in my code behind, you see I am instantiating the calendar days. And then I'm replacing the standard template that shows in a list box with my own custom template. That's called the DataTemplate. And within the DataTemplate I specify Stackpanel and then any other valid Silverlight UI. So for each row of data in my underlying source, it's going to draw a Stackpanel and then a Border and then a TextBlock, and the text property of this TextBlock will be bound to the DayName inside my Source. And then down here in this checkbox, we will have this IsChecked property bound to IsWeekend.
To make tooltip work, I go up to the ListBox itself and I bind the toolTipService.TooTip property to a Binding, and I say go to the SelectedItem of the ElementName DayListBox--that's my list box--determine which is the selected row, and get it's DayName value and show that in the tooltip. Let's see. Click over here, select Friday, hover my mouse over the ListBox, and the tooltip pops up that says Friday.
Select Sunday, hover my mouse over to ListBox, and the toolTip says Sunday. I wish I had more time to show you more business-binding features. It is a vital skill to have Silverlight developers. To do justice to the topic would take many days, however. Watch the next movie, and I'll introduce you to list binding.
Get unlimited access to all courses for just $25/month.Become a member