[In-depth introduction to wp8.1 (runtime)] Data Binding Basics

11.1 Data Binding Basics

Data Binding is a data communication method between the XAML interface and the background, because there are many communication scenarios between the interface and the background data, and there are also different associations between the data, therefore, the implementation techniques and methods of data binding are also diverse. The following describes the implementation principles of data binding and related syntax basics.

11.1.1 principles of Data Binding

Data Binding mainly consists of two modules: one is the binding target, that is, the UI interface, and the other is the binding source, that is, the background code that provides data for data binding. Then these two modules are associated with the syntax in some way, which will affect each other or only affect the other side. This is the basic principle of data binding. 11.1 describes the binding process in detail. No matter what elements you want to bind, no matter what the characteristics of the data source, each binding always follows the model of this graph.

Figure 11.1 Data Binding

As shown in data binding, data binding is essentially a bridge between the binding destination and the binding source. This figure demonstrates the following basic Windows Phone Data Binding concepts:

Generally, each binding has four components: bind the target object, target attributes, bind the source, and the path of the value in the binding source to be used. For example, if you want to bind the content of textbox to the name attribute of the employee object, the target object is Textbox, the target attribute is text, and the value to be used is name, the source object is the employee object.

The binding source is also called a data source. It acts as a data center and is a data provider bound to data. It can be understood as the bottom data layer. A data source is the source and source of data. It can be a UI element object, an instance of a class, or a set.

A data source may save a lot of data as an object. Which value does it focus on? This value is the path ). For example, if you want to use a slider control as a data source, this slider control has many attributes which are provided as data sources. It has a lot of data except value, there are also width and height. In this case, you need to select a property that is most concerned about as the binding path for data binding. For example, if the data binding is used to monitor the value changes of the slider control, you need to set path to value. The same applies to using a set as a data source. The value of path is a field in the set.

Where will the data be transmitted? This is the data target, that is, the binding object corresponding to the data source. The bound target object must be the receiver and driver of the data, but not necessarily the data display. The target property is the property bound to the target object, which is easy to understand. The target attribute must be a dependency attribute. Most attributes of a uielement object are dependency attributes, and most dependency attributes (except read-only attributes) support data binding by default. Note that only the dependencyobject type can define the dependency attribute. All uielements are derived from dependencyobject.

11.1.2 create binding

To create a data binding in a Windows Phone application, follow these three steps:

(1) define the source object: The source object will provide data to the UI. In this step, you must create a data class related to the program and use the object of this class as the source for data binding.

(2) bind the datacontext attribute to the source object. The datacontext attribute indicates the data context of the UI element of Windows Phone and provides data to the UI element, if you bind the datacontext attribute of the top-level page of the current page to the source object, the data provided by the data source is used throughout the page.

(3) use the binding tag extension to bind the attributes of the data source object and associate the UI attributes with the attributes of the data source. Binding is a tag extension. You can use binding to declare a series of clauses. These clauses are separated by commas after the binding keyword.

The following example shows how to create a binding: Use the simplest Data Binding program to understand how to create a binding.

Code List 11-1:Create a binding (source code: Chapter 11th \ examples_11_1)

First, define the source object and create a mydata class, which has only one character bed attribute title. Here, note that binding must be of the attribute type, if it is only the title variable, it cannot be bound.

MyData.cs文件主要代码----------------------------------------------------------------------------------------    public class MyData    {        public string Title { get; set; }    }

Then we create another object of the mydata class and assign the object to the datacontext attribute of the page, which indicates that the object is used as the data context of the page, on this page, you can bind the related attributes of the mydata object.

MainPage.xaml.cs文件主要代码----------------------------------------------------------------------------------------    public MyData myData = new MyData { Title = "这是绑定的标题！" };    public MainPage()    {         this.InitializeComponent();         this.DataContext = myData;    }

Finally, use binding on the interface to bind the UI and Data Source attributes. For example, bind the text attribute of the textblock control to the title attribute of the mydata object in the example, in this way, the title attribute string can be displayed on the textblock control.

