WPF Step By Step 自定义模板

桃扇骨 2022-08-20 06:16 51阅读 0赞

# 原文地址：http://www.cnblogs.com/hegezhou\_hot/archive/2012/10/29/2744197.html #

# 回顾 #

> 上一篇，我们简单介绍了几个基本的控件，本节我们将讲解每个控件的样式的自定义和数据模板的自定义，我们会结合项目中的具体的要求和场景来分析，给出我们实现的方案和最终的运行效果。

# 本文大纲 #

> 1、控件模板及数据模板
> 
> 2、ListBox深度定制模板。
> 
> 3、TreeView高级模板使用实例。

# 控件模板及数据模板 #

#  #

## 控件模板 ##

> 什么是控件模板，指定可以在控件的多个实例之间共享 Control 的可视结构和性能方面的方面。控件模板其实就是我们在可视方面的自定义模板，ControlTemplate 允许您指定控件的可视结构。 重写 ControlTemplate 重新生成该控件的可视结构。
> 
> 模板化控件是 WPF 提供的许多功能之一样式设置和模板化模型。 该样式和模板化模型提供了许多情况下您不需要编写拥有控件这样的大的灵活性。
> 
> 控件模板包含二方面的内容：VisualTree和Tigger。本篇介绍的内容，完全都是基于这二块的内容进行讨论和说明。

### 什么是ViewTree ###

> VisualTree就是对应WPF控件的可视元素的定义，下面来举例说明：
> 
> [![image][]][image 1]
> 
> 上面，我们通过了lable重写了button按钮的控件模板，我们还可以采用更复杂的控件来重写它：
> 
> [![image][image 2]][image_image 2]
> 
> 运行后的效果效果就是上面的预览图，我们当然还可以构建更复杂的情况，WPF中基本上所有的控件，都可以定义控件模板。
> 
> 上面的情况是我们针对一个按钮重写这样的控件模板，如果我们一个页面中有多个控件，并且这些控件的样式都是一样的，唯一的区别是控件的内容或文本不同而已，我们应该如何做呢？这个时候我们就需要把控件模板定义为资源，如下所示：
> 
> [![image][image 3]][image_image 3]
> 
> 我们下面添加多个按钮，来看看应用的具体效果：
> 
> [![image][image 4]][image_image 4]
> 
> 够简单吧，其实很简单，我们就可以重写控件的模板了，好了，下面来看看更复杂一些的，我们可能想当鼠标滑过，或者按下后，按钮有一个不同的样式，这时候我们就会涉及到前面介绍的Tigger了，下面我们就来看看
> 
> [![image][image 5]][image_image 5]
> 
> 具体的代码如下：
> 
> [![image][image 6]][image_image 6]
> 
> 在WPF中，为了提高用户体验的效果，实现界面特殊的效果，我们会大量的使用动画来完成。
> 
> [![image][image 7]][image_image 7]
> 
> 前面用了大量的篇幅来说明，控件模板和触发器，实现界面的特殊的效果，使用WPF来做事非常的简单。
> 
> 在第二小节中，我们将会举几个例子来说明项目中的具体用法。

### 数据模板 ###

> 数据模板与控件模板不同，主要是针对某种类型的数据而定制的模板，该模板会自动根据绑定的数据类型，在构造界面显示时，根据预先设定的数据模板来组织页面显示的内容。数据模板和控件模板的定义差不多。我们先来定义一个数据模板，然后看看如何使用。
> 
> [![image][image 8]][image_image 8]
> 
> 我们来看看代码是如何设定的，才能实现，这样的效果：
> 
> [![image][image 9]][image_image 9]
> 
> 上面用到了，绑定，关于更多的绑定，我们在后面的MVVM的实例中大量的使用了绑定。
> 
> [![image][image 10]][image_image 10]
> 
> 基于人员信息，构造人员信息绑定集合
> 
> [![image][image 11]][image_image 11]
> 
> 将ViewModel与界面建立关联关系
> 
> [![image][image 12]][image_image 12]
> 
> 最后，采用ListBox来显示数据项，通过数据绑定来实现
> 
> [![image][image 13]][image_image 13]
> 
> 这里我们发现数据模板的效果，并不是非常的好看，这时候，我们可以采用样式模板来完成样式设定。
> 
> [![image][image 14]][image_image 14]
> 
> 然后我们重新设置Listview的样式后，运行：
> 
> [![image][image 15]][image_image 15]
> 
> F5运行后效果如下：
> 
> [![image][image 16]][image_image 16]

