Blend精选案例图解教程.doc

（一）：丰富的形状?（Shape?）资源 1 （二）：找张图片玩?特效 6 （三）：一键拖拽 15 （四）：请给我路径?指引 17 （五）：可视数据管?理 26 （一）：丰富的形状?（Shape?）资源 Blend?4资源面板?中内置了丰?富的形状素?材，为我们在构?建程序时提?供极大的方?便。系统默认内?置18种常?用形状，通过其属性?设置可以自?定义出更多?衍生形状，或者通过D?irect? Selec?tion工?具手动绘制?，我们可以获?得更自由的?形状编辑。当然我们还?可以登陆 Expre?ssion? Galle?ry 下载别人分?享的素材（似乎并不多?），来扩充形状?资源库。 因为形状的?用法比较一?致，重点是形状?的不同属性?设置，在此仅举一?例来展示形?状的常规用?法。 1、 新建项目 2、 项目文件生?成后，在Obje?cts and Timel?ine面板?中选中La?youtR?oot 3、 然后在资源?(Asset?s)面板中选中?Shape?s 4、 我们可以通?过双击或者?拖拽的方式?添加一个形?状，这里我们使?用Star?来作演示，Star已?添加到La?youtR?oot中，如图 5、 选择Sel?ectio?n工具 确认五角星?处于被选择?状态（如未选择可?以通过点击?选择） 6、 在属性（Prope?rties?）面板中，我们可以对?形状进行一?系列的属性?设置，直到符合我?们的需要。下面我们对?五角星进行?简单的修饰?。 把颜色调为?红色 去边框 OK，这样一个标?准的五角星?制作完成 7、 通过组合不?同的属性设?置，我们可以获?得更多的效?果： 手绘风格： 效果： 更改Fil?l属性为渐?变效果 效果： 更改外观属?性 效果： 如果你愿意?，可以做出更?多的效果！ 以上效果我?们也可以通?过XAML?来实现，以下为完整?代码： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 UserC?ontro?l xmlns?=http://schem?as.micro?/winfx?/2006/xaml/prese?ntati?on xmlns?:x=http://schem?as.micro?/winfx?/2006/xaml xmlns?:ed=http://schem?as.micro?/expre?ssion?/2010/drawi?ng x:Class?=Shape?sDemo?.MainP?age Width?=640 Heigh?t=480 Grid x:Name=Layou?tRoot? Backg?round?=White? ed:Regul?arPol?ygon Inner?Radiu?s=0.702 Margi?n=244,193,296,187 Point?Count?=20 Stret?ch=Fill Strok?e=Black? UseLa?youtR?oundi?ng=False? Strok?eThic?kness?=0 Rende?rTran?sform?Origi?n=0.5,0.5 ed:Regul?arPol?ygon.Fill Radia?lGrad?ientB?rush Gradi?entSt?op Color?=#FFFF0?001 Offse?t=0/ Gradi?entSt?op Color?=White? Offse?t=1/ /Radia?lGrad?ientB?rush /ed:Regul?arPol?ygon.Fill /ed:Regul?arPol?ygon /Grid /UserC?ontro?l ? 1 在实际项目?中，不推荐使用?代码的方式?来进行大规?模的效果设?计，Blend?的设计功能?，VS无可替?代；作为程序员?将Blen?d和VS的?结合使用才?能带来高效?的Silv?erLig?ht应用程?序开发。后续章节，将通过实例?一步一步展?现Blen?d的强大魅?力！ （二）：找张图片玩?特效 Blend?中的特效给?了我们在处?理资源时更?多的想象空?间，合理地运用?特效往往会?得到梦幻般?效果，本次教程展?示对图片应?用特效的常?规操作，当然特效不?仅限于使用?在图片上，还也可以应?用到动画和?视频中。 OK，开始本次旅?程 1、 在项目中添?加一张现有?的图片 如果添加的?图片大于2?50KB，会提示推荐?把图片嵌入?到XAP包?中，这样图片在?浏览器加载?XAP文件?时会一起被?下载到本地?。 2、把图片拖到?UserC?ontro?l中 3、在资源面板?中，选择特效（Effec?t），先体验一下?“漩涡”，双击应用。 效果： 对属性进行?微调 效果：