Over a million developers have joined DZone.

Customizing ListView Display in Xamarin

· Java Zone

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

As the usual behavior of ListView to display the items in a list and it contains a single column. The ItemSource property of Listview accepts the list of data to be displayed and render the same on screen.

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


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


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.

  public class Student 
        public string StudentName { get; set; }
        public string Class { get; set; }
        public string School { get; set; }

In order to customize the ListView display, we need to override theViewCell class.

    public class StudentCell : ViewCell 
        public StudentCell() 
            Label nameCell = new Label
                TextColor = Color.Blue,
                FontSize = 30
            nameCell.SetBinding(Label.TextProperty, "StudentName");

            Label classCell = new Label
                TextColor = Color.Gray,
                FontSize = 20
            classCell.SetBinding(Label.TextProperty, "Class");

            Label schoolCell = new Label
                TextColor = Color.Gray,
                FontSize = 20
            schoolCell.SetBinding(Label.TextProperty, "School");

            View = new StackLayout()
                Children = { nameCell, classCell, schoolCell}

We are done with the Model and the inherited ViewCell class i.e.StudentCell. We will use the ItemTemplate attribute of ListView to assign the StudentCell class.

 List<Student> students = new List<Student>();
            students.Add(new Student() { StudentName = "Nirmal Hota", Class = "10th", School = "Bhagabati High School" });
            students.Add(new Student() { StudentName = "Tadit Dash", Class = "6th", School = "Student High School" });
            students.Add(new Student() { StudentName = "Suraj Sahoo", Class = "5th", School = "Khannagar High School" });
            students.Add(new Student() { StudentName = "Suvendu Giri", Class = "9th", School = "Baleswar High School" });
            students.Add(new Student() { StudentName = "Subhasish Pattanaik", Class = "8th", School = "Rourkela High School" });
            // The root page of your application
            MainPage = new ContentPage
                Content = new StackLayout
                    VerticalOptions = LayoutOptions.Center,
                    Children = {
						new ListView(){
                            ItemsSource = students,
                            ItemTemplate = new DataTemplate(typeof(StudentCell)),

Let’s run the app to see the new ListView.

Happy coding :)

Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.


Published at DZone with permission of Nirmal Hota, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}