Data Binding #

Navigate to DESIGNER tab and open DATACONTEXT. You can see an editor here that allows you to feed initial data in JSON format.

Write the data into it as shown below:

{
"message1":"I am message 1",
"message2":"I am message 2",
"message3":"I am message 3"
}
{
"message1":"I am message 1",
"message2":"I am message 2",
"message3":"I am message 3"
}

Add controls in the designer, which are three textblocks in the example.

Select Common from the PROPERTIES tab. You can see a link icon adjacent to the field of Text.

Click on it and select the property you want to add to the control.

This is how each of the TextBlock will look after binding the adjacent data context field to them.

Adding collection Items #

Using Data Context, you can also add the items into collections like ListView, ComboBox, and DataGrid. To do so, the steps are as follows:

Add an array in the editor of DATACONTEXT with the name and initial values of your choice. (Remember, this is the initial data, and you can add/modify it when your application is running and the UI will update accordingly)

Update the DataContext with the following Items property:

{
"message1":"I am message 1",
"message2":"I am message 2",
"message3":"I am message 3",
"Items" : ["l1","l2","l3","l4"]
}
{
"message1":"I am message 1",
"message2":"I am message 2",
"message3":"I am message 3",
"Items" : ["l1","l2","l3","l4"]
}

Add the Listview control into the designer and from Common under the PROPERTIES tab, select the link icon adjacent to ItemsSource.

Select the Items property you would like to add to the ListView.

And you can see the data contexts mapped onto your ListView in just a few clicks.

Taking User Input #

You can utilize the data context to build two-way binding for taking user inputs as well. To do so, the following are the simple steps:

Add the field of your choice and assign it an empty value. For example, we have created ‘Name’ and ‘output’ with no data in them.

Setup the layout of your application by adding the required controls.

Bind the text property of the TextBox to one of the fields having an empty value. In this case, we have bound it with the ‘Name’.

Add a TextBlock to showcase output. Bind it to the field with an empty value as well. We have bound it with the ‘output’.

Add an event to the button under the EVENTS tab.

Navigate to the LOGIC tab and write the implementation of the function.

What will essentially happen now is that when the user will start writing in the textbox; the ‘Name’ property in Data Context will take on that data. And, after the click of the button, we will update the output property and display the name.

1. Viola, it’s done!

(Remember to track the state of the particular data field, you will need to use $State.field_name  format as shown in the image.)

Accessing and changing data Context values during runtime #

For the understanding of $State, consider that during runtime, the Data Context is the $State object.

When you access and change its properties, the UI will automatically refresh.

You can also change the data for collections using the format