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         },     }; } 

运行后的结果是
Combobox后台绑定

现在我们继续改造,我们在前台加入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);  } 

Combobox后台绑定
既然 SelectedValuePath是选中的值,我们将前台代码修改为SelectedValuePath="Age" />
再试一下
Combobox后台绑定

接下来,我们在扩展一下,这个主要是用在程序中换皮肤的操作
你想想,很多优秀的程序都有深色、浅色、自定义颜色吧,我这里只是用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   },    

Combobox后台绑定
Combobox后台绑定

发表评论

评论已关闭。

相关文章