DataTemplate lets the developers use multiple controls or elements within the ItemsControl, ListBox and LongListSelector controls.

In one of the previous articles , we explained how to bind collection to ItemsControl.

In this article , we will extend or modify the same example to display the Collection in LongListSelector using DataTemplate.

Oxygene and WP8 – Binding to LongListSelector via DataTemplate

1. Let’s assume that we have the Employee class which needs to be utilized for displaying it on the UI.

type
 Employee = public class
 public
   property Name: System.String;
   property Designation: System.String;
 end;

2. Lets add the LongListSelector component to the UI / XAML page with the DataTemplate which includes a textblock to display the Name of the employee.

<phone:LongListSelector x:Name="items">
  <phone:LongListSelector.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Name}" />
    </DataTemplate>
  </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

3. The final step is to create the employee collection and then assign it to the ItemsSource property of the ItemsControl as shown below.

var emp1: Employee := new Employee(Name := 'Senthil Kumar',
Designation := 'Senior Software Engineer');
var emp2: Employee := new Employee(Name := 'Santhosh',
Designation := 'Network Engineer');
var emp3: Employee := new Employee(Name := 'Jeeva ',
Designation := 'Mechanical Engineer');
var empLst : List<Employee> := new List<Employee>;
empLst.Add(emp1);
empLst.Add(emp2);
empLst.Add(emp3);
items.ItemsSource := empLst;

When you run the project , you should see the names shown inside the longlistselector.

You can download the sample code used in this example here