Post
Ask Question

Customizing Listview Display in Xamarin

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.


Similar Articles