Pre requisite (Part 1) of this article was published here: Deserialize Json data using Newtonsoft Json.NET library
If you have successfully parsed your JSON data from a local/hosted file or read data from a server, now you need to show it to the user. To do use we use the concept of
What is DataBinding?
According to MSDN, Data binding is the process that establishes a connection between the application UI and business logic. If the binding has the correct settings and the data provides the proper notifications, then, when the data changes its value, the elements that are bound to the data reflect changes automatically. Data binding can also mean that if an outer representation of the data in an element changes, then the underlying data can be automatically updated to reflect the change. For example, if the user edits the value in a TextBox element, the underlying data value is automatically updated to reflect that change.
Now let’s see a practical example to show this feature. We will continue with the app from previous post – Deserialize Json data using Newtonsoft Json.NET library
1. a. Creating a template
The first step is to create a general template to show the data. Let’s take a look at our sample JSON dat
a used in the app. Now for a simple template, let’s assume we need to show all 5 types of information form the Json data. Let’s create a StackPanel for each information tag like this.
This results in the following format:
1. b. Creating a Template
Let’s use the same style for all the tags and create a unified
StackPanel containing 5 such smaller
StackPanel.This is what our template looks like now:
2. Creating a LongListSelector with a DataTemplate
Now we need to show multiple objects from the JSON, we will create a
LongListSelector and provide it with a
DataTemplate (which the above
StackPanel we created!) to show our JSON. The following code does the magic:
The result looks like a empty StackPanel but don’t worry everything is still there and it’s fine.
This the important step. We need to careful to bind correct elements to correct UI elements. We need to bind the LongListSelector with the name of object in RootObject class. Our classes are these:
Thus we need to bind,
mydata from line 12. Please be careful as to make sure to bind the
RootObject with the
LongListSelector. And then we bind the various tags like id, name, location etc to respective variable of class
mydataYou can see the binding syntax from the code snippet below:
Please take a moment to observe various Data Bindings carefully before proceeding.
4. Set the
LongListerSelector to parsed JSON
This is the final step. After parsing the JSON data, set the
LongListSelector to your parsed JSON data like:
Feel free to be creative with the
DataTemplate you create. You can now use this knowledge to download Json files from servers to create a dynamic app, use some web APIs to exchange Json data and make an awesome app.
And you’re done! This is what final result looks like:
Visit my personal website chauhanvaibhav.net