Windows-8.1

How to bind ListBox to data in Windows phone application – Introduction

As an application developer, you can create ListBox controls without specifying the contents of each ListBoxItem separately. You can use data binding to bind data to the individual items.

In this post, I will explain with the help of an example how to create a ListBox that populates the ListBoxItem elements by data binding to a data source.

Suppose you want to display a list of students with their marks in a windows phone app. If we specify the contents of each item separately it would take a lot of time. So we make a use of data binding. The steps that need to be followed are

1. Create a new project ListboxBinding.

2. Then open the MainPage.xaml and remove the XAML code for the StackPannel named TitlePanel and replace it with the following code so as to change the page name and application name .

3. Now add the following Xaml code in the Grid named ContentPanel so as to create a list box in the page having the name mylistbox and bind the target Textblocks nameblock and marksblock with data source name and marks respectively.

 


 

4. Now open the page MainPage.xaml.cs.

5. Create a public class called Resultclass having the two properties name and marks.

6. Then add the following code consisting of two global arrays for sample data to be used inside listbox named mylistbox.

 

7. Then we can add the following data into the listbox in two ways.

First method:

First method is to create a Separate list for the Listbox and adding the items into that list. After that set the itemsource property of the Listbox to that of list created.

We can do this with the help of following code.

Second method: In second method instead of making a separate listbox we can directly add the items into the listbox. We can do this with the help of following code.
If you face any problems while understanding the above code you can refer to the following blog post to understand the basics of data binding.

http://www.windowsapptutorials.com/windows-phone/data-binding-in-windows-phone-app-one-way-binding/

8. Now call any one of the following method in the Constructor of the MainPage .Both will give the same list as the Output when you will run the application.

Suppose I call the firstmethod. Then the Constructor of the MainPage will look like


9. Now run the application on Emulator. You will see the following list created on the MainPage .


10. If you want to know more about the Listbox selected item you can refer to the following blog post

How to work with ListBox selected item in Windows phone application

11. I hope this post will be helpful to you. Download the project zip file from the link given below.

Download Full Project file ListboxBinding.zip

Checkout a related post on using ListView in android.

Using ListView in Android

Chetan Gulati

Currently am doing B TECH in IT from Delhi Technological University. App development is my passion. Believe in quality rather than quantity.

Read more:
How to create your first Windows Phone app
How to change the App name and Tile name of your Windows phone app
Data binding in Windows Phone app – One way binding
Close