CODEWITHSUNDEEP
c#mvvmcomboboxwin-universal-app
Simon Williams
Simon Williams

Reputation: 1046

ComboBox binding in Windows Universal App

In my Windows Universal Project, I have ComboBoxes for time entry. Three ComboBoxes are bound to the Hour, Minute and Second properties in my ViewModel...

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <ComboBox SelectedItem="{Binding Hour, Mode=TwoWay}" ItemsSource="{Binding HourList}"></ComboBox>
    <ComboBox SelectedItem="{Binding Minute, Mode=TwoWay}" ItemsSource="{Binding MinuteList}"></ComboBox>
    <ComboBox SelectedItem="{Binding Second, Mode=TwoWay}" ItemsSource="{Binding SecondList}"></ComboBox>
</StackPanel>

Here is my ViewModel... (notice how I ultimately want my form to be able to both set and display the "Time" property)....

public class TimeEntryViewModel : INotifyPropertyChanged
{
    public bool Accept { get; set; }

    public TimeEntryViewModel(DateTime time)
    {
        Time = time;
        HourList = new ObservableCollection<string> { "00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23" };
        MinuteList = new ObservableCollection<string> { "00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59" };
        SecondList = new ObservableCollection<string> { "00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59" };
    }

    public ObservableCollection<string> HourList { get; set; }
    public ObservableCollection<string> MinuteList { get; set; }
    public ObservableCollection<string> SecondList { get; set; }

    private string _hour;
    public string Hour {
        get { return _hour; }
        set
        {
            _hour = value;
            OnPropertyChanged("Hour");
        }
    }

    private string _minute;
    public string Minute
    {
        get { return _minute; }
        set
        {
            _minute = value;
            OnPropertyChanged("Minute");
        }
    }
    private string _second;
    public string Second
    {
        get { return _second; }
        set
        {
            _second = value;
            OnPropertyChanged("Second");
        }
    }

    public DateTime Time
    {
        get
        {
            return new DateTime(DateTime.Now.Year, 
                DateTime.Now.Month, 
                DateTime.Now.Day, 
                int.Parse(_hour), int.Parse(_minute), int.Parse(_second));
        }
        set
        {
            Hour = value.Hour.ToString("00");
            Minute = value.Minute.ToString("00");
            Second = value.Second.ToString("00");
        }
    }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    #endregion
}

The problem is that when I first display the page, even though I am setting a valid Time on my ViewModel, the Combos are not automatically selecting the hour, minute and second as I would expect. They are just displaying no value and when I drop them down, no item is selected. I have tried making the ObservableCollections int based instead, but with the same result. What am I missing here?

Upvotes: 0

Views: 459

Answers (2)

Muhammad Hassan
Muhammad Hassan

Reputation: 1047

Problem here is you're setting SelectedItem first before setting ItemsSource. You might think it doesn't matter but unfortunately, it does. Here it is explained why.

Change your code to:

<StackPanel Orientation="Horizontal"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
    <ComboBox ItemsSource="{Binding HourList}"
              SelectedItem="{Binding Hour, Mode=TwoWay}"></ComboBox>
    <ComboBox ItemsSource="{Binding MinuteList}"
              SelectedItem="{Binding Minute, Mode=TwoWay}"></ComboBox>
    <ComboBox ItemsSource="{Binding SecondList}"
              SelectedItem="{Binding Second, Mode=TwoWay}"></ComboBox>
</StackPanel>

Upvotes: 2

matthew_b
matthew_b

Reputation: 759

Try setting Time after initializing the ObservableCollections. I think it's because there's nothing in the ComboBoxes when Time is set.

Upvotes: 0

Related Questions