Oxygene and WP8 – Binding Collections to ItemsControl

The ItemsControl in Windows Phone has the ItemsSource property which can be assigned a collection such as Lists or Arrays . This example demonstrates how to bind the collection to the ItemsSource property of the ItemsControl and display the items in the page.

Oxygene and WP8 – Binding Collections to ItemsControl

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 ItemsControl component to the UI / XAML page and specify the DisplayMemberPath (property) which needs to displayed on the UI in ItemsControl item.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<ItemsControl Name="items" DisplayMemberPath="Name" />
</StackPanel>
</Grid>

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;

4. Run the Project in Windows Phone Emulator by hitting the f5 key . You should be able to see the list of employee in the application as shown below.

You can download the sample code snippet used in this example here