## ListBox深度模板定制 ##

###  ###

### 定制Demo1 ###

> 上面我们虽然应用了样式，但是还是感觉不好看，而且鼠标点击后没有效果，是因为在触发器中没有做任何的效果设定。
> 
> 我们如果在触发器中修改为Button或者Border的背景色,再试试呢？
> 
> [![image][image 17]][image_image 17]
> 
> 果然是我们想要的效果，那么我们来看看我们只需要在模板中书写如下的简单几行代码即可：
> 
> [![image][image 18]][image_image 18]
> 
> 下面我们先来看看一个效果。
> 
> [![image][image 19]][image_image 19]
> 
> ListView具有黑色的背景。可以采用图片或者颜色值
> 
> 我们将上面的例子，一步步的实现这个效果。
> 
> [![image][image 20]][image_image 20]
> 
> 哈哈，就是这个效果，其实实现起来非常的简单，就是重写控件模板即可：
> 
> [![image][image 21]][image_image 21]
> 
> 接着：重写触发器，当鼠标滑过时的样式
> 
> 当鼠标获得焦点也就是按下时的样式。
> 
> [![image][image 22]][image_image 22]
> 
> 设置Grid的样式
> 
> [![image][image 23]][image_image 23]
> 
> 只需要简单的几步，就完全可以实现一组特别不错的效果。
> 
> 上面我们把样式都写到页面当中了，对于具体的情况，可能我们希望能够将样式通用，所以，我们会定义一个单独的样式文件，关于样式文件，我们前面的文章中也有提到过，这里就不做特别的说明了。
> 
> 下面我们来看看另外的一个效果：
> 
> [![image][image 24]][image_image 24]
> 
> 对于这样的效果，我们也可以通过ListBox来实现，无非就是重写ListBox的控件模板
> 
> 下面我们也来一步步的分析下效果的实现
> 
> [![image][image 25]][image_image 25]
> 
> 选中后的高亮效果，无非就是设置边框。
> 
> 然后就是横向显示，需要重写ListBox的ItemsPanel修改为WrapPanel。
> 
> [![image][image 26]][image_image 26]
> 
> 这样，我们的列表项就可以横向显示，然后设置每个列表项的样式：
> 
> [![image][image 27]][image_image 27]
> 
> 为了能够看到Border的边框，请设置borderThickness和颜色。
> 
> 同时保持border内部的子控件与border的边距值，否则出现不了，刚才展示的效果。
> 
> [![image][image 28]][image_image 28]
> 
> 代码本身就是这些东西，都是比较简单的。

## TreeView高级模板使用实例 ##

### Treeview的效果 ###

