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

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

如图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代码：

<Window x:Class="Simple.Calculator.WinForm.UserInfo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:conv="clr-namespace:Simple.Calculator.WinForm.Converter"
        Title="用户信息" Height="130" Width="200">
    <Window.Resources>
        <!--引用Converter-->
        <conv:RadioBtnSexConverter x:Key="RadioBtnSexConverter"/>
    </Window.Resources>
    
    <Grid Margin="5">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.Column="0"  Content="姓名：" />
        <TextBox Grid.Row="0" Grid.Column="1"  Text="{Binding UserInfo.Name,Mode=TwoWay}" />

        <Label Grid.Row="1" Grid.Column="0"  Content="性别：" />
        <StackPanel Grid.Row="1" Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center" >
            <RadioButton GroupName="rbSex"  Content="男" IsChecked="{Binding UserInfo.Sex, Mode=TwoWay, Converter={StaticResource RadioBtnSexConverter}, ConverterParameter=男}" Margin="5" />
            <RadioButton GroupName="rbSex"  Content="女" IsChecked="{Binding UserInfo.Sex, Mode=TwoWay, Converter={StaticResource RadioBtnSexConverter}, ConverterParameter=女}" Margin="5" />
        </StackPanel>

        <Label Grid.Row="5" Grid.Column="0"  Content="部门：" />
        <ComboBox Grid.Row="5" Grid.Column="1" ItemsSource="{Binding ValueKeyList, Mode=TwoWay}" SelectedValuePath="Value" DisplayMemberPath="Key"  SelectedValue="{Binding UserInfo.Department,Mode=TwoWay}"></ComboBox>
    </Grid>
</Window>
           

后台代码：

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