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

运行后的结果是
image

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

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

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

image
image
PS:此外Combobox还能绑定枚举类型,更加的简便,可以看我的博客
https://www.cnblogs.com/guchen33/p/17633219.html
如果碰到生涩的知识点,欢迎留言,我们共同学习

posted @ 2023-08-15 11:59  孤沉  阅读(783)  评论(0编辑  收藏  举报