最近通过WPF开发项目，为了对WPF知识点进行总结，所以利用业余时间，开发一个学生信息管理系统【Student Information Management System】。前三篇文章进行了框架搭建和模块划分，后台WebApi接口编写，以及课程管理模块开发，本文在前三篇基础之上，继续深入开发学生信息管理系统的班级管理和学生管理模块，通过本篇文章，将继续巩固之前的知识点，本文仅供学习分享使用，如有不足之处，还请指正。.
注意：本系列尚未开发完成，需要源码的兄弟请耐心等待，谢谢。
涉及知识点
由于班级管理和学生管理的服务端开发，在第二篇文章中以后介绍，所以本篇专注介绍客户端功能的开发。涉及知识点如下：
-
WPF开发中TextBlock，TextBox，DataGrid，Combox等控件的基础使用以及数据绑定等操作。
-
MAH样式的使用，在本示例中MAH主要用于统一页面风格，提高用户体验。
-
HttpClient使用，主要用于访问服务端提供的接口。
业务逻辑
首先班级管理和学生管理既有关联，又相互独立，不像课程管理模块独立存在，不与其他模块存在依赖。所以两个模块一起放在一篇文章进行讲解。关系如下：
-
学生属于某一班级之学生，所以学生中包含班级信息。
-
班级中存在班长，班长又属于学生的一个实体。
班级管理模块
1. 接口访问类ClassesHttpUtil
班级数据表结构和服务接口，在第二篇文章中已有介绍，如有疑问，可前往参考。接口访问类用于封装访问服务端提供的接口。如下所示：
namespace SIMS.Utils.Http{public class ClassesHttpUtil:HttpUtil{/// <summary>/// 通过id查询学生信息/// </summary>/// <param name="id"></param>/// <returns></returns>public static ClassesEntity GetClasses(int id){Dictionary<string, object> data = new Dictionary<string, object>();data["id"] = id;var str = Get(UrlConfig.CLASSES_GETCLASSES, data);var classes = StrToObject<ClassesEntity>(str);return classes;}public static PagedRequest<ClassesEntity> GetClassess(string? dept, string? grade, int pageNum, int pageSize){Dictionary<string, object> data = new Dictionary<string, object>();data["dept"] = dept;data["grade"] = grade;data["pageNum"] = pageNum;data["pageSize"] = pageSize;var str = Get(UrlConfig.CLASSES_GETCLASSESS, data);var classess = StrToObject<PagedRequest<ClassesEntity>>(str);return classess;}public static bool AddClasses(ClassesEntity classes) {var ret = Post<ClassesEntity>(UrlConfig.CLASSES_ADDCLASSES, classes);return int.Parse(ret)==0;}public static bool UpdateClasses(ClassesEntity classes) {var ret = Put<ClassesEntity>(UrlConfig.CLASSES_UPDATECLASSES, classes);return int.Parse(ret) == 0;}public static bool DeleteClasses(int Id){Dictionary<string, string> data = new Dictionary<string, string>();data["Id"] = Id.ToString();var ret = Delete(UrlConfig.CLASSES_DELETECLASSES, data);return int.Parse(ret) == 0;}}}
2. 客户端页面视图
班级管理的客户端页面视图共两个，一个查询列表页面，一个新增编辑页面，共同组成了班级管理的增删改查。
查询班级列表页面，涉及知识点如下所示：
-
查询条件或者列表中数据列展示，通过数据绑定Binding的方式与ViewModel进行交互，即点击查询按钮，不再传递参数，因为ViewModel中的属性已经同步更新。
-
ViewModel中并非所有属性都可实现双向绑定，必须是实现具有通知功能的属性才可以。在Prism框架中，通过BindableBase的SetProperty方法可以快速实现。
-
View视图中如果控件存在Command命令，则可以直接绑定，如果不存在，则可以i:Interaction.Triggers将事件转换为命令，如Load事件等。
-
在列表中，如果需要添加按钮，可以通过DataTemplate进行数据定制。
查询班级页面代码，如下所示：
<UserControl x:Class="SIMS.ClassesModule.Views.Classes"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:local="clr-namespace:SIMS.ClassesModule.Views"xmlns:prism="http://prismlibrary.com/"xmlns:i="http://schemas.microsoft.com/xaml/behaviors"xmlns:mahApps="http://metro.mahapps.com/winfx/xaml/controls"xmlns:ctrls ="clr-namespace:SIMS.Utils.Controls;assembly=SIMS.Utils"prism:ViewModelLocator.AutoWireViewModel="True"mc:Ignorable="d"d:DesignHeight="450" d:DesignWidth="800"><UserControl.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /><ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" /><ResourceDictionary><Style x:Key="LinkButton" TargetType="Button"><Setter Property="Background" Value="White"></Setter><Setter Property="Cursor" Value="Hand"></Setter><Setter Property="Margin" Value="3"></Setter><Setter Property="MinWidth" Value="80"></Setter><Setter Property="MinHeight" Value="25"></Setter><Setter Property="BorderThickness" Value="0 0 0 0"></Setter></Style></ResourceDictionary></ResourceDictionary.MergedDictionaries></ResourceDictionary></UserControl.Resources><i:Interaction.Triggers><i:EventTrigger EventName="Loaded"><i:InvokeCommandAction Command="{Binding LoadedCommand}"></i:InvokeCommandAction></i:EventTrigger></i:Interaction.Triggers><Grid><Grid.RowDefinitions><RowDefinition Height="Auto"></RowDefinition><RowDefinition Height="Auto"></RowDefinition><RowDefinition Height="*"></RowDefinition><RowDefinition Height="Auto"></RowDefinition></Grid.RowDefinitions><TextBlock Text="班级信息" FontSize="20" Background="AliceBlue" Margin="2"></TextBlock><StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center"><TextBlock Text="专业" VerticalAlignment="Center" Margin="2"></TextBlock><TextBox Margin="4" MinWidth="120" Height="30"Text="{Binding Dept}"HorizontalContentAlignment="Stretch"mahApps:TextBoxHelper.ClearTextButton="True"mahApps:TextBoxHelper.Watermark="专业"mahApps:TextBoxHelper.WatermarkAlignment="Left"SpellCheck.IsEnabled="True" /><TextBlock Text="年级" VerticalAlignment="Center" Margin="2"></TextBlock><TextBox Margin="4" MinWidth="120" Height="30"Text="{Binding Grade}"HorizontalContentAlignment="Stretch"mahApps:TextBoxHelper.ClearTextButton="True"mahApps:TextBoxHelper.Watermark="年级"mahApps:TextBoxHelper.WatermarkAlignment="Left"SpellCheck.IsEnabled="True" /><Button Content="查询" Style="{DynamicResource MahApps.Styles.Button.Square.Accent}" Width="120" Height="30" Margin="3" Command="{Binding QueryCommand}"></Button><Button Content="新增" Style="{DynamicResource MahApps.Styles.Button.Square.Accent}" Width="120" Height="30" Margin="3" Command="{Binding AddCommand}"></Button></StackPanel><DataGrid x:Name="dgClasses"Grid.Row="2"Grid.Column="0"Margin="2"AutoGenerateColumns="False"CanUserAddRows="False"CanUserDeleteRows="False"ItemsSource="{Binding Classes}"RowHeaderWidth="0"><DataGrid.Columns><DataGridTextColumn Binding="{Binding Dept}" Header="专业" Width="*" /><DataGridTextColumn Binding="{Binding Grade}" Header="年级" Width="*"/><DataGridTextColumn Binding="{Binding Name}" Header="班级" Width="*"/><DataGridTextColumn Binding="{Binding HeadTeacher}" Header="班主任" Width="*"/><DataGridTextColumn Binding="{Binding MonitorName}" Header="班长" Width="*" /><DataGridTemplateColumn Header="操作" Width="*"><DataGridTemplateColumn.CellTemplate><DataTemplate><StackPanel Orientation="Horizontal"><Button Content="Edit" Style="{StaticResource LinkButton}" Command="{Binding RelativeSource={RelativeSource AncestorType=DataGrid, Mode=FindAncestor}, Path=DataContext.EditCommand}" CommandParameter="{Binding Id}"><Button.Template><ControlTemplate TargetType="Button"><TextBlock TextDecorations="Underline" HorizontalAlignment="Center"><ContentPresenter /></TextBlock></ControlTemplate></Button.Template></Button><Button Content="Delete" Style="{StaticResource LinkButton}" Command="{Binding RelativeSource={RelativeSource AncestorType=DataGrid, Mode=FindAncestor}, Path=DataContext.DeleteCommand}" CommandParameter="{Binding Id}"><Button.Template><ControlTemplate TargetType="Button"><TextBlock TextDecorations="Underline" HorizontalAlignment="Center"><ContentPresenter /></TextBlock></ControlTemplate></Button.Template></Button></StackPanel></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn></DataGrid.Columns></DataGrid><ctrls:PageControl Grid.Row="3" DataContext="{Binding}" ></ctrls:PageControl></Grid></UserControl>
新增编辑页面
班级的新增功能和编辑功能，共用一个页面，涉及知识点如下所示：
-
在新增编辑的ViewModel中，班级实体是一个属性，所以在视图控件中进行数据绑定时，需要带上属性名，如：Classes.Name 。
-
班长列表在新增班级时尚无对应学生，可为空，待维护学生后，可通过学生列表进行选择即可。
-
班长列表为Combox下拉框，绑定的是学生实体列表，但客户端只需看到学生姓名即可，所以需要重写DataTemplate，只显示学生姓名。
新增班级信息视图，具体代码如下所示：
<UserControl x:Class="SIMS.ClassesModule.Views.AddEditClasses"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:local="clr-namespace:SIMS.ClassesModule.Views"mc:Ignorable="d"xmlns:i="http://schemas.microsoft.com/xaml/behaviors"xmlns:mahApps ="http://metro.mahapps.com/winfx/xaml/controls"xmlns:prism="http://prismlibrary.com/"d:DesignHeight="400" d:DesignWidth="600"><prism:Dialog.WindowStyle><Style TargetType="Window"><Setter Property="Width" Value="600"></Setter><Setter Property="Height" Value="400"></Setter></Style></prism:Dialog.WindowStyle><UserControl.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /><ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" /></ResourceDictionary.MergedDictionaries></ResourceDictionary></UserControl.Resources><i:Interaction.Triggers><i:EventTrigger EventName="Loaded"><i:InvokeCommandAction Command="{Binding LoadedCommand}"></i:InvokeCommandAction></i:EventTrigger></i:Interaction.Triggers><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="0.2*"></ColumnDefinition><ColumnDefinition Width="Auto"></ColumnDefinition><ColumnDefinition Width="*"></ColumnDefinition><ColumnDefinition Width="0.2*"></ColumnDefinition></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition></RowDefinition><RowDefinition></RowDefinition><RowDefinition></RowDefinition><RowDefinition></RowDefinition><RowDefinition></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><TextBlock Text="专业" Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock><TextBox Grid.Row="0" Grid.Column="2" MinWidth="120" Height="35" VerticalAlignment="Center" Margin="3" Text="{Binding Classes.Dept}"></TextBox><TextBlock Text="年级" Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock><TextBox Grid.Row="1" Grid.Column="2" MinWidth="120" Height="35" VerticalAlignment="Center" Margin="3" Text="{Binding Classes.Grade}"></TextBox><TextBlock Text="班级" Grid.Row="2" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock><TextBox Grid.Row="2" Grid.Column="2" MinWidth="120" Height="35" VerticalAlignment="Center" Margin="3" Text="{Binding Classes.Name}"></TextBox><TextBlock Text="班主任" Grid.Row="3" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock><TextBox Grid.Row="3" Grid.Column="2" MinWidth="120" Height="35" VerticalAlignment="Center" Margin="3" Text="{Binding Classes.HeadTeacher}"></TextBox><TextBlock Text="班长" Grid.Row="4" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock><ComboBox Grid.Row="4" Grid.Column="2" MinWidth="120" Height="35" ItemsSource="{Binding Monitors}" mahApps:TextBoxHelper.ClearTextButton="True" SelectedItem="{Binding Monitor}"><ComboBox.ItemTemplate><DataTemplate><TextBlock Text="{Binding Name}"></TextBlock></DataTemplate></ComboBox.ItemTemplate></ComboBox><StackPanel Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Center" Margin="3"><Button Content="取消" Margin="5" MinWidth="120" Height="35" Style="{DynamicResource MahApps.Styles.Button.Square.Accent}" Command="{Binding CancelCommand}"></Button><Button Content="保存" Margin="5" MinWidth="120" Height="35" Style="{DynamicResource MahApps.Styles.Button.Square.Accent}" Command="{Binding SaveCommand}"></Button></StackPanel><TextBlock Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="2" Text="注意：新增班级时，班长可空，等维护学生后，再设置班长。" Foreground="Red"></TextBlock></Grid></UserControl>
3. 客户端ViewModel
班级管理模块，ViewModel和视图对应，也分为查询列表ViewModel和新增编辑ViewModel，如下所示：
ClassesViewModel页面代码分为三部分：
-
属性和构造函数，主要用于数据绑定，如查询条件，列表等。所有属性set赋值时，均采用SetProperty进行赋值。
-
命令Command，如查询，新增，编辑，删除命令等。所有命令可以定义成DelegateCommand类型。
-
分页部分，因分页功能代码大同小异，所以此处略去。
ClassesViewModel具体代码如下所示：
namespace SIMS.ClassesModule.ViewModels{public class ClassesViewModel :BindableBase{#region 属性及构造函数/// <summary>/// 专业/// </summary>private string dept;public string Dept{get { return dept; }set { SetProperty(ref dept , value); }}/// <summary>/// 年级/// </summary>private string grade;public string Grade{get { return grade; }set { SetProperty(ref grade , value); }}private ObservableCollection<ClassesInfo> classes;public ObservableCollection<ClassesInfo> Classes{get { return classes; }set { SetProperty(ref classes, value); }}private IDialogService dialogService;public ClassesViewModel(IDialogService dialogService){this.dialogService = dialogService;this.pageNum = 1;this.pageSize = 20;}private void InitInfo(){Classes = new ObservableCollection<ClassesInfo>();var pagedRequst = ClassesHttpUtil.GetClassess(this.Dept,this.Grade, this.pageNum, this.pageSize);var entities = pagedRequst.items;Classes.AddRange(entities.Select(r=>new ClassesInfo(r)));//this.TotalCount = pagedRequst.count;this.TotalPage = ((int)Math.Ceiling(this.TotalCount * 1.0 / this.pageSize));}#endregion#region 事件private DelegateCommand loadedCommand;public DelegateCommand LoadedCommand{get{if (loadedCommand == null){loadedCommand = new DelegateCommand(Loaded);}return loadedCommand;}}private void Loaded(){InitInfo();}private DelegateCommand queryCommand;public DelegateCommand QueryCommand{get{if (queryCommand == null){queryCommand = new DelegateCommand(Query);}return queryCommand;}}private void Query() {this.pageNum = 1;this.InitInfo();}/// <summary>/// 新增命令/// </summary>private DelegateCommand addCommand;public DelegateCommand AddCommand{get{if (addCommand == null){addCommand = new DelegateCommand(Add);}return addCommand;}}private void Add(){this.dialogService.ShowDialog("addEditClasses",null, AddEditCallBack, "MetroDialogWindow");}private void AddEditCallBack(IDialogResult dialogResult) {if (dialogResult != null && dialogResult.Result == ButtonResult.OK) {//刷新列表this.pageNum = 1;this.InitInfo();}}/// <summary>/// 编辑命令/// </summary>private DelegateCommand<object> editCommand;public DelegateCommand<object> EditCommand{get{if (editCommand == null){editCommand = new DelegateCommand<object>(Edit);}return editCommand;}}private void Edit(object obj){if (obj == null) {return;}var Id = int.Parse(obj.ToString());var classes = this.Classes.FirstOrDefault(r => r.Id == Id);if (classes == null){MessageBox.Show("无效的班级ID");return;}if (MessageBoxResult.Yes != MessageBox.Show("Are you sure to delete?", "Confirm", MessageBoxButton.YesNo)){return;}IDialogParameters dialogParameters = new DialogParameters();dialogParameters.Add("classes",classes);this.dialogService.ShowDialog("addEditClasses", dialogParameters, AddEditCallBack, "MetroDialogWindow");}/// <summary>/// 编辑命令/// </summary>private DelegateCommand<object> deleteCommand;public DelegateCommand<object> DeleteCommand{get{if (deleteCommand == null){deleteCommand = new DelegateCommand<object>(Delete);}return deleteCommand;}}private void Delete(object obj){if (obj == null){return;}var Id = int.Parse(obj.ToString());var classes = this.Classes.FirstOrDefault(r => r.Id == Id);if (classes == null){MessageBox.Show("无效的班级ID");return;}bool flag = ClassesHttpUtil.DeleteClasses(Id);if (flag) {this.pageNum = 1;this.InitInfo();}}#endregion}}
AddEditClassesViewModel代码同样分为三部分：
-
属性和构造函数，主要用于数据绑定，如页面文本框，下拉选择框等。
-
命令Command，主要用于响应事件，如保存，取消等。
-
对话框接口，因为新增编辑是以弹出框的形式呈现，所以根据Prism框架的 要求，需要实现IDialogAware接口。
AddEditClassesViewModel具体代码如下所示：
namespace SIMS.ClassesModule.ViewModels{public class AddEditClassesViewModel : BindableBase, IDialogAware{#region 属性和构造函数/// <summary>/// 班级实体/// </summary>private ClassesInfo classes;public ClassesInfo Classes{get { return classes; }set { SetProperty(ref classes ,value); }}private List<StudentEntity> monitors;public List<StudentEntity> Monitors{get { return monitors; }set { SetProperty(ref monitors , value); }}private StudentEntity monitor;public StudentEntity Monitor{get { return monitor; }set { SetProperty(ref monitor, value); }}public AddEditClassesViewModel() {}#endregion#region Commandprivate DelegateCommand loadedCommand;public DelegateCommand LoadedCommand{get{if (loadedCommand == null){loadedCommand = new DelegateCommand(Loaded);}return loadedCommand;}}private void Loaded(){this.Monitors= new List<StudentEntity>();if (Classes?.Id>0) {var pagedRequst = StudentHttpUtil.GetStudentsByClasses(Classes.Id);var entities = pagedRequst.items;Monitors.AddRange(entities);//如果有班长，则为班长赋值if (Classes.Monitor > 0) {this.Monitor= this.Monitors?.FirstOrDefault(r=>r.Id==Classes.Monitor);}}}private DelegateCommand cancelCommand;public DelegateCommand CancelCommand{get{if (cancelCommand == null){cancelCommand = new DelegateCommand(Cancel);}return cancelCommand;}}private void Cancel(){RequestClose?.Invoke((new DialogResult(ButtonResult.Cancel)));}private DelegateCommand saveCommand;public DelegateCommand SaveCommand{get{if (saveCommand == null){saveCommand = new DelegateCommand(Save);}return saveCommand;}}private void Save() {if (Classes != null) {Classes.CreateTime = DateTime.Now;Classes.LastEditTime = DateTime.Now;if (Monitor != null) {Classes.Monitor = Monitor.Id;}bool flag=false;if (Classes.Id > 0) {flag = ClassesHttpUtil.UpdateClasses(Classes);}else {flag = ClassesHttpUtil.AddClasses(Classes);}if (flag){RequestClose?.Invoke((new DialogResult(ButtonResult.OK)));}}}#endregion#region 对话框public string Title => "新增或编辑班级信息";public event Action<IDialogResult> RequestClose;public bool CanCloseDialog(){return true;}public void OnDialogClosed(){}public void OnDialogOpened(IDialogParameters parameters){if (parameters != null && parameters.ContainsKey("classes")){this.Classes = parameters.GetValue<ClassesInfo>("classes");}else {this.Classes = new ClassesInfo();}}#endregion}}
4. 示例截图
班级管理示例截图，如下所示：
学生管理模块
1. 接口访问类StudentHttpUtil
学生数据表结构和服务接口，在第二篇文章中已有介绍，如有疑问，可前往参考。接口访问类用于封装访问服务端提供的接口。如下所示：
namespace SIMS.Utils.Http{/// <summary>/// 学生类Http访问通用类/// </summary>public class StudentHttpUtil:HttpUtil{/// <summary>/// 通过id查询学生信息/// </summary>/// <param name="id"></param>/// <returns></returns>public static StudentEntity GetStudent(int id){Dictionary<string, object> data = new Dictionary<string, object>();data["id"] = id;var str = Get(UrlConfig.STUDENT_GETSTUDENT, data);var student = StrToObject<StudentEntity>(str);return student;}public static PagedRequest<StudentEntity> GetStudents(string no,string name, int pageNum, int pageSize) {Dictionary<string, object> data = new Dictionary<string, object>();data["no"] = no;data["name"] = name;data["pageNum"] = pageNum;data["pageSize"] = pageSize;var str = Get(UrlConfig.STUDENT_GETSTUDENTS, data);var students = StrToObject<PagedRequest<StudentEntity>>(str);return students;}public static PagedRequest<StudentEntity> GetStudentsByClasses(int classId){Dictionary<string, object> data = new Dictionary<string, object>();data["classId"] = classId;var str = Get(UrlConfig.STUDENT_GETSTUDENTSBYCLASSES, data);var students = StrToObject<PagedRequest<StudentEntity>>(str);return students;}public static bool AddStudent(StudentEntity student){var ret = Post<StudentEntity>(UrlConfig.STUDENT_ADDSTUDENT, student);return int.Parse(ret) == 0;}public static bool UpdateStudent(StudentEntity student){var ret = Put<StudentEntity>(UrlConfig.STUDENT_UPDATESTUDENT, student);return int.Parse(ret) == 0;}public static bool DeleteStudent(int Id){Dictionary<string, string> data = new Dictionary<string, string>();data["Id"] = Id.ToString();var ret = Delete(UrlConfig.STUDENT_DELETESTUDENT, data);return int.Parse(ret) == 0;}}}
2. 客户端页面视图
学生管理模块的客户端视图页面，也分为两个：学生列表查询，新增编辑学生信息页面。
学生列表查询页面
学生信息列表页面设计知识点，和班级管理差不多，只有一点差异：
-
在数据库中，性别保存的是bit类型，在C#中，数据类型为bool，但是在列表中需要转换成男或女显示，所以需要用到Converter进行转换。
学生信息查询页面，具体代码如下所示：
<UserControl x:Class="SIMS.StudentModule.Views.Student"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:local="clr-namespace:SIMS.StudentModule.Views"xmlns:i="http://schemas.microsoft.com/xaml/behaviors"xmlns:mahApps ="http://metro.mahapps.com/winfx/xaml/controls"xmlns:prism="http://prismlibrary.com/"xmlns:ctrls ="clr-namespace:SIMS.Utils.Controls;assembly=SIMS.Utils"xmlns:conv="clr-namespace:SIMS.Utils.Converter;assembly=SIMS.Utils"mc:Ignorable="d"prism:ViewModelLocator.AutoWireViewModel="True"d:DesignHeight="450" d:DesignWidth="800"><UserControl.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /><ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" /><ResourceDictionary><conv:SexConverter x:Key="SexConverter"></conv:SexConverter><Style x:Key="LinkButton" TargetType="Button"><Setter Property="Background" Value="White"></Setter><Setter Property="Cursor" Value="Hand"></Setter><Setter Property="Margin" Value="3"></Setter><Setter Property="MinWidth" Value="80"></Setter><Setter Property="MinHeight" Value="25"></Setter><Setter Property="BorderThickness" Value="0 0 0 0"></Setter></Style></ResourceDictionary></ResourceDictionary.MergedDictionaries></ResourceDictionary></UserControl.Resources><i:Interaction.Triggers><i:EventTrigger EventName="Loaded"><i:InvokeCommandAction Command="{Binding LoadedCommand}"></i:InvokeCommandAction></i:EventTrigger></i:Interaction.Triggers><Grid><Grid.RowDefinitions><RowDefinition Height="Auto"></RowDefinition><RowDefinition Height="Auto"></RowDefinition><RowDefinition Height="*"></RowDefinition><RowDefinition Height="Auto"></RowDefinition></Grid.RowDefinitions><TextBlock Text="学生信息" FontSize="20" Background="AliceBlue" Margin="2"></TextBlock><StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center"><TextBlock Text="学号" VerticalAlignment="Center" Margin="2"></TextBlock><TextBox Margin="4" MinWidth="120" Height="30"Text="{Binding No}"HorizontalContentAlignment="Stretch"mahApps:TextBoxHelper.ClearTextButton="True"mahApps:TextBoxHelper.Watermark="学号"mahApps:TextBoxHelper.WatermarkAlignment="Left"SpellCheck.IsEnabled="True" /><TextBlock Text="姓名" VerticalAlignment="Center" Margin="2"></TextBlock><TextBox Margin="4" MinWidth="120" Height="30"Text="{Binding Name}"HorizontalContentAlignment="Stretch"mahApps:TextBoxHelper.ClearTextButton="True"mahApps:TextBoxHelper.Watermark="学生姓名"mahApps:TextBoxHelper.WatermarkAlignment="Left"SpellCheck.IsEnabled="True" /><Button Content="查询" Style="{DynamicResource MahApps.Styles.Button.Square.Accent}" Width="120" Height="30" Margin="3" Command="{Binding QueryCommand}"></Button><Button Content="新增" Style="{DynamicResource MahApps.Styles.Button.Square.Accent}" Width="120" Height="30" Margin="3" Command="{Binding AddCommand}"></Button></StackPanel><DataGrid x:Name="dgStudent"Grid.Row="2"Grid.Column="0"Margin="2"AutoGenerateColumns="False"CanUserAddRows="False"CanUserDeleteRows="False"ItemsSource="{Binding Students}"RowHeaderWidth="0"><DataGrid.Columns><DataGridTextColumn Binding="{Binding No}" Header="学号" Width="*" /><DataGridTextColumn Binding="{Binding Name}" Header="姓名" Width="*"/><DataGridTextColumn Binding="{Binding Age}" Header="年龄" Width="*"/><DataGridTextColumn Binding="{Binding Sex, Converter={StaticResource SexConverter}}" Header="性别" Width="*"/><DataGridTextColumn Binding="{Binding ClassesName}" Header="班级" Width="*" /><DataGridTemplateColumn Header="操作" Width="*"><DataGridTemplateColumn.CellTemplate><DataTemplate><StackPanel Orientation="Horizontal"><Button Content="Edit" Style="{StaticResource LinkButton}" Command="{Binding RelativeSource={RelativeSource AncestorType=DataGrid, Mode=FindAncestor}, Path=DataContext.EditCommand}" CommandParameter="{Binding Id}" ><Button.Template><ControlTemplate TargetType="Button"><TextBlock TextDecorations="Underline" HorizontalAlignment="Center"><ContentPresenter /></TextBlock></ControlTemplate></Button.Template></Button><Button Content="Delete" Style="{StaticResource LinkButton}" Command="{Binding RelativeSource={RelativeSource AncestorType=DataGrid, Mode=FindAncestor}, Path=DataContext.DeleteCommand}" CommandParameter="{Binding Id}"><Button.Template><ControlTemplate TargetType="Button"><TextBlock TextDecorations="Underline" HorizontalAlignment="Center"><ContentPresenter /></TextBlock></ControlTemplate></Button.Template></Button></StackPanel></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn></DataGrid.Columns></DataGrid><ctrls:PageControl Grid.Row="3" DataContext="{Binding}" ></ctrls:PageControl></Grid></UserControl>
新增编辑页面
新增编辑页面涉及知识点和班级新增页面差不多，仅有一处差异：
-
C#中的bool类型，需要绑定到两个单选按钮上，以表示男，女，所以需要扩展。
新增编辑页面，具体代码如下所示：
<UserControl x:Class="SIMS.StudentModule.Views.AddEditStudent"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:local="clr-namespace:SIMS.StudentModule.Views"xmlns:i="http://schemas.microsoft.com/xaml/behaviors"xmlns:mahApps ="http://metro.mahapps.com/winfx/xaml/controls"xmlns:prism="http://prismlibrary.com/"mc:Ignorable="d"d:DesignHeight="450" d:DesignWidth="600"><prism:Dialog.WindowStyle><Style TargetType="Window"><Setter Property="Width" Value="600"></Setter><Setter Property="Height" Value="400"></Setter></Style></prism:Dialog.WindowStyle><UserControl.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /><ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" /></ResourceDictionary.MergedDictionaries></ResourceDictionary></UserControl.Resources><i:Interaction.Triggers><i:EventTrigger EventName="Loaded"><i:InvokeCommandAction Command="{Binding LoadedCommand}"></i:InvokeCommandAction></i:EventTrigger></i:Interaction.Triggers><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="0.2*"></ColumnDefinition><ColumnDefinition Width="Auto"></ColumnDefinition><ColumnDefinition Width="*"></ColumnDefinition><ColumnDefinition Width="0.2*"></ColumnDefinition></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition></RowDefinition><RowDefinition></RowDefinition><RowDefinition></RowDefinition><RowDefinition></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><TextBlock Text="学号" Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock><TextBox Grid.Row="0" Grid.Column="2" MinWidth="120" Height="35" VerticalAlignment="Center" Margin="3" Text="{Binding Student.No}"></TextBox><TextBlock Text="姓名" Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock><TextBox Grid.Row="1" Grid.Column="2" MinWidth="120" Height="35" VerticalAlignment="Center" Margin="3" Text="{Binding Student.Name}"></TextBox><TextBlock Text="年龄" Grid.Row="2" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock><TextBox Grid.Row="2" Grid.Column="2" MinWidth="120" Height="35" VerticalAlignment="Center" Margin="3" Text="{Binding Student.Age}"></TextBox><TextBlock Text="性别" Grid.Row="3" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock><StackPanel Grid.Row="3" Grid.Column="2" Orientation="Horizontal" ><RadioButton Content="男" IsChecked="{Binding Student.IsBoy}"></RadioButton><RadioButton Content="女" IsChecked="{Binding Student.IsGirl}"></RadioButton></StackPanel><TextBlock Text="班级" Grid.Row="4" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock><ComboBox Grid.Row="4" Grid.Column="2" MinWidth="120" Height="35" ItemsSource="{Binding Classess}" mahApps:TextBoxHelper.ClearTextButton="True" SelectedItem="{Binding Classes}"><ComboBox.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Dept}"></TextBlock><TextBlock Text="{Binding Grade}"></TextBlock><TextBlock Text="{Binding Name}"></TextBlock></StackPanel></DataTemplate></ComboBox.ItemTemplate></ComboBox><StackPanel Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Center" Margin="3"><Button Content="取消" Margin="5" MinWidth="120" Height="35" Style="{DynamicResource MahApps.Styles.Button.Square.Accent}" Command="{Binding CancelCommand}" ></Button><Button Content="保存" Margin="5" MinWidth="120" Height="35" Style="{DynamicResource MahApps.Styles.Button.Square.Accent}" Command="{Binding SaveCommand}"></Button></StackPanel></Grid></UserControl>
3. 客户端ViewModel
学生管理客户端ViewModel，与页面视图对应，也分为两个部分
StudentViewModel代码分为三部分：
-
属性和构造函数，主要用于数据绑定，如查询条件，列表等。所有属性的set赋值时，均采用SetProperty进行赋值。
-
命令Command，如查询，新增，编辑，删除命令等。所有命令可以定义成DelegateCommand类型。
-
分页部分，因分页功能代码大同小异，所以此处略去。
StudentViewModel具体代码如下所示：
namespace SIMS.StudentModule.ViewModels{public class StudentViewModel:BindableBase{#region 属性及构造函数/// <summary>/// 学号/// </summary>private string no;public string No{get { return no; }set { SetProperty(ref no , value); }}/// <summary>/// 学生姓名/// </summary>private string name;public string Name{get { return name; }set { SetProperty(ref name, value); }}private ObservableCollection<StudentInfo> students;public ObservableCollection<StudentInfo> Students{get { return students; }set { SetProperty(ref students, value); }}private IDialogService dialogService;public StudentViewModel(IDialogService dialogService) {this.dialogService = dialogService;this.pageNum = 1;this.pageSize = 20;}private void InitInfo() {Students = new ObservableCollection<StudentInfo>();var pagedRequst = StudentHttpUtil.GetStudents(this.No,this.Name, this.pageNum, this.pageSize);var entities = pagedRequst.items;Students.AddRange(entities.Select(r=>new StudentInfo(r)));//this.TotalCount = pagedRequst.count;this.TotalPage=((int)Math.Ceiling(this.TotalCount*1.0/this.pageSize));}#endregion#region 事件private DelegateCommand loadedCommand;public DelegateCommand LoadedCommand{get{if (loadedCommand == null){loadedCommand = new DelegateCommand(Loaded);}return loadedCommand;}}private void Loaded(){InitInfo();}/// <summary>/// 新增命令/// </summary>private DelegateCommand addCommand;public DelegateCommand AddCommand{get{if (addCommand == null){addCommand = new DelegateCommand(Add);}return addCommand;}}private void Add(){this.dialogService.ShowDialog("addEditStudent", null, AddEditCallBack, "MetroDialogWindow");}private void AddEditCallBack(IDialogResult dialogResult){if (dialogResult != null && dialogResult.Result == ButtonResult.OK){//刷新列表this.pageNum = 1;this.InitInfo();}}/// <summary>/// 编辑命令/// </summary>private DelegateCommand<object> editCommand;public DelegateCommand<object> EditCommand{get{if (editCommand == null){editCommand = new DelegateCommand<object>(Edit);}return editCommand;}}private void Edit(object obj) {if (obj == null){return;}var Id = int.Parse(obj.ToString());var student = this.Students.FirstOrDefault(r => r.Id == Id);if (student == null){MessageBox.Show("无效的学生ID");return;}if (MessageBoxResult.Yes != MessageBox.Show("Are you sure to delete?", "Confirm", MessageBoxButton.YesNo)){return;}IDialogParameters dialogParameters = new DialogParameters();dialogParameters.Add("student", student);this.dialogService.ShowDialog("addEditStudent", dialogParameters, AddEditCallBack, "MetroDialogWindow");}/// <summary>/// 编辑命令/// </summary>private DelegateCommand<object> deleteCommand;public DelegateCommand<object> DeleteCommand{get{if (deleteCommand == null){deleteCommand = new DelegateCommand<object>(Delete);}return deleteCommand;}}private void Delete(object obj){if (obj == null){return;}var Id = int.Parse(obj.ToString());var classes = this.Students.FirstOrDefault(r => r.Id == Id);if (classes == null){MessageBox.Show("无效的学生ID");return;}bool flag = StudentHttpUtil.DeleteStudent(Id);if (flag){this.pageNum = 1;this.InitInfo();}}#endregion}}
AddEditStudentViewModel代码同样分为三部分：
-
属性和构造函数，主要用于数据绑定，如页面文本框，下拉选择框等。
-
命令Command，主要用于响应事件，如保存，取消等。
-
对话框接口，因为新增编辑是以弹出框的形式呈现，所以根据Prism框架的 要求，需要实现IDialogAware接口。(实现接口代码大同小异，在此略去)
AddEditStudentViewModel具体代码如下所示：
namespace SIMS.StudentModule.ViewModels{public class AddEditStudentViewModel : BindableBase, IDialogAware{/// <summary>/// 班级实体/// </summary>private ClassesEntity classes;public ClassesEntity Classes{get { return classes; }set { SetProperty(ref classes, value); }}/// <summary>/// 班级列表/// </summary>private List<ClassesEntity> classess;public List<ClassesEntity> Classess{get { return classess; }set { SetProperty(ref classess, value); }}private StudentInfo student;public StudentInfo Student{get { return student; }set { student = value; }}public AddEditStudentViewModel() {}#region Commandprivate DelegateCommand loadedCommand;public DelegateCommand LoadedCommand{get{if (loadedCommand == null){loadedCommand = new DelegateCommand(Loaded);}return loadedCommand;}}private void Loaded(){this.Classess = new List<ClassesEntity>();var pagedRequst = ClassesHttpUtil.GetClassess(null,null,1,0);//0表示所有班级var entities = pagedRequst.items;Classess.AddRange(entities);}private DelegateCommand cancelCommand;public DelegateCommand CancelCommand{get{if (cancelCommand == null){cancelCommand = new DelegateCommand(Cancel);}return cancelCommand;}}private void Cancel() {RequestClose?.Invoke((new DialogResult(ButtonResult.Cancel)));}private DelegateCommand saveCommand;public DelegateCommand SaveCommand{get{if (saveCommand == null){saveCommand = new DelegateCommand(Save);}return saveCommand;}}private void Save(){if (Student != null){Student.CreateTime = DateTime.Now;Student.LastEditTime = DateTime.Now;bool flag = false;if (Classes != null) {Student.ClassesId = Classes.Id;}if (Student.Id > 0){flag = StudentHttpUtil.UpdateStudent(Student);}else{flag = StudentHttpUtil.AddStudent(Student);}if (flag){RequestClose?.Invoke((new DialogResult(ButtonResult.OK)));}}}#endregion}}
4. 示例截图
学生管理示例截图，如下所示：
总结
通过本篇文章的班级管理模块，学生管理模块，以及上一篇文章中的课程管理模块，不难发现，每一个模块的开发都是由列表DataGrid，文本框TextBox，下拉框Combox，单选按钮RadioButton，按钮Button等组成的，虽功能略有差异，但总归万变不离其宗。开发方法也大同小异，复杂的功能都是普通的功能累加起来的。这也是本系列文章由浅入深的渐进安排。希望能够抛砖引玉，不局限于某一功能，而是能够举一反三，自我理解，以达到自我开发的能力。
注意：本系列尚未开发完成，需要源码的兄弟请耐心等待，谢谢。
学习编程，从关注【老码识途】开始！！！