> 首先给大家看看实现的具体效果。
> 
> [![image][image 29]][image_image 29]
> 
> 上面的效果，还是不错的，不过实现起来的难度就会大很多。
> 
> 下面给出设计思路和具体的实现代码。
> 
> [![image][image 30]][image_image 30]
> 
> 我们实现的效果如上图，屏蔽了原始的+-符号，太难看了，所以，我们重写了相关的样式和模板来达到上述的效果，下面给出具体的实现
> 
> A、先定义基本的ViewModel
> 
> [![image][image 31]][image_image 31]
> 
> 具体的代码，会提供下载
> 
> B、定义TreeView的数据库结构
> 
> [![image][image 32]][image_image 32]
> 
> 上面定义的ViewModel只是为了DataTemplate使用的，在DataTemplate那里一看就明白了。
> 
> [![image][image 33]][image_image 33]
> 
> 修改原来的数据结构，如上。
> 
> 添加一个负责界面绑定的ViewModel
> 
> public class PersonViewModelCollection : INotifyPropertyChanged  
> \{  
> System.Collections.ObjectModel.ObservableCollection<ResourceSturctViewModel> persons =  
> new System.Collections.ObjectModel.ObservableCollection<ResourceSturctViewModel>();
> 
> public PersonViewModelCollection()  
> \{  
> Person tempA = new Person()  
> \{  
> Address = "北京",  
> Name = "A",  
> Photo = "/Samples.04.Template;Component/Images/logo\_small.gif",  
> Sex = "男"  
> \};
> 
> Person tempB = new Person()  
> \{  
> Address = "北京",  
> Name = "B",  
> Photo = "/Samples.04.Template;Component/Images/logo\_small.gif",  
> Sex = "未知"  
> \};
> 
> List<Person> tempABPersons = new List<Person>();  
> tempABPersons.Add(tempA);  
> tempABPersons.Add(tempB);  
> Person\[\] tempPersons = tempABPersons.ToArray();
> 
> persons.Add(new ResourceSturctViewModel(new Person()  
> \{  
> Address = "北京",  
> Name = "A",  
> Photo = "/Samples.04.Template;Component/Images/logo\_small.gif",  
> Sex = "男",  
> Childerns = tempPersons
> 
> \}));
> 
> persons.Add(new ResourceSturctViewModel(new Person()  
> \{  
> Address = "河北",  
> Name = "B",  
> Photo = "/Samples.04.Template;Component/Images/logo\_small.gif",  
> Sex = "女",  
> Childerns = tempPersons  
> \}));
> 
> persons.Add(new ResourceSturctViewModel(new Person()  
> \{  
> Address = "山西",  
> Name = "C",  
> Photo = "/Samples.04.Template;Component/Images/logo\_small.gif",  
> Sex = "男",  
> Childerns = tempPersons  
> \}));  
> \}
> 
> public System.Collections.ObjectModel.ObservableCollection<ResourceSturctViewModel> PersonList  
> \{  
> get  
> \{  
> return this.persons;  
> \}  
> \}
> 
> \#region INotifyPropertyChanged 成员
> 
> public event PropertyChangedEventHandler PropertyChanged;
> 
> \#endregion  
> \}
> 
> 后台的相关代码，都构建完毕了，下面我们就来看看界面的设计和组织了：
> 
> [![image][image 34]][image_image 34]
> 
> TreeView节点前的展开折叠样式
> 
> [![image][image 35]][image_image 35]
> 
> TrewViewItem的每个节点项的样式：
> 
> [![image][image 36]][image_image 36]
> 
> 上面没有设置具体的控件和绑定，而是通过ContentPresenter和ItemsHost来处理的，这样我们就可以结合数据模板来做统一处理，最终将DataTemplate设置的控件自动显示到当前的ContentPresenter和ItemsHost中。
> 
> [![image][image 37]][image_image 37]
> 
> 如果不按照上述要求，那么当我们重写TreeView时就会遇到很多莫名其妙的问题，我也是遇到了，才总结出来。
> 
> 在前面的样式中，我们加入了如下事件，务必写上，这是为了触发Lazyload的操作的。
> 
> [![image][image 38]][image_image 38]
> 
> 等你自己试一遍，就会发现其实也不难，只要掌握了对自定义模板的规则，就完全可以自定义更复杂的样式和效果。

