Expression Blend 的点滴（3）--Templating的妙用，制做本身的ScrollBar控件

在Blend中，有一个功能，Make into control---经过它能够方便的自定义各类个性化的控件，例如把图片，文本，或者几何形状等等变成Button控件。固然，不仅是Button能够变，还有各类各样的控件，几乎包括了因此的基本控件，而它们的外观究竟是什么样，那就取决于你的创造力了。今天，就继续练习下这个功能的使用，跟着我一块儿作吧，你会发现blend真的很棒，固然，开始的时候可能会以为过程有些复杂，不过不要紧，熟能生巧嘛~好了，开始吧。。。

首先在拖放出一个Grid布局控件，设置适当的长度和宽度，设置下背景色，而且分红5列：

 

这个就看成滚动条的主体，接着在左右两个顶端分别画上两个三角形，固然他们分别位于第一列和第五列。你能够本身画三角形，若是不擅长，就直接使用三角形的shape控件。



画出三角后，调正下大小和旋转角度后，放入相应的列中，接着再拖放一个矩形控件，改变下圆角，放入第三列：




基本的样子已经出来了，接下来几部都是比较关键的，须要在第二列和第四列拖放两个矩形，并设置背景色和Grid的背景色同样。这个两个矩形有什么用呢？若是你查看下基本scrollbar的模板，你会发现，scrollbar主要有五个能使得产生滚动事件的部件，这里以垂直滚动条为例：



因此，咱们上面的三角分别对应smalldecrease，smallincrease.而矩形则对应两个Large，中间列的矩形对应Thumb。

接着，进入关键的一步，对各个列进行设置，把第一列，第二列，第三列，第五列设置为auto，第四列为任意宽度，以下图，注意红色标注的地方;

若是还不是很清楚，那咱们查看下源码：



到目前，前期工做已经完成，因而咱们开始变，Make into contrl-------



变成scrollbar：



肯定后，编辑当前模板。


接着咱们打开Pars选项卡：

 
在这里列出了scrollbar的全部部件，咱们下面会用到，咱们会把以前本身定义的三角形，矩形make into 相应的部件。



上图的操做就是将左边的三角形转换成SmallDecrease部件，其他的操做相似，就不一一列举了。

以后，你将看到以下的样子：



可是，还有一步须要注意，当你转换后，会自动跳入它们各自的模板编辑，咱们把里面的ContentPresenter删除，由于咱们不须要。
以前若是都正确的操做了，那么自定义的scrollbar模板已经作好了，接下来，咱们来使用它。

咱们拖放一个scrollviewer控件，而后编辑一个拷贝的模板。
而后编辑HorizontalScrollbar的模板，绑定到刚才咱们本身作的模板：



这样就成功的使用了咱们本身定义的scrollbar了，最后看看效果如何：