WPF控件-ComboBox

配置数据源

  • 设置它的ComboBoxItem

    添加用户控件ComboBoxUserControlComboBoxUserControl.xaml里面:

    
        
            张三
        
        
            李四
        
        
            王五
        
    
    
  • ItemsSource设置数据源,DisplayMemberPath设置显示的属性

    首先新建一个类Student.cs,作为数据源:

    
    
    

    ComboBoxUserControl.xaml.cs中,设置数据源:

    namespace WpfLearningDemo
    {
        /// 
        /// ComboBoxUserControl.xaml 的交互逻辑
        /// 
        public partial class ComboBoxUserControl : UserControl
        {
            public List StudentList { get; set; }
    
            public ComboBoxUserControl()
            {
                InitializeComponent();
                this.StudentList = Student.GetStudents();  //数据源
                this.DataContext = this;  //数据上下文
            }
    
            private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                var cb = (ComboBox)sender;
                var selectedItem = cb.SelectedItem;
                var selectedValue = cb.SelectedValue;
                MessageBox.Show(string.Format("selectedItem={0} selectedValue={1}", selectedItem, selectedValue));
            }
        }
    }
    

    ComboBoxUserControl.xaml中绑定数据源:

    
        
            学生列表:
            
            
          
    
    

    此时只绑定了数据源,没有设置DisplayMemberPath,显示效果:

    然后设置一下DisplayMemberPath

    
        
            学生列表:
            
            
          
    
    

    显示效果:

    最后设置一下SelectedValuePath属性:

    
        
            学生列表:
            
            
          
    
    

    修改ComboBox_SelectionChanged方法:

    private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var cb = (ComboBox)sender;
        var selectedItem = cb.SelectedItem as Student;  //选中项就是Student对象
        var selectedValue = cb.SelectedValue;  //设置SelectedValuePath="Name"后,SelectedValue的值就是Name的值
        MessageBox.Show(string.Format("selectedItem={0} selectedValue={1}", selectedItem.Name, selectedValue));
    }
    

    选中某项后的提示框显示: