MVVM下RadioButton单选钮和ComboBox下拉框的使用

偏执的太偏执、 2021-09-10 22:36 444阅读 0赞

MVVM下RadioButton单选钮和ComboBox下拉框的使用，实例将实现用户信息的绑定，如图1。

![Center][]

如图1

实例要求：

（1）RadioButton单选钮动态绑定用户信息；

（2）ComboBox下拉框动态初始化下拉内容；

（3）ComboBox下拉框动态绑定用户信息；

**1、创建实体类**

在实体层中创建用户信息实体类（UserModel.cs）。

/// <summary>
    /// 用户信息实体类
    /// </summary>
    public class UserModel : INotifyPropertyChanged
    {
        private string _name;
        /// <summary>
        /// 姓名
        /// </summary>
        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
                this.NotifyPropertyChanged("Name");
            }
        }
    
        private string _sex;
        /// <summary>
        /// 性别
        /// </summary>
        public string Sex
        {
            get { return _sex; }
            set
            {
                _sex = value;
                this.NotifyPropertyChanged("Sex");
            }
        }
    
        private string _department;
        /// <summary>
        /// 部门
        /// </summary>
        public string Department
        {
            get { return _department; }
            set
            {
                _department = value;
                this.NotifyPropertyChanged("Department");
            }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }  
    }

在实体层中创建Common目录，并创建选择项类（ValueKeyItem.cs）。

/// <summary>
    /// 选择项类
    /// </summary>
    public class ValueKeyItem : INotifyPropertyChanged
    {
        private string _key;
        /// <summary>
        /// 键
        /// </summary>
        public string Key
        {
            get { return _key; }
            set
            {
                _key = value;
                this.NotifyPropertyChanged("Key");
            }
        }
    
        private string _value;
        /// <summary>
        /// 值
        /// </summary>
        public string Value
        {
            get { return _value; }
            set
            {
                _value = value;
                this.NotifyPropertyChanged("Value");
            }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

**2、创建ViewModel类**

在ViewModel层中创建用户信息ViewModel类（UserInfoViewModel.cs）。

/// <summary>
    /// 用户信息ViewModel类
    /// </summary>
    public class UserInfoViewModel : INotifyPropertyChanged
    {
        public UserModel _userInfo = new UserModel();
        /// <summary>
        /// 用户信息
        /// </summary>
        public UserModel UserInfo
        {
            get
            {
                return this._userInfo;
            }
            set
            {
                this._userInfo = value;
                this.RaisePropertyChanged("UserInfo");
            }
        }
    
        public List<ValueKeyItem> _valueKeyList = new List<ValueKeyItem>();
        /// <summary>
        /// 类型下拉框项
        /// </summary>
        public List<ValueKeyItem> ValueKeyList
        {
            get
            {
                return this._valueKeyList;
            }
            set
            {
                this._valueKeyList = value;
                this.RaisePropertyChanged("ValueKeyList");
            }
        }
    
        /// <summary>
        /// 初始化
        /// </summary>
        public UserInfoViewModel()
        {
            //初始化类型下拉框项
            InitValueKeyList();
    
            //初始化用户信息
            UserInfo.Name = "李红";
            UserInfo.Sex = "女";
            UserInfo.Department = "人事部";
        }
    
        /// <summary>
        /// 初始化类型下拉框项
        /// </summary>
        private void InitValueKeyList()
        {
            ValueKeyList = new List<ValueKeyItem>()
            {
                new ValueKeyItem(){Key="研发部",Value="研发部"},
                new ValueKeyItem(){Key="人事部",Value="人事部"},
                new ValueKeyItem(){Key="财务部",Value="财务部"}
            };
        }
    
    
        //属性改变事件
        public event PropertyChangedEventHandler PropertyChanged;
    
        //当属性改变的时候，调用该方法来发起一个消息，通知View中绑定了propertyName的元素做出调整
        public void RaisePropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

**3、创建页面**

3.1 在表现层中创建Converter目录，并创建性别单选钮的转换类（RadioBtnSexConverter.cs）。

RadioBtnSexConverter.cs类用于将性别属性的值转换成RadioButton单选钮所需要绑定的值。

/// <summary>
    /// 性别单选钮的转换类
    /// </summary>
    public class RadioBtnSexConverter : IValueConverter
    {
    
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            bool reuslt = false;
            if (value == null || parameter == null)
            {
                return reuslt;
            }
    
            if (value.ToString() == parameter.ToString())
            {
                reuslt = true;
            }
            else
            {
                reuslt = false;
            }
            return reuslt;
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value == null || parameter == null)
            {
                return null;
            }
    
            bool usevalue = (bool)value;
            if (usevalue)
            {
                return parameter.ToString();
            }
            else
            {
                return null;
            }
        }
    }

3.2 在表现层创建用户信息页面（UserInfo.xaml）。

前台XAML代码：

后台代码：

/// <summary>
    /// UserInfo.xaml 的交互逻辑
    /// </summary>
    public partial class UserInfo : Window
    {
        public UserInfo()
        {
            InitializeComponent();
            this.DataContext = new UserInfoViewModel();
        }
    }

[Center]: /images/20210724/87c756fd656446ee9ce279d087d6a9e8.png