Silverlight 4 journey (ii) Data Binding (I)

This article describes the binding in Silverlight 4. Binding is the most important technology in Silverlight and WPF. Binding is used to dynamically bind our data sources to the SilverlightUI reality.

Basic concepts of binding
Binding is a relatively effective link between the UI and Data. In Silverlight, We can bind a property in the UI control, you can also bind several attributes of the UI to each other. Binding has three core concepts: Source (data Source), Binding Model (Binding mode), and Traget (target UI ). This figure shows the relationship between the three elements:

 

The bound data source is generally our CLR Object. Binding Mode refers to the Mode selected for Binding. There are three types in total; the target is our UI. Let's talk about the basic syntax of binding.

Syntax Basics
In fact, the core of the Binding is to establish a link between the Source and Target through the Binding class. We can specify the link either during runtime or during design. Let's first look at the syntax specified during the runtime:

First, we have the following controls in xaml:

<TextBox x: Name = "dateTextBox"/>
In the background code, specify the binding time to the current time:

Var dateNow = DateTime. Now;
Var binding = new Binding ("dateNow ");
Binding. Source = dateNow;
Binding. Mode = BindingMode. OneWay;
DateTextBox. setBinding (TextBox. textProperty, binding); In the code above, we first constructed The Bingding object, then set its Source and BingdingMode, and then dateTextBox set its binding to its TextProperty. Here, the Source is dateNow, And the BingMode selects the OnWay method. The Target is dateTextBox, which is the three core concepts of binding.

Next, let's take a look at how to specify at design:

<TextBox x: Name = "dateTextBox" Text = "{Binding TimeOfDay, Mode = OneWay}"/> in the background, we specify the DataContext attribute of dateTextBox:

Var dateNow = DateTime. Now;
DateTextBox. DataContext = dateNow; in fact, the above {} method is only a simple method. In fact, the above binding syntax can be expressed as follows:

<TextBox x: Name = "dateTextBox">
<TextBox. Text>
<Binding Path = "TimeOfDay" Mode = "OneWay"> </Binding>
</TextBox. Text>
</TextBox>
Binding Mode
There are three types of binding: 1. OneTime; 2. OneWay; TowWay. The three modes determine three different binding types when binding Source to Target.

1) OneTime

When we use the OneTime binding mode, the Target will not be notified when the Source changes. It will be bound to the Target only when the Source is initialized.

2) OneWay

OneWay is the default value of the binding Mode. In this binding Mode, when the Source changes, it will notify and respond to the Target. If the Source attribute changes, the property above Target is automatically changed. Source is not notified when the Target is changed.

3) TwoWay

The TowWay Mode means that changes between the Target and the Source will affect each other, which is often used in some form details.

Bind Source
In the bound source, it can be a CLR Object, or some attributes of other UIS. Colleagues can also bind them to their own attributes. Next, let's take a look at the use of various types of bound data sources.

1) bind to the property

In the previous example, we can see that the TimeOfDay of datetime is bound to textblok, And the OneWay method is also used, that is, the TimeOfDay is changed and updated to textblok, however, we found that the actual time was not automatically updated. The reason is that there is no change notification for the TimeOfDay attribute. Let's go back to the Person type in the first article. How can we implement attribute notification:

Public class Person: INotifyPropertyChanged
{
Public event PropertyChangedEventHandler PropertyChanged;

Private string _ Name;
Public string Name
{
Get {return _ Name ;}
Set {
_ Name = value;
NotifyPropertyChanged ("Name ");
}
}

Private ImageSource _ HeadImg;
Public ImageSource HeadImg
{
Get {return _ HeadImg ;}
Set {
_ HeadImg = value;
NotifyPropertyChanged ("HeadImg ");
}
}

Public void policypropertychanged (string propertyName)
{
If (PropertyChanged! = Null)
{
PropertyChanged (this,
New PropertyChangedEventArgs (propertyName ));
}
}
} We inherited INotifyPropertyChanged. INotifyPropertyChanged is used for broadcast notifications of attribute changes. INotifyPropertyChanged ensures that the UI Target and Source Property are synchronized when we use the OneWay or TowWay mode. However, INotifyPropertyChanged is notified through the PropertyChangedEventHandler delegate, so we will trigger the event PropertyChanged when the property is changed.

 

2) bind to an object

In the above example, we mainly see that attributes in a data source are bound. In fact, we will bind the entire Object as the data source in more cases. At this time, we can specify the Object to the DataContext attribute. DataContext is a DepencyProperty that allows us to share data. The key is that after we specify DataContext on a control, the sub-element can also use this data source.

In the background code:

Var personList = GetPersons ();
This. DataContext = personList [0]; foreground Xaml:

<Image Height = "100" Width = "100" Source = "{Binding HeadImg}"> </Image>
<TextBlock Text = "{Binding Name}" FontSize = "14" Margin = "3"> </TextBlock>
Running effect:

 

3) bind to a UIElement

The SilverLight binding source can also be the property of the UI control. Let's take a look at the following example: A Sina Weibo input character prompt example, a reminder of the number of remaining characters entered:

<StackPanel Orientation = "Vertical" Margin = "50">
<TextBox x: Name = "weiboText"
MaxLength = "140"
Text = "Hi Henry"/>
<StackPanel Orientation = "Horizontal">
<TextBlock Text = "{Binding Text. Length, ElementName = weiboText}"/>
<TextBlock Text = "/"/>
<TextBlock Text = "{Binding MaxLength, ElementName = weiboText}"/>
</StackPanel>
</StackPanel>
The running effect is as follows:

 

In the above example, we use the ElemetName attribute to specify a control.

4) bind to the collection type

In fact, we have seen it in the previous article on binding to a collection-type data source. We mainly need to specify its data source to the ItemSource attribute of a control inherited from ItemControl.

Summary
This article mainly introduces the basic knowledge of binding, selection of binding Mode, and how to bind various types of sources. In the next article, we will mainly look at the problem of Target display.