使用MVVM在组合框中设置默认值

Question

I'm trying to set a default value into a combo box when the application is first loading using the MVVM pattern and it looks like this is all the time unset, combo box being all the time empty when the page loads.

This is my xaml:

    <ComboBox Grid.Row="0" Margin="10,0,0,0" Grid.Column="1" 
              SelectedItem="{Binding Path=JuiceOperations.SelectedItemOption, Mode=TwoWay}"
              SelectedIndex="{Binding Path=JuiceOperations.SelectedComboBoxOptionIndex, Mode=TwoWay}"
              SelectedValue="{Binding Path=JuiceOperations.SelectedComboBoxOptionIndex, Mode=TwoWay}"
              ItemsSource="{Binding Path=JuiceOperations.JuiceOptions}" />

This is the view model code, with its default constructor:

    public JuiceViewModel()
    {
        juiceOperations.SelectedComboBoxOptionIndex = 0;
        juiceOperations.SelectedItemOption = "Cola";
    }

where I am trying to set the default value of the combo box.

And this is how the properties looks like:

private List<string> juiceOptions = new List<string> { "Cola", "Sprite", "Fanta", "Pepsi" };

    private string selectedItemOption = string.Empty;

    private int selectedComboBoxOptionIndex = 0;

    public int SelectedComboBoxOptionIndex
    {
        get
        {
            return this.selectedComboBoxOptionIndex;
        }

        set
        {
            this.selectedComboBoxOptionIndex = value;
            this.OnPropertyChanged("SelectedComboBoxOptionIndex");
        }
    }

    public List<string> JuiceOptions
    {
        get
        {
            return this.juiceOptions;
        }

        set
        {
            this.juiceOptions = value;
        }
    }

    public string SelectedItemOption
    {
        get
        {
            return this.selectedItemOption;
        }

        set
        {
            this.selectedItemOption = value;
            this.OnPropertyChanged("SelectedItemOption");
        }
    }

When selecting an item from combo box the selection is updated into the model and also into the view, so it is working as expected but when the page is first loaded even if the "SelectedComboBoxOptionIndex" and "SelectedItemOption" are being called and their value updated the view of the page is not updated and the empty string is being shown into the combo box where I was expected to see the "Cola" value, instead of the empty string.

Can someone explain me what I am doing wrong and how should I set the default "Cola" value into the combo box ?

Answer 1

Only bind the SelectedItem property of the ComboBox to the SelectedItemOption source property and set the latter to the string "Cola" in the view model. This should work:

<ComboBox Grid.Row="0" Margin="10,0,0,0" Grid.Column="1" 
          SelectedItem="{Binding Path=JuiceOperations.SelectedItemOption}"
          ItemsSource="{Binding Path=JuiceOperations.JuiceOptions}" />

---

public JuiceViewModel()
{
    juiceOperations.SelectedItemOption = "Cola";
}

Don't mix SelectedItem , SelectedIndex and SelectedValue . You only need one.

Answer 2

The value of juiceOperations.SelectedItemOption , that is, "Cola" , is not the same "Cola" stored in the ItemsSource . You would need to do something like juiceOperations.SelectedItemOption = juiceOperations.JuiceOptions.First() .

Answer 3

mm8 above absolutely right, that should fix your issue.

On a side note, what you have there will work for a static selection list, but consider using an ObservableCollection<string> instead of a List<string> . The former implements INotifyCollectionChanged, which allows the view to be notified if there has been a change in the collection. When you bind an Observable Collection to the view, the view automatically subscribes to the CollectionChanged event. You will need this if you ever need to add or remove options at run time. Side note, OnCollectionChanged will not fire if you simply modify an item, for that you would still need to call OnPropertyChanged("JuiceOptions") in the setter.

something like this (with the appropriate private backing field):

public ObservableCollection<string> JuiceOptions
{
    get
    {
        return this.juiceOptions;
    }

    set
    {
        this.juiceOptions = value;
        this.OnPropertyChanged("JuiceOptions");
    }
}