Blend4精选案例图解教程.doc

（一）：丰富的形状（Shape）资源1（二）：找张图片玩特效6（三）：一键拖拽15（四）：请给我路径指引17（五）：可视数据管理26（一）：丰富的形状（Shape）资源Blend4资源面板中内置了丰富的形状素材，为我们在构建程序时提供极大的方便。系统默认内置18种常用形状，通过其属性设置可以自定义出更多衍生形状，或者通过Direct Selection工具手动绘制，我们可以获得更自由的形状编辑。当然我们还可以登陆 Expression Gallery 下载别人分享的素材（似乎并不多），来扩充形状资源库。因为形状的用法比较一致，重点是形状的不同属性设置，在此仅举一例来展示形状的常规用法。1、 新建项目2、 项目文件生成后，在Objects and Timeline面板中选中LayoutRoot3、 然后在资源(Assets)面板中选中Shapes4、 我们可以通过双击或者拖拽的方式添加一个形状，这里我们使用Star来作演示，Star已添加到LayoutRoot中，如图5、 选择Selection工具确认五角星处于被选择状态（如未选择可以通过点击选择）6、 在属性（Properties）面板中，我们可以对形状进行一系列的属性设置，直到符合我们的需要。下面我们对五角星进行简单的修饰。把颜色调为红色去边框OK，这样一个标准的五角星制作完成7、 通过组合不同的属性设置，我们可以获得更多的效果：手绘风格：效果： 更改Fill属性为渐变效果效果： 更改外观属性效果： 如果你愿意，可以做出更多的效果！以上效果我们也可以通过XAML来实现，以下为完整代码：?123456789101112131415161718?1在实际项目中，不推荐使用代码的方式来进行大规模的效果设计，Blend的设计功能，VS无可替代；作为程序员将Blend和VS的结合使用才能带来高效的SilverLight应用程序开发。后续章节，将通过实例一步一步展现Blend的强大魅力！（二）：找张图片玩特效Blend中的特效给了我们在处理资源时更多的想象空间，合理地运用特效往往会得到梦幻般效果，本次教程展示对图片应用特效的常规操作，当然特效不仅限于使用在图片上，还也可以应用到动画和视频中。OK，开始本次旅程1、 在项目中添加一张现有的图片如果添加的图片大于250KB，会提示推荐把图片嵌入到XAP包中，这样图片在浏览器加载XAP文件时会一起被下载到本地。2、把图片拖到UserControl中3、在资源面板中，选择特效（Effect），先体验一下“漩涡”，双击应用。效果： 对属性进行微调效果： 特效的应用非常简单：应用特效，微调属性。再看看其他的效果：效果： (涟漪）效果： （像素）效果： (Mono)其他的特效就不一一展示了，可以找些图片慢慢玩。这里有一个问题：我们在选择应用不同特效时，最后应用的特效会把前面的特效覆盖（单重特效），那如果我希望应用多重特效，该如何处理呢？最简单的方式是为图片添加一个“容器”，在“容器”中再应用一重特效，如此嵌套可实现多重特效。下面来演示操作过程：4、为图片添加一个容器Canvas5、在容器中应用特效，文档结构如图得到涟漪+像素的双重特效（三）：一键拖拽拖拽效果，常规实现方法是定义MoveLeftDwon、MoveLeftUp、MouseMove事件，在Blend的世界里，实现对象的拖拽，可以不写一行代码，而且非常简单，本次教程跟大家分享这个技巧。1、新建项目，在默认设计视图添加一个元素，这里添加一个图片视图树 设计视图 2、在资源面板（Asset）中，找到Behavior分类，选择MouseDragElementBehavior，从名字上我们就应该能理解这个行为实现的功能3、把选中的行为拖拽到图片元素上视图树 4、搞定，收工！ F5，享受一键拖动的快感吧。进阶控制：限定元素的拖拽范围5、很自然会想到把图片放在一个容器里，通过容器控制可移动的范围视图树 设计视图 6、很重要的一步，设置MouseDragElementBehavior的属性勾选ConstrainToParent 7、OK，收工！F5，Injoy yourself.（四）：请给我路径指引路径在界面设计中，可以起到很好的辅助作用，我常常使用它来对元素进行规则排列和非规则排列控制。本次教程将演示，Blend中路径的常规用法。1、新建项目，在默认设计视图中添加一个椭圆（Elipse），按住Shift键可以画圆视图树设计视图 2、从绘制的圆中提取路径，右键点击圆，弹出的窗口选择Path-Make Layout Path，在视图树中显示为PathListBox，这就是我们需要的路径3、选中PathListBox，通过双击图片，往PathListBox中添加需要通过路径排列的元素视图树 4、为了查看效果，暂时把elipse的可见关闭效果图 5、路径带来的效果已初步展现，下面在进行属性设置，使图片的排列更符合我们的要求。确保选中PathListBox，然后在属性窗口中进行属性调整ZIndex:2 使图片显示在elipse（elipse的ZIndex属性为1）排列属性：平均方向：随路径居中6、对elipse进行简单的属性设置，作为图片显示的背景7、OK，效果出来了，是不是有点像八卦图。呵呵，咱们继续！8、使用钢笔工具创建不规则路径，对图片进行不规则排列新建一个UserControl9、使用钢笔工具，随意画出一些路径设计图 视图树 10、提取路径，加入图片元素11、把UserControl的背景设置为白色，改变分布（Distribution）属性为Even（平均）12、得到不规则排列图（五）：可视数据管理应用程序中我们会经常需要操作数据，在程序设计之初示例数据一般都是手工添加，Blend4提供了非常方便的数据管理能力，包括丰富的数据类型和内置示例数据，这样我们在程序设计时可以可视化进行绑定示例数据和管理静态数据。本次教程将演示Blend4中的这一优秀特性。1、新建Silverlight项目2、在项目默认视图中，打开数据面板，创建示例数据3、新建示例数据，输入名称4、生成的SampleDataSource5、可以在Collection中添加新字段，修改字段类型6、字段添加完后，看一下系统给我们提供的默认数据，点击编辑示例值7、在这个窗口中系统根据设置的字段类型，提供了默认数据，我们可以更改为自己需要的数据，系统会自动生成相应的文件8、SampleData文件夹包含了刚才创建的数据文件，SampleDataSource.xaml是一个资源字典8、添加一个DataGrid用来显示数据9、