Expression Blend 的点滴（4）--建立相似iPhone屏幕锁控件（上）

本篇文章，最终效果图：

 

 

固然，不仅是一个UI而已，若是只是一张图片，那专业的设计师能作出更出色的效果。在这里，它是具备许多事件和属性的一个控件，其实，它是一个checkBox控件，接下来就让咱们一块儿来对checkBox进行大变身吧~话说，以前咱们已经给Listbox变身过了，有兴趣的话查看：http://www.cnblogs.com/vimsk/archive/2011/03/09/1978326.html      Blend确实是个好工具，经过它，能够尽情发挥你的想象力，并且用起来是那么的方便（怎么有打广告的嫌疑，嘿嘿）。好了，废话很少说了，开始吧~~

 

经过本文章能够了解到的知识 

 1.经过blend使用template建立自定义的模板.

 2.如何进行template Binding.

 3.Grid布局

 4.经过States建立 状态过渡.

 5.Fluid Layout 的应用.

 内容有点多，因此，文章打算分红两篇，否则看起来有点累:)

 

如下内容努力建立中...

 

1.打开blend，新建一个Silverlight项目：

 

 

2.从资产面板中拖一个checkBox到工做区：



3.接下来，建立一个模板：



因而乎，咱们就能进入模板编辑区啦，若是看过我以前的文章的话，这些对你来讲应该很熟悉了。

 

 

 

上图所示，你能够经过它方便进行模板编辑和普通编辑的切换工做。若是此时查看时间线和对象区，你也将看到模板的组织状况（以下图所示）。

 

 


上图所示红色圈出地方，均可以从模板编辑切换出去。

 

接下来，咱们切换到States选项卡，来查看下checkBox的相关状态：

 

哇塞。。。一大堆。。。。。@！%￥%#￥@% 

这里咱们主要关注的是Checked状态。 由于这个也算是checkBox的主要做用。暂且不去管它，咱们接下去先看看checkBox模板的组成，看了后，发现有一个Grid，里面放了一个Grid和一个Contentprestener。展开里面的Grid，咱们能够看到又有一大堆的东西，有点下，咱们放大看：




上面的Background用到了模板绑定，这样的好处是当你完成模板编辑后，之后控件修改相关属性，例如默认checkBox模板的Background就是绑定到控件的BorderBrush属性，这样，当控件的BoerderBursh颜色改变了，反应到模板中就是上图中的Background属性改变，视觉上就是红色箭头所指的颜色。

接下来，咱们看下Contentprestener的属性，咱们发现，它有个Content的属性，点击的话，一样发现它也是绑定的。



它绑定到了控件的Content属性，默认拖一个checkBox，它的Content是一个text文本。

了解了这些东西后，开始正式动手了，首先，把Grid中的Grid给删除掉，Contentprestener也删除掉：

 所有删除只身下最外层的Grid，而后，本身放一个空的Grid进去看上去就变这样了：

 

 咱们的目的是要让最后的样子是相似于iphone屏幕锁的样子，因此，就按照这个目标，最后的结构是这样的：

    
展开grid：

 上图中，Rectangle是一个矩形，表明背景。在内嵌的grid中放置了一个thumb的矩形和一个Path路径，在画布上将看到以下的样子：



其中的thumb就是按钮，Rectangle是蓝色背景，path是中间的箭头，如今很清楚了吧。。。。

接下来注意观察上图。看到顶部有两把锁了吗？中间还有一个斜向双箭头的图案，这里说明，把Grid分红了三个列。第一个列是开着的锁，说明是按照百分比来设定的，中间的是自动宽度，最后的是固定长度，这里咱们设置为0. 为何要这样设定，固然是有道理的，由于最终，咱们的按钮是会从第一列滑动到第二列，而第二列长度和控件自己长度有关，当设定为自动，而且第三列固定为零，这样，当控件长度变化时，按钮将不会滑出grid的外部，具体动手试试就清楚了。

接下来，咱们要对背景色和按钮的前景色进行绑定，分别绑定到控件的BorderBrush和Foreground：

       



这样，当咱们切换会控件编辑区后，设定下BorderBrush和Foreground，就会发现模板中相应部分的颜色就会跟着改变。咱们把颜色调好，接着再拖一个checkBox，引用上面咱们编辑的模板

 最后，分别调正两个checkBox的BorderBrush和Foreground：
到目前位置，只是有了外观，咱们发现按钮不会滑动，接下去就来完成当checked的时候，按钮从左边滑动到右边，本篇就先不写了，太长了，见下篇了吧。。：）