Starting Windows Phone Development: Lesson 4 of n – Communicating with Services and Databinding
Before we move on, you need to have a basic understanding of event handling and navigation. I went through this in Lesson 1 and Lesson 3. Please finish it first before moving on.
You can always find the lesson source code attached at the end of the blog post.
As promised, by the end of this lesson you will start feeling like a Windows Phone developer. Till now, we learned how to build GUI using XAML, create event handlers, a little bit about the page cycle, saving data offline using the local storage, and finally navigating and sharing between pages. The only thing left to start producing real applications is data binding and communication with services.
What is Databinding?
Do you remember the News application from Lesson 3? Lets say we have bunch of news that we want to display to users. first thing we would ask our selves is how this news look like and how I want to display it to the user. For me, a news item should include a title, a small description, a picture maybe, and the actual text details of the news.
The process of attaching the news items to the UI is called Databinding, so when I have a data source and I want to display it contents on a page controls. Final part of Databinding is the fact that each attribute of the data will be bound to a control on the page. and that’s why its called Databinding.
However, we cant really display all the news with all its details on one page, this way the user will have to keep on scrolling to get to the next news item 
So what I would do is use 2 pages, one to display a list of the news, and when a news item is tapped we navigate to another page to display that news item details, sounds cool.
How to Databind?
Below is a list box defined. Notice that we can include a definition for how the list item would look like under the ListBox.ItemTemplate tag. DataTemplate will contain the blueprint aka the controls with the binding information. To bind a control, we look for the attribute we want to bind, for example we bind an image source to an Image control, and we bind a text to a TextBlock control.
I used a StackPanel to layout the item contents, simply an Image with a TextBlock next to it. It will look close to this:
Using the WCF service
I wont babble about WCF here, I will explain what this service is doing, download the code lazy and check it out, this is a Windows Phone post 
I have one class called WindowsPhoneLessonNews that contains a Title, Content, and Thumb properties. In addition, I have 2 Operation Contracts, one I will use to get all news items and the other will get a specific news item based on an index.
Let’s add a reference to our service to be able to consume it. Right click References and choose Add Service Reference.
I hosted the service in my local host at port 8080. Navigate to your service and select it. I gave the reference the name of Lesson4PhoneNewsService.
Since we have a reference to the service we can start with consuming it. First things first, let’s start with what happens on page load, I am assuming by now you know how to add an event handler for page load, if not go back to the previous lessons. Below you can see that I used an Async call to get all news items when the page loads. We are using Async so we make sure not to lock the GUI until we get a response from the service.
To spice the user experience I added a progress bar to the page and as long as we are expecting results from the service it will keep animating, otherwise it will be invisible for the user.
Since this is Async programming, we need to tell our application what to do when it gets a response back from the service. OK now the response is back, I will simply assign the ItemsSource of our ListBox to the result response I got from the service and hide the progress bar.
Makes sense right? 
I see the progress bar when the Aync call is active and it disappears when I have a response. Since I know that my service will return a generic list that I can bind to the ListBox, I directly set the source to the result.
So, what happens if I tap an item?
To handle the tap, lets create an event handler for when the list selected index is changed. I simply check that I have a valid index selected and then take the user to the details page passing the news item index in the query string. This way when the NewsDetails page loads, it can figure out which news item details to query render.
As for the details page, we will go through the same process. When loaded, consume the service to get the news item with the index passed in the query string.
and almost identical when comes to the delegated completion of the Async call
If you want to go back to the all news list just tap the back button on the phone.
Mirror Mirror who is the most beautiful of them all?
Below is the markup for the main page, Just included a TextBlock to say that we are getting the content from a web service bla bla 
(just felt like it hehe)
With that lets move to the NewsDetails page. Almost same XAML markup from the main page, I just changed the StackPanel orientation to Vertical, removed the image and included the news content. In addition, notice that I changed the font size to 40 for the news title.
Let’s test it out..!
When I first load the application I get the list of news, I did not really get creative about the news content just got phone models and their pictures and some lipsum content for the details.
When I tap a news item I get the item details page.
Summing things up after 4 lessons
So by now you have an informative idea about what it takes to write Windows Phone applications, we went through many topics of XAML and Markup Page construct, Layouts, Events Handling, Navigation, Databinding, Threading, and consuming Web Services in the past 4 lessons. Keep tuned, more to come
Let me know if you have any comments, requests, and feedback.
Comments
- Anonymous
February 22, 2013
looooooooooove it - Anonymous
February 22, 2013
@DoubleRainbowWatchThanks, let me know if you have any questions or topics in your mind that needs to be discussed. - Anonymous
February 25, 2013
How would I read the WCF url when the app gets deployed to production? - Anonymous
February 25, 2013
Excellent Thanks :) - Anonymous
February 25, 2013
c est excellent - Anonymous
February 26, 2013
when is the next article? I am addicted now to the series - Anonymous
February 26, 2013
The comment has been removed - Anonymous
February 26, 2013
@JangidThank you very much =) Do you have any topic requests or suggestion? - Anonymous
February 26, 2013
@rmich hassanThank you very much =) Do you have any topic requests or suggestion? - Anonymous
February 26, 2013
@DoubleRainbowWatchDo you have any topic requests? I am thinking of Threading. Maybe in this week time frame =) - Anonymous
February 26, 2013
Please mind, that when using "SelectionChanged" on a list, tapping the same row multiple times results in only firing the first tap. Made this mistake once ;) - Anonymous
February 27, 2013
@SebastianThanks for the tip :-)so what would you use instead? - Anonymous
March 10, 2013
Waiting for the threading post, yalla ,-) - Anonymous
March 21, 2013
Great job, well explained thanks