The usual behavior of a ListView is to display items as a list in a single column. The ItemSource property of Listview accepts the list of data to be displayed and rendered on the screen.

The code for a simple list to display the Students of a class would be as in the following image.

code

Now let's customize this ListView in a way to display the Student Name along with the Class and School they belong to.

image

As in the image above, the data contains a single record. So to accommodate the data in a single record, let's create a Student model class.

  1. public class Student
  2. {
  3. public string StudentName { get; set; }
  4. public string Class { get; set; }
  5. public string School { get; set; }
  6. }
In order to customize the ListView display, we need to override the ViewCell class.
  1. public class StudentCell : ViewCell
  2. {
  3. public StudentCell()
  4. {
  5. Label nameCell = new Label
  6. {
  7. TextColor = Color.Blue,
  8. FontSize = 30
  9. };
  10. nameCell.SetBinding(Label.TextProperty, "StudentName");
  11. Label classCell = new Label
  12. {
  13. TextColor = Color.Gray,
  14. FontSize = 20
  15. };
  16. classCell.SetBinding(Label.TextProperty, "Class");
  17. Label schoolCell = new Label
  18. {
  19. TextColor = Color.Gray,
  20. FontSize = 20
  21. };
  22. schoolCell.SetBinding(Label.TextProperty, "School");
  23. View = new StackLayout()
  24. {
  25. Children = { nameCell, classCell, schoolCell}
  26. };
  27. }
  28. }
We are done with the Model and the inherited ViewCell class, StudentCell. We will use the ItemTemplate attribute of ListView to assign the StudentCell class.
  1. List<Student> students = new List<Student>();
  2. students.Add(new Student() { StudentName = "Nirmal Hota", Class = "10th", School = "Bhagabati High School" });
  3. students.Add(new Student() { StudentName = "Tadit Dash", Class = "6th", School = "Student High School" });
  4. students.Add(new Student() { StudentName = "Suraj Sahoo", Class = "5th", School = "Khannagar High School" });
  5. students.Add(new Student() { StudentName = "Suvendu Giri", Class = "9th", School = "Baleswar High School" });
  6. students.Add(new Student() { StudentName = "Subhasish Pattanaik", Class = "8th", School = "Rourkela High School" });
  7. // The root page of your application
  8. MainPage = new ContentPage
  9. {
  10. Content = new StackLayout
  11. {
  12. VerticalOptions = LayoutOptions.Center,
  13. Children = {
  14. new ListView(){
  15. ItemsSource = students,
  16. ItemTemplate = new DataTemplate(typeof(StudentCell)),
  17. HorizontalOptions=LayoutOptions.FillAndExpand
  18. }
  19. }
  20. }
  21. };
Let's run the app to see the new ListView.

Happy coding.