Binding to ComboBox displays Model name instead of property contents

Question

I've set up the binding for a combo box using a property in the ViewModel. But when I debug the app on a device, the contents of the combo box is just the Model name for each index like LC_Points.Model.Grade.

To debug this issue, I've gone through the following checks:

Check property is public
Check Lists aren't empty
Check correct binding name as in VM

Does anyone know how to fix this binding issue?

The ViewModel containing the Lists is set up like this:

namespace LC_Points.ViewModel
{

    public class MainViewModel : ViewModelBase
    {

        /// 
        /// Initializes a new instance of the MainViewModel class.
        /// 
        public MainViewModel()
        {
            //call methods to initilise list data
            GetGradeTypes();
            GetSubjectTypes();

        }


        public List grades { get; set; }
        public List subjects { get; set; }

        public void GetGradeTypes()
        {
            List gradeList = new List();

            // Adding Grades to List
            gradeList.Add(new Grade { grade = "A1" });
            gradeList.Add(new Grade { grade = "A2" });
            gradeList.Add(new Grade { grade = "B1" });
            gradeList.Add(new Grade { grade = "B2" });
            gradeList.Add(new Grade { grade = "B3" });
            gradeList.Add(new Grade { grade = "C1" });
            gradeList.Add(new Grade { grade = "C2" });
            gradeList.Add(new Grade { grade = "C3" });
            gradeList.Add(new Grade { grade = "D1" });
            gradeList.Add(new Grade { grade = "D2" });
            gradeList.Add(new Grade { grade = "D3" });
            gradeList.Add(new Grade { grade = "E,F,NG" });
            gradeList.Add(new Grade { grade = "Pass" });
            gradeList.Add(new Grade { grade = "Merit" });
            gradeList.Add(new Grade { grade = "Distinction" });


            grades = gradeList;

        }


        public void GetSubjectTypes()
        {
            List subjectList = new List();

            // Adding Subjects to List
            subjectList.Add(new Grade { subject = "Accounting" });
            subjectList.Add(new Grade { subject = "Agricultural Economics" });
            subjectList.Add(new Grade { subject = "Agricultural Science" });
            subjectList.Add(new Grade { subject = "Ancient Greek" });
            subjectList.Add(new Grade { subject = "Applied Math" });
            subjectList.Add(new Grade { subject = "Arabic" });
            subjectList.Add(new Grade { subject = "Art" });
            subjectList.Add(new Grade { subject = "Artistic & Creative Group" });
            subjectList.Add(new Grade { subject = "Biology" });
            subjectList.Add(new Grade { subject = "Business" });
            subjectList.Add(new Grade { subject = "Business Group" });
            subjectList.Add(new Grade { subject = "Chemistry" });
            subjectList.Add(new Grade { subject = "Classical Studies" });
            subjectList.Add(new Grade { subject = "Construction Studies" });
            subjectList.Add(new Grade { subject = "Design & Comm Graphics" });
            subjectList.Add(new Grade { subject = "Economics" });
            subjectList.Add(new Grade { subject = "Engineering" });
            subjectList.Add(new Grade { subject = "English" });
            subjectList.Add(new Grade { subject = "French" });
            subjectList.Add(new Grade { subject = "Geography" });
            subjectList.Add(new Grade { subject = "German" });
            subjectList.Add(new Grade { subject = "Hebrew Studies" });
            subjectList.Add(new Grade { subject = "History" });
            subjectList.Add(new Grade { subject = "Home Economics" });
            subjectList.Add(new Grade { subject = "Irish" });
            subjectList.Add(new Grade { subject = "Italian" });
            subjectList.Add(new Grade { subject = "Japanese" });
            subjectList.Add(new Grade { subject = "Languages & Humanities" });
            subjectList.Add(new Grade { subject = "Latin" });
            subjectList.Add(new Grade { subject = "Link Modules" });
            subjectList.Add(new Grade { subject = "Mathematics" });
            subjectList.Add(new Grade { subject = "Music" });
            subjectList.Add(new Grade { subject = "Other Language" });
            subjectList.Add(new Grade { subject = "Physics" });
            subjectList.Add(new Grade { subject = "Physics & Chemistry" });
            subjectList.Add(new Grade { subject = "Practical Group" });
            subjectList.Add(new Grade { subject = "Religious Education" });
            subjectList.Add(new Grade { subject = "Russian" });
            subjectList.Add(new Grade { subject = "Science Group" });
            subjectList.Add(new Grade { subject = "Social Group" });
            subjectList.Add(new Grade { subject = "Spanish" });
            subjectList.Add(new Grade { subject = "Technology" });

            subjects = subjectList;

        }

    }
}

And I've set up the binding in the MainPage View like this:

The output during debug looks like this:

Debug combo box

Rob Caplan - MSFT · Accepted Answer

You need to tell the ComboBox how to display its items. Otherwise it will just call ToString() on the bound item and display something wonky.

There are three ways to get reasonable output:

Define a reasonable ToString() on your DataObject. This is a good idea even if you do one of the others since Narrator will read this if you don't otherwise set accessibility information.
Define the DisplayMemberPath on the ComboBox to point to the property you want displayed.

Define an ItemTemplate for the ComboBox to completely control how each item is displayed. This will allow displaying multiple properties from the bound object, formatting, and a much better UI than just plain text. You can generate an empty template by right clicking on the ComboBox in the designer and choosing Edit Additional Templates.Edit Generated Items (ItemTemplate)... then filling it out as desired:

I'd recommend #1 (as a minimum for accessibility) and #3 for most cases.

Binding to ComboBox displays Model name instead of property contents

Answers (2)

Related Questions