Binding JSON data to a LongListSelector

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 DataBinding.

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:SP1

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:

SP2

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.

3. DataBinding

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, LongListSelector with 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 DataContext of LongListerSelector to parsed JSON

This is the final step. After parsing the JSON data, set the DataContext of 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:

wp_ss_20150304_0004

 

 

 

 

 

 

 

 

 

 

 

Download source code from Github

 

Visit my personal website chauhanvaibhav.net