Populating UWP Combobox from code

Question

I'm trying to populate a combobox from code instead of defining the values on the XAML. However, whether I try the binding method or setting them from a list, I can't seem to get it to work.

With the following class

    public class Quote
    {
        public int Value;
        public string DisplayValue; 
    }

And the following Observable Collection

    public ObservableCollection<Quote> QuoteCollection
    {
        get
        {
            return new ObservableCollection<Quote>
            {
               new Quote{ DisplayValue = "6", Value = 6 },
               new Quote{ DisplayValue = "12", Value = 12 },
               new Quote{ DisplayValue = "18", Value = 18 },
               new Quote{ DisplayValue = "24", Value = 24 },
               new Quote{ DisplayValue = "30", Value = 30 },
               new Quote{ DisplayValue = "36", Value = 36 },
               new Quote{ DisplayValue = "42", Value = 42 },
               new Quote{ DisplayValue = "48", Value = 48 },
               new Quote{ DisplayValue = "54", Value = 54 },
               new Quote{ DisplayValue = "60", Value = 60 }
            };
        }
    }

I can't seem to get it to work, nothing seems to happen when I bind it like this:

<local:ExtendedComboBox x:Name="quotes" ItemsSource="{Binding QuoteCollection}" DisplayMemberPath="DisplayValue"/>

And when I try to add it from a set List like this:

        quotes.ItemsSource = new List<Quote>
        {
            new Quote{ DisplayValue = "6", Value = 6 },
            new Quote{ DisplayValue = "12", Value = 12 },
            new Quote{ DisplayValue = "18", Value = 18 },
            new Quote{ DisplayValue = "24", Value = 24 },
            new Quote{ DisplayValue = "30", Value = 30 },
            new Quote{ DisplayValue = "36", Value = 36 },
            new Quote{ DisplayValue = "42", Value = 42 },
            new Quote{ DisplayValue = "48", Value = 48 },
            new Quote{ DisplayValue = "54", Value = 54 },
            new Quote{ DisplayValue = "60", Value = 60 }
        };

The Combobox appears to be filled with something, but all the options are blank.

The ExtendedComboBox was directly taken from here and both solutions were taken from here.

score 2 · Answer 1 · answered Jul 31 '17 at 18:04

2

Your Binding properties are regular properties but does not have getter and setter. So you need to change your class to below.

public class Quote
{
    public int Value { get; set; }
    public string DisplayValue { get; set; }
}

I did not test this but it should fix the issue.

answered Jul 31 '17 at 18:04

AVK

3,893
1
22
31

It's still not showing anything. I just "solved it" by assigning the ItemsSource to a List and then converting the value to int32 when I need to use it. – user8296390 Jul 31 '17 at 18:55
1

@user8296390 this is some bad hack you are doing there. Your observable collection way is problematic because you are always returning a new instance. If you manually set the items source like how you did last, this answer should work. – Justin XL Jul 31 '17 at 20:55

score 1 · Answer 2 · answered Aug 07 '17 at 07:28

In addition to the Getter and Setter declaration suggestion from AVK, you also need to ensure the Page.DataContext has been set correctly.

For example, the Constructor method:

public MainPage()
{
    this.InitializeComponent();
    this.DataContext = this; //Here
}

Collection:

public ObservableCollection<Quote> QuoteCollection
{
            get
            {
                return new ObservableCollection<Quote>
            {
               new Quote{ DisplayValue = "6", Value = 6 },
               new Quote{ DisplayValue = "12", Value = 12 },
               new Quote{ DisplayValue = "18", Value = 18 },
               new Quote{ DisplayValue = "24", Value = 24 },
               new Quote{ DisplayValue = "30", Value = 30 },
               new Quote{ DisplayValue = "36", Value = 36 },
               new Quote{ DisplayValue = "42", Value = 42 },
               new Quote{ DisplayValue = "48", Value = 48 },
               new Quote{ DisplayValue = "54", Value = 54 },
               new Quote{ DisplayValue = "60", Value = 60 }
            };
            }
}

Custom class:

public class Quote
{
            public int Value { get; set; }
            public string DisplayValue { get; set; }
}

Populating UWP Combobox from code

2 Answers2