Case study of binding technology in Silverlight

In Windows Presentation Foundation, the data binding technology is provided to simplify data display and interaction, and is independent from data management. Data Binding can synchronize two attribute values of two different objects. For example, we need to display a text box with dynamic content on the interface. We can create a binding object to bind the value of the text box to a variable, in this way, the content at the other end can be automatically synchronized every time you modify the variable or the value of the text box. In Silverlight, the use of the XAML markup language makes binding easier. You only need to use a brief attribute value to define a binding.

To improve the image, we still use an example to go deep into the binding technology. Assume that a text tag is required to display the number of people on the online gaming platform. In addition, a list shows all online players on a server. Shows the general interface:

Now we assume that there is a game class in the game background, which contains information about the number of our players and online players. The data is provided by other modules. We need to display them separately from the Data Management Section.

Let's take a look at our display of the number of players. to simplify the problem, suppose there is an integer variable in the game class:

 
Public int teammatecount;
 

 

Stores the string that represents the number of our users. To implement binding, the game class must first inherit the inotifypropertychanged interface, which provides the propertychanged event.

Public class game: inotifypropertychanged {public event propertychangedeventhandler propertychanged; // bla}
 

 

Next, you need to trigger this event when the teammatecount value changes. Therefore, you must change the Set Method of the teammatecount attribute:

Private int _ teammatecount; Public int teammatecount {get {return _ teammatecount;} set {_ teammatecount = value; policypropertychanged ("teammatecount");} public void policypropertychanged (string propertyname) {If (propertychanged! = NULL) {propertychanged (this, new propertychangedeventargs (propertyname ));}}
 

 

The above work is to make the binding source value change, can issue an event in time, notify the binding object. If the class of the binding source is a subclass of uielement, this work can also be done by dependencyproperty.

The following is simple: you only need to add the binding in the XAML, and in the C #CodeYou can specify datacontent.

 
<SDK: Label name = "lblteammatecount" content = "{binding teammatecount}"/>
 

Game = new game (); Public mainpage () {initializecomponent (); lblteammatecount. datacontext = game ;}
 

Add a short piece of code to test the test button.

 
Private void btntest_click (Object sender, routedeventargs e) {game. teammatecount = 123 ;}
 

After clicking the button, the displayed result changes immediately and our first small experiment is successfully completed.

 

Next we will increase the difficulty of the problem and learn more about binding. Suppose we are not directly outputting numbers in Arabic numerals, But converting them into Chinese Characters in one digit? In this case, data conversions of binding is required. To achieve conversion, we need to define a class that inherits the ivalueconverter interface numberconverter:

Public class numberconverter: ivalueconverter {static string zhnum = "September 1234"; public object convert (object value, type targettype, object parameter, cultureinfo culture) {string S = ""; foreach (char C in value. tostring () if (C> = '0' & C <= '9') S + = zhnum [C-'0']; return s ;} public object convertback (object value, type targettype, object parameter, cultureinfo culture) {Throw new notimplementedexception ();}}
 

Then, add the corresponding code to implement binding converter in the xaml of the interface:

<Usercontrol. Resources> <local: numberconverter X: Key = "numberconverter"/> </usercontrol. Resources>
 

 

 
<SDK: Label name = "lblteammatecount" content = "{binding teammatecount, converter = {staticresource numberconverter}"/>
 

In this way, the binding with data conversion can be implemented.

 

As the last example, let's take a look at how to bind the content of ListBox to a collection. Silverlight has implemented an observablecollection class that inherits the inotifycollectionchanged interface. When the collection content changes, the collectionchanged event is automatically triggered. Therefore, we do not need to write a class as above, so we can simply use the ready-made class.

First, you need to define the gamer data type:

 
Public class player {public int ID {Get; set;} public string name {Get; set;} public player (int id, string name) {id = ID; name = Name ;}}
 

Note that the public get method must be defined for the member, otherwise the binding will fail.

Next, add players members to the game class:

 
Public observablecollection <player> players;
 

Modify the ListBox definition on the interface:

<ListBox name = "lstplayers"> <ListBox. itemtemplate> <datatemplate> <stackpanel orientation = "horizontal"> <textblock text = "{binding ID}"/> <textblock text = ", "/> <textblock text =" {binding name} "/> </stackpanel> </datatemplate> </ListBox. itemtemplate> </ListBox>
 

The display mode of each item in ListBox and the path to bind are defined.

Then add the following in the constructor of the main interface:

 
Lstplayers. itemssource = game. players;
 

Specifies the data source of ListBox. In this way, the binding process of the entire collection can be completed. When players changes, the interface display will also change.

 

I hope you can give me more advice when you are a beginner in Silverlight!