WPF学习——创建一个基于mvvm模式的简单小示例

一个简单的界面,从数据库获取学生信息,呈现在表格中;点击搜索按钮查询姓名包含搜索条件的学生信息,点击重置按钮重新载入所有学生信息。

效果图如下图所示。

WPF学习——创建一个基于mvvm模式的简单小示例                WPF学习——创建一个基于mvvm模式的简单小示例

1、创建wpf项目,并添加prism框架的引用。

WPF学习——创建一个基于mvvm模式的简单小示例

2、创建Models文件夹,并添加Student类

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

3、创建Db文件夹,并添加localDb类。这里要引用Models和SQLClient名称空间。

class localDb
    {
        public localDb()
        {
            
        }

        public List<Student> GetStudents()
        {
            List<Student> students = new List<Student>();
            string connString = Properties.Settings.Default.StudentDatabase;
            string sql = "SELECT [pid],[name],[age],[sex] FROM [test].[dbo].[Student]";
            using (SqlConnection conn=new SqlConnection(connString))
            {
                conn.Open();
                SqlCommand cmd = new SqlCommand(sql,conn);
                SqlDataReader sdr = cmd.ExecuteReader();
                while (sdr.Read())
                {
                    Student stu = new Student() { Id = (int)sdr["pid"],
                                                  Name=(string)sdr["name"], 
                                                  Age=(int)sdr["age"],
                                                  Sex=(string)sdr["sex"]  };
                    students.Add(stu);
                }
                return students;
            }
        }

        public List<Student> GetStudentsByName(string name)
        {
            localDb db = new localDb();
            List<Student> students = db.GetStudents();
            IEnumerable<Student> Matches =from s in students
                                      where s.Name.Contains(name)
                                      select s;
            return Matches.ToList();
            }
        }

WPF学习——创建一个基于mvvm模式的简单小示例

这是我的数据库连接字符串,放在Property.Setting.Defalut.StudentDatabase属性中。

主要有两个方法,对数据库进行搜索,搜索全部学生信息,根据学生姓名包含字符串进行模糊搜索。数据库内容如下表所示。WPF学习——创建一个基于mvvm模式的简单小示例

4、创建ViewModels文件夹,并添加MainWindowViewModel类。

class MainWindowViewModel:BindableBase
    {
        public MainWindowViewModel()
        {
            localDb = new localDb();
            StudentInfoList = localDb.GetStudents();
            SelectCommand = new DelegateCommand(Select);
            ResetCommand = new DelegateCommand(Reset);
        }

        localDb localDb;
        private string search;

        public string Search
        {
            get { return search; }
            set
            {
                search = value;
                RaisePropertyChanged("Search");
            }
        }
        
        

        private List<Student> studentInfoList;

        public List<Student> StudentInfoList
        {
            get { return studentInfoList; }
            set
            {
                studentInfoList = value;
                RaisePropertyChanged("StudentInfoList");
            }
        }

        public DelegateCommand SelectCommand { get; set; }
        public DelegateCommand  ResetCommand{ get; set; }

        public void Select()
        {
          
            StudentInfoList = localDb.GetStudentsByName(search);
        }

        public void Reset()
        {
           
            StudentInfoList = localDb.GetStudents();
            Search = string.Empty;
        }


    }

引用Prism.Mvvm,Prism.Commands以及Db,Models名称空间。

Search用于Binding主界面搜索条件文本框中的字符串内容;

StudentInfoList用于接受学生信息,Binding主页面DataGird表格的ItemsSource。

两个命令用于Binding搜索和重置两个按钮的Command。

5、MainWindow.xaml.cs中添加代码,将主界面Window的DataContext与MainWindowViewModel实例绑定。

 public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MainWindowViewModel();
        }

 

6、打开MainWindow.xaml,对界面进行布局,并将控件相应的属性与MainWindowViewModel中的属性绑定。

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="搜索条件:" Margin="5,5,0,5"/>
            <TextBox Width="100" Margin="5,5,0,5" Text="{Binding Search}"/>
            <Button Content="搜索" Width="100" Margin="5,5,0,5" Command="{Binding SelectCommand}"/>
            <Button Content="重置" Width="100" Margin="5"  Command="{Binding ResetCommand}"/>
        </StackPanel>
        <DataGrid Grid.Row="1" ColumnWidth="*" AutoGenerateColumns="False" CanUserAddRows="False"
                  ItemsSource="{Binding StudentInfoList}">
            <DataGrid.Columns>
                <DataGridTextColumn Header="序号" Binding="{Binding Id}"/>
                <DataGridTextColumn Header="姓名" Binding="{Binding Name}"/>
                <DataGridTextColumn Header="年龄" Binding="{Binding Age}"/>
                <DataGridTextColumn Header="性别" Binding="{Binding Sex}"/>
            </DataGrid.Columns>
        </DataGrid>
     </Grid>

这样就大功告成了。

上一篇:WPF 元素代理解决MVVM模式下DataGridColumn绑定无效问题


下一篇:WPF中MVVM设计模式的应用