[image]: /images/20220731/2828f87ff55d4ea398a2cb9b2d38aae6.png
[image 1]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839253252.png
[image 2]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839274449.png
[image_image 2]: /images/20220731/cce627d696b84123b383497442800c98.png
[image 3]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839297905.png
[image_image 3]: /images/20220731/939d0acd4b934898919eff1a72132cce.png
[image 4]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839305232.png
[image_image 4]: /images/20220731/e7ce4eb6118e4001a22683fc60ceeb55.png
[image 5]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839329527.png
[image_image 5]: /images/20220731/8ba2c1e20f71465483f923e754dde4ae.png
[image 6]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839336330.png
[image_image 6]: /images/20220731/374e1793ce96421bba243257fbceeb30.png
[image 7]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839356165.png
[image_image 7]: /images/20220731/ea028b7710f4453584b2a828f55cd572.png
[image 8]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839366589.png
[image_image 8]: /images/20220731/7ddce84598fa4e94b6205f7460c5c5d9.png
[image 9]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839389456.png
[image_image 9]: /images/20220731/2dedd921249f4f23abaff8f7b0c18b7d.png
[image 10]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839393817.png
[image_image 10]: /images/20220731/b323b9084088463c993dfdeedb765567.png
[image 11]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/20121029083940304.png
[image_image 11]: /images/20220731/e3072888254643d7813296d3c44d284f.png
[image 12]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839411077.png
[image_image 12]: /images/20220731/d67fdb8304ce44f1bba465df00ede53f.png
[image 13]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839425962.png
[image_image 13]: /images/20220731/ccef21ae2ca44751a845199fdbafedc5.png
[image 14]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839438861.png
[image_image 14]: /images/20220731/d0f21a37126146559048948b1befe306.png
[image 15]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839454826.png
[image_image 15]: /images/20220731/02d9ed53605e4b20a74571c80ee0236c.png
[image 16]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839461662.png
[image_image 16]: /images/20220731/d809b5fa576a4bae8be2b7eae4ffc2b5.png
[image 17]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839475466.png
[image_image 17]: /images/20220731/f39b16fd7e4145d0bcf14a21c6d280f3.png
[image 18]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839489446.png
[image_image 18]: /images/20220731/521ac29ef77d4630ad5373ac757ef459.png
[image 19]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839491855.png
[image_image 19]: /images/20220731/61abe289fda94377800077f733b7d159.png
[image 20]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839506216.png
[image_image 20]: /images/20220731/5074d67f8f944013b239d99140c68f41.png
[image 21]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839512147.png
[image_image 21]: /images/20220731/437cbd5822174810b8b48b7ca033b441.png
[image 22]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839534806.png
[image_image 22]: /images/20220731/b544d468fe4b4e1fb0dc3c45873f869d.png
[image 23]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/20121029083954247.png
[image_image 23]: /images/20220731/18303f08264b4fd49bc489d0beaf35fd.png
[image 24]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839556244.png
[image_image 24]: /images/20220731/0d84b67bfb18446d8b9516ff4c69706d.png
[image 25]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839568653.png
[image_image 25]: /images/20220731/e4092993afc24f73ba243392d18a6461.png
[image 26]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/20121029083957506.png
[image_image 26]: /images/20220731/b271268193ae400d954e484018989aa0.png
[image 27]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839584834.png
[image_image 27]: /images/20220731/3228a463cd5e4b0eb11546170b05eec5.png
[image 28]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290839596687.png
[image_image 28]: /images/20220731/9a703e0d86d04ea39ef4703d8b61d8ab.png
[image 29]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290840007111.png
[image_image 29]: /images/20220731/1fe535a5f5f341a18ee97795ae659063.png
[image 30]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290840018092.png
[image_image 30]: /images/20220731/eb5f695889c9463caff337abb14edee2.png
[image 31]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/20121029084002501.png
[image_image 31]: /images/20220731/7afcd9e3b86246cf9892f944f1833bcd.png
[image 32]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/20121029084003402.png
[image_image 32]: /images/20220731/8f9177f63a134ea8b023a10047dbd076.png
[image 33]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290840049223.png
[image_image 33]: /images/20220731/976825c20fa5436b9436bce4b98c3a2a.png
[image 34]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290840059648.png
[image_image 34]: /images/20220731/a3a3504a515b49b295f19cdebe4e89bd.png
[image 35]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/20121029084006562.png
[image_image 35]: /images/20220731/6539a8fa249145ae8301a56aaa6c360c.png
[image 36]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290840082349.png
[image_image 36]: /images/20220731/5b31688807eb454aa138b3138377d6d5.png
[image 37]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290840109643.png
[image_image 37]: /images/20220731/617d4697b66c4b7e873a49920de23605.png
[image 38]: http://images.cnblogs.com/cnblogs_com/hegezhou_hot/201210/201210290840119544.png
[image_image 38]: /images/20220731/8e2b317201ab4cd5921040bee47ec620.png