WPF ComboBox

本文主要探讨ComboBox的数据源设置、选中数据的绑定（SelectedItem和SelectedValue用法）的问题

绑定数据源 & 设置显示路径

<ComboBox ItemsSource="{Binding Fruits}" DisplayMemberPath="Name" ></ComboBox>

ComboBox单项的数据结构为FruitViewModel

public class FruitViewModel: INotifyPropertyChanged
{
    private long id;
    public long Id
    {
        get { return id; }
        set
        {
            if (id != value)
            {
                id = value;
                NotifyPropertyChanged(nameof(Id));
            }
        }
    }

    private string name;

    public string Name
    {
        get { return name; }
        set
        {
            if (name != value)
            {
                name = value;
                NotifyPropertyChanged(nameof(Name));
            }
        }
    }

    #region INotifyPropertyChanged Members

    /// <summary>
    /// Need to implement this interface in order to get data binding
    /// to work properly.
    /// </summary>
    /// <param name="propertyName"></param>
    private void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    #endregion
}

vm如下

public class UseComboBoxViewModel
{
    public ObservableCollection<FruitViewModel> Fruits { get; set; }
    public FruitViewModel SelectFruit { get; set; }
    public FruitViewModel SelectValueFruit { get; set; }
    public string SelectValueFruitName { get; set; }
}

后端设置数据源

UseComboBoxViewModel vm { get; set; }

vm = new UseComboBoxViewModel() { Fruits = new ObservableCollection<FruitViewModel>() };
vm.Fruits.Add(new FruitViewModel() { Id = 1, Name = "Apple" });
vm.Fruits.Add(new FruitViewModel() { Id = 2, Name = "Pear" });
vm.Fruits.Add(new FruitViewModel() { Id = 3, Name = "Banana" });
DataContext = vm;

绑定SelectedItem获得选中项

将SelectedItem与数据源的SelectFruit双向绑定

<ComboBox Name="comboBox" SelectedItem="{Binding SelectFruit,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></ComboBox>

查看绑定情况，comboBox的SelectedItem和SelectFruit一致

<Label Content="SelectedItem Bind Data:"></Label>
<Label Content="{Binding SelectFruit,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></Label>
<Label Content="SelectedItem Bind Data(.Name):"></Label>
<Label Content="{Binding SelectFruit.Name,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></Label>
<Label Content="Select Item:"></Label>
<Label Content="{Binding ElementName=comboBox,Path=SelectedItem,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></Label>
<Label Content="Select Item(.Name):"></Label>
<Label Content="{Binding ElementName=comboBox,Path=SelectedItem.Name,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></Label>

SelectedValue和SelectedValuePath

1.在不设置SelectedValuePath时，SelectedValue和SelectedItem等效

<ComboBox Name="comboBox" SelectedValue="{Binding SelectValueFruit,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></ComboBox>

查看绑定情况，此时SelectedValue绑定对象是SelectValueFruit(FruitViewModel类)

<Label Content="SelectedValue Bind Data:"></Label>
<Label Content="{Binding SelectValueFruit,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></Label>
<Label Content="SelectedValue Bind Data(.Name):"></Label>
<Label Content="{Binding SelectValueFruit.Name,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></Label>
<Label Content="Select Value:"></Label>
<Label Content="{Binding ElementName=comboBox,Path=SelectedValue, Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></Label>
<Label Content="Select Value(.Name):"></Label>
<Label Content="{Binding ElementName=comboBox,Path=SelectedValue.Name, Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></Label>

2.设置SelectedValuePath，则SelectedValue根据路径绑定对象

<ComboBox Name="comboBox" SelectedValuePath="Name" SelectedValue="{Binding SelectValueFruitName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></ComboBox>

查看绑定情况，此时SelectedValue绑定对象是SelectValueFruitName（Name字符串）

<Label Content="SelectedValue Bind Data:"></Label>
<Label Content="{Binding SelectValueFruitName,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></Label>
<Label Content="Select Value:"></Label>
<Label Content="{Binding ElementName=comboBox,Path=SelectedValue, Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></Label>

示例代码

UseComboBox

参考资料

Step by Step WPF Data Binding with Comboboxes
WPF之SelectedValue与SelectedValuePath
ComboBox.SelectedItem 属性
ListControl.SelectedValue 属性