1、,项目六 WPF资源、样式和模板项目美化,讲师 刘振东,本章导读:,本章的主要内容是利用资源、样式和模板的相关知识,美化图书管理系统。通过项目“系统中各控件美化”为导向,四个任务(美化TextBlock控件、美化TextBox控件、美化Button控件和自定义控件模板)为驱动,学习有关WPF资源、样式和模板的知识,本项目着力使学习者对WPF的资源、样式有一定认识,初步掌握自定义控件模板的用法。,项目六 WPF资源、样式和模板项目美化 任务四 美化DataGrid控件,自定义控件的外观,还可以采用数据模板化方式。数据模板化用到了数据绑定的相关知识。读者管理界面使用的DataGrid是默认WPF元
2、素样式,我们可以利用DataTemplate来实现对其美化。读者管理界面出现是变旋转边放大,有动态特效。,一、任务描述:,二、知识准备:,http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ htt
3、p:/www.51xiu.org/ http:/ http:/www.gz- http:/ http:/ 控件设置ItemSource 属性后,DataGrid 会根据数据类型自动生成相应的列,下表列出DataGrid 支持的四种列及其数据类型。,二、知识准备:,1、自定义DataGrid外观,1、自定义DataGrid外观,二、知识准备:,除此之外,我们可以用DataGridTemplateColumn自定义其他数据类型。自定义类型时,一般在资源字典中定义模板,在App.xaml中合并资源字典。下面的代码演示了如何分别定义显示模板和编辑模板。,1、自定义DataGrid外观,二、知识准备:,
4、 ,1、自定义DataGrid外观,二、知识准备:,http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.51xiu.org/ http:/ http:/www.gz- http
5、:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.51xiu.org/ http:/ http:/www.gz- http:/ http:/ 打开之前创建的读者管理项目
6、,运行此应用程序,点击“显示全部”显示所有读者信息。此时DataGrid显示默认WPF外观。 2. 在项目下添加一个Dictionarys文件夹,然后在该文件夹下添加一个文件名为Dictionary1.xaml的资源文件,代码如下:,四、任务实施:,四、任务实施:,四、任务实施:,四、任务实施:,四、任务实施:,在这个资源字典中,创建了一个x:Key=”Animate1”的动画,其效果是边放大边旋转。 3. 修改App.xaml,添加下面的代码,以便在整个应用程序都可以引用资源字典中定义的动画。,四、任务实施:,四、任务实施:,在应用程序中,凡是用Style=”StaticResource A
7、nimate1”音乐该动画的控件,都会在初次加载时自动边旋转边放大,直到放大到该控件的大小为止。 4. 添加一个名为myResource的文件夹,然后在该文件夹下添加一个名为MyDataGridTemplate.xaml的资源字典,将代码改为下面的内容。,四、任务实施:,四、任务实施:,四、任务实施:,5. 修改App.xaml,添加合并资源字典的代码。,四、任务实施:,6. DataGrid模板设置完成后,就要在中加入DataGridTemplateColumn 列显示读者的办证日期。主要代码如下。,四、任务实施:,6. DataGrid模板设置完成后,就要在中加入DataGridTempl
8、ateColumn 列显示读者的办证日期。主要代码如下。,四、任务实施:,7. 修改后台cs文件,主要代码如下:,using( var db = new BookDbEntities()var q = from t in db.tb_readerselect t;dataGrid1.ItemsSource = q.ToList();,四、任务实施:,http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.51xiu.org/ http:/ http:/www.gz- http:/ http:/ 资源、样式、模板 利用资源、样式、模板等相关知识修改控件外观,从而达到美化项目的目的。,项目总结:,