Combobox后台绑定

本文主要介绍WPF中Combobox的后台绑定，我在这里主要讲解数据驱动

1、对于前台绑定，我们首先写出想要绑定的对象

新建一个Models文件夹，将Student类写入

 public class Student
 {
     public int Id { get; set; }
     public string Name { get; set; }
     public int Age { get; set; }

 }

2、接下来，我们在前台绑定它

<ComboBox
    Width="200"
    Height="30"
    Margin="10"
    ItemsSource="{Binding Students}" />

3、我们需要用到List或者ObservableCollection将Student封装进去

那么后台代码写

public ObservableCollection<Student> Students { get; set; }
public MainWindowViewModel()
{
    Students = new ObservableCollection<Student>()
    {
        new Student()
        {
            Id = 1,
            Name="张三",
            Age=12
        },
         new Student()
        {
            Id = 2,
            Name="李四",
            Age=12
        },
          new Student()
        {
            Id = 3,
            Name="王五",
            Age=12
        },
    };
}

运行后的结果是

现在我们继续改造，我们在前台加入DisplayMemberPath="Name"看看效果

 <ComboBox
     Width="200"
     Height="30"
     Margin="10"
     DisplayMemberPath="Name"
     ItemsSource="{Binding Students}" />

发现，下拉列表变成了Student中的Name

接下来我们继续修改前台代码，加上一个Button

 <StackPanel>
     <!--
         DisplayMemberPath设置下拉框选则的是List的哪一位
         SelectedValue 是鼠标选中的值  传递的地址是SelectedValuePath
     -->
     <ComboBox
         Name="comboBox1"
         Width="200"
         Height="30"
         Margin="10"
         DisplayMemberPath="Name"
         ItemsSource="{Binding Students}"
         SelectedValue="{Binding SelectStudentName}"
         SelectedValuePath="Name" />
     <Button
         Width="200"
         Height="30"
         Command="{Binding OpenCmd}" />
 </StackPanel>

后台加上命令代码

 private string _name;

 public string SelectStudentName
 {
     get { return _name; }
     set { SetProperty<string>(ref _name, value); }
 }

 private DelegateCommand _fieldName;
 public DelegateCommand OpenCmd =>
     _fieldName ?? (_fieldName = new DelegateCommand(ExecuteCommandName));

 void ExecuteCommandName()
 {
     MessageBox.Show(SelectStudentName);
 }

既然 SelectedValuePath是选中的值，我们将前台代码修改为SelectedValuePath="Age" />

再试一下

接下来，我们在扩展一下，这个主要是用在程序中换皮肤的操作

你想想，很多优秀的程序都有深色、浅色、自定义颜色吧，我这里只是用ComBoBox提供一个思路

代码简洁，实现简单的换肤效果

首先，由于我们暂时只有一个MainWindow，那么资源字典就很好写了

新建一个资源字典，位置随意存放，我直接放在根目录下，你们项目小的话，可以写一个Styles文件夹，专门存放资源字典，项目大的话，写一个Theme类库，存放也行，我这里在根目录简单写一下。

 <Style TargetType="{x:Type local:MainWindow}">
     <Setter Property="Background" Value="{Binding Path=SelectedSkinColor.Color}"/>
 </Style>

在App.xaml引入资源字典

<Application.Resources>
    <ResourceDictionary Source="/SkinColorsStyle.xaml" />
</Application.Resources>

我懒得去重新写对象了，这个皮肤直接放在刚才写的Student了。

你们不要这要写，最好还是重新起一个Skin类

 public class Student
 {
     public int Id { get; set; }
     public string Name { get; set; }
     public int Age { get; set; }
     public Brush Color { get; set; }
 }

接下来就是改造代码。

前台

<ComboBox
    x:Name="comboBox"
    Width="200"
    Height="30"
    Margin="10"
    DisplayMemberPath="Name"
    ItemsSource="{Binding Students}"
    SelectedItem="{Binding Path=SelectedSkinColor}"
    SelectedValuePath="Color" />

后台

 private Student _selectedSkinColor = new Student { Color = Brushes.AliceBlue };
 public Student SelectedSkinColor
 {
     get { return _selectedSkinColor; }
     set
     {
         if (_selectedSkinColor != value)
         {
             _selectedSkinColor = value;
             RaisePropertyChanged();
         }
     }
 }
 //不要忘记刚才实例化的，加上一个字段Color
 //看，我是写在Student中的，你们可以重新写Skin类
   new Student()
  {
      Id = 1,
      Name="张三",
      Age=12,
      Color = Brushes.Blue
  },