MainPage.xaml文件主要代码----------------------------------------------------------------------------------------    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">        <TextBlock Text="{Binding Title}"  Margin="12,100,0,28"  FontSize="50"></TextBlock>    </Grid>

11.1.3 bind with element values

In the previous section, the data binding source is a custom data object. In fact, you can also use the Element Object of the UI control as the data source, in this way, you can bind data with element values. Binding element values is to bind a control element as the bound data source. The bound object is a control element, and the bound data source is also a control element, the interaction between values between two controls can be easily realized. When binding element values, you can set the elementname attribute and path attribute of binding. The elementname attribute is assigned the value of the name of the data source control, the path attribute is assigned to a property of the data source control, which reflects a data change of the data source control.

In the previous section, "binding title" is used as the syntax for binding extension labels. This is the simplest binding syntax, in fact, we can use the path attribute to implement richer and more flexible binding associated syntaxes. The related syntaxes are as follows:

(1) In the simplest case, the path attribute value is the attribute name of the source object to be bound.For example, if Path = propertyname, {binding title} is in short form {binding Path = title.

(2) in C #, you can use similar syntax to specify the sub-attribute of an attribute.For example, clause Path = shoppingcart. the order setting is bound to the order attribute of the object or attribute shoppingcart. That is to say, shoppingcart is the attribute of the data source you are bound to, while order is the attribute of shoppingcart, which is equivalent to the attribute of the data source.

(3) To bind an additional Property, parentheses should be placed around the additional property.For example, to bind to the additional attribute grid. Row, the syntax is Path = (grid. Row ).

(4) You can use the array indexer to bind data.For example, the clause Path = shoppingcart [0] sets the binding value to the internal index value corresponding to the array attribute.

(5) You can mix the indexer and sub-attributes in the path clause,For example, Path = shoppingcart. shippinginfo [mailingaddress, street].

(6) inside the indexer, there can be multiple indexer parameters separated by commas. You can use parentheses to specify the type of each parameter.. For example, Path = "[(SYS: int32) 42, (SYS: int32) 24]", in which sys is mapped to the system namespace.

(7) If the source is a set view, you can use the slash "/" to specify the current item.For example, the clause Path =/is used to set the binding of the current item to the view. If the source is set, this syntax specifies the current item of the default set view.

(8) You can use the property name and slash to traverse the attributes of the set.For example, Path =/offices/managername specifies the current item of the source set, which also serves as the offices attribute of the set. The current item is an object that contains the managername attribute.

(9) You can also use the period "." path to bind to the current source.For example, text = "{binding}" is equivalent to text = "{binding Path = .}".

The following example shows how to control the circle radius: the circle radius is bound to the value of the slider control, so that the circle size can be changed by changing the value of the slider control instantly.
Code List 11-2:Control the circle radius (source code: Chapter 11th \ examples_11_2)

MainPage.xaml文件主要代码------------------------------------------------------------------------------------------------------------------    <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">        <TextBlock FontSize="25"  Name="textBlock1" Text="圆形的半径会根据slider控件的值而改变" />        <Slider Name="slider" Value="50" Maximum="400"/>        <TextBlock FontSize="25" Name="textBlock2" Text="半径为:"/>        <TextBlock Name="txtblk" Text="{Binding ElementName=slider, Path=Value}" FontSize="48"/>        <Ellipse  Height="{Binding ElementName=slider, Path=Value}"                     Width="{Binding ElementName=slider, Path=Value}"                    Fill="Red" Name="ellipse1" Stroke="Black" StrokeThickness="1"/>    </StackPanel>

This article comes from the introduction to Windows Phone 8.1 Application Development

Wp8.1 runtime articles: http://www.cnblogs.com/linzheng/p/3998037.html

Source code download: http://vdisk.weibo.com/s/zt_pyrfNHb99O

Welcome to my weibo @ WP Lin Zheng public account: Wp Development (No.: wpkaifa)

Wp8.1 technical exchange group: 372552293

[In-depth introduction to wp8.1 (runtime)] Data Binding Basics