移动怎么更换彩铃-windows xp主题包

silverlight 教程
2023年4月3日发(作者:sony笔记本驱动)

[原创]ExpressionBlend2教程1-介绍

技术|工具2009-05-2819:40:23阅读323评论2字号:大中小

本来只想写一篇简短的Blend介绍,没想到一写就写了一下午。。希望对初学Blend的同学

们有所帮助

前面的工具介绍部分,建议直接跳过,看最后那个实例就好了!很多东西要自己摸索一下就

明白了!

1.什么是Blend?

要了解Blend是什么需要先了解的是Microsoft的Silverlight和WPF(Windows

PresentationFoundation)

来自维基百科的简单介绍MicrosoftSilverlightWPF

这是一个面向设计师的简单教程关于技术背景方面就不多说了简单的说,

Blend是微软搞出来让设计师为WPF或Silverlight创建用户界面的一个设计工具

个人认为他的最大优点在于“设计将可原封不动地用于最后的产品中…开发人员不再

需要尝试重建它们…”

这让开发人员和设计师都是那么的欣喜若狂啊!

如果和设计师熟悉的Adobe系列作比较,Blend之于WPF(Silerlight)就如Flash之

于Flex

可以做什么

制作界面是Blend的本职工作,但如此强大的工具在手,只要你像叉蓝一样爱动脑筋,

它能起的作用就不只是这些:P

Blend可以很轻松的添加事件、增加响应(当然Flash也可以做到,但我认为Blend更

加易用轻松,可能是由于我并不那么熟悉Flash…)所以当受够了Axure的折磨时,我

突然意识到如果用Blend就可以做出更高保真的应用原型!不再是简单呆板的页面跳转,

不再需要测试人员按固定的路线操作,Blend可以制作出保真度非常高的原型。

对于大型产品,前期的可用性测试怎么样得到更多的信息,以便对产品进行改进?条件

允许的话,当然是做保真度更高的原型。而又如何快速开发出高保真原型?我认为Blend

和Flash在这方面,具备了应对这个难题的能力。

3.了解Blend界面结构

“wo~好酷的界面”很多同事从我身后走过时,都会有这个反应…

但我并不喜欢Blend的界面:

第一,字体是“糊的”,现在知道,这种平滑字体是Blend的“特色”。个人认为这将成为

中文应用程序里的一个很大弊端,设计师无法再使用被广大用户接受的12点宋体。雅黑成

了退一步的选择。

第二,或许已经用惯了Adobe系列,个人认为这种常用的工具型软件,黑乎乎的颜色

太浓厚了,挺累的

界面结构:

1.最左侧一列和Adobe的一样,是一些设计用的工具,如选取工具、拾色器、填充,详细

的下面介绍

2.第二列上部分是触发器,可以给各个控件增加响应(比如鼠标移上一个按钮时,按钮有

个什么变化)

这块面积虽然不大,但却是WPF的核心呀!所有神奇炫丽的响应效果,都是通过这里

添加事件,再制作动画。

3.第二列下部分,可以理解为类似图层的概念制作动画的时候,这里会出现类似Flash

里的时间轴

4.白色区域即为画布,右上角有三个标签,可以切换三种视图

Design:既是上面截图中的样子

XAML:转到界面的代码,界面所有内容都是用XAML定义的,包括画一段路径,都对

应在XAML里面的一条代码。设计师一般不需要看XAML视图。

Split:视图分两栏,上方是design,下方是XAML。当选中设计视图里的元件时,下

面就自动跳至对应该元件的那段。

这个和dreamweaver是一样的呀~

5.最右侧一栏有三个Tab分页,分别是

Project:和项目相关的内容,工程的文件结构(在这里可以导入外部的图片资源)

Properties:当在画布绘制了什么元件时,选中该元件后,这里就会显示和这个元件相

关的属性。属性面板是最为常用的一个面板,如果你不想写XAML,那么整个界面的布局、

对齐方式、描边等等,都可以再属性面板完成设置。(这个和Flex的属性面板的功能基本一

致)

Resources:资源面板用到的不多,里面显示了所有的自定义样式。比如我制作了一个

button,buttonStyle就成为一个资源,我在应用程序里使用到按钮的地方,都可以使用这个

样式。(这个基本就相当于Flex里面CSS的Style,不过Blend可以完全自由定义一个元件

的外观。而在Flex里,可以改变的CSS非常有限,除非用Flash制作元件再导入成资源)

4.工具面板常用工具介绍

Selection:和Adobe的类似,用来选中图层(组)。选种一个组(例如Grid),双

击后进入这个组的编辑(这个和Flash是一样的,双击后进入编辑这个元件的视图)。这个

工具没办法选中一个组里面的子内容。

DirectSlection:可以直接选中任和图层(未锁定),即使它被包含在一个组里面。

可以选中路经里的节点,拖动节点等

BrushTransform:自由变换渐变色,控制方向、中心点…这个比PS好用多了,PS

里面要拖动渐变只能无数次的尝试,达到一个好的效果这个可以随意变换渐变,很方

便

布局:在界面架构里用到的各种布局。这块内容有很大学问,这里就不详细说明了

个人感觉Blend的布局,比Flex里的布局类型更多、更好用一些,每种布局的特点很明确,

控制起来很方便。

控件:软件应用里常见的控件都在这里了,如果没有你想要的东西,点下面的那个“>>”

可以搜出更多更复杂的控件。

当你使用这些控件时,控件的皮肤会直接绑定到系统的主题。不过你可以自己定制Style,

再把Style应用到具体控件实例上。自定义控件的Style不是特别容易,尤其是类似Slider、

ComboBox这种情况多变、复杂的控件,让人想吐血…

5.用Blend做一个最简单的应用界面!

俗话说的好,少看书多做事!做过一个你就知道,Blend是多么容易啦!

任务:我们要搞一个简单的应用,上面只有一个按钮,点击一下按钮,界面的空白部分就会

显示“Helloworld!”

Step1新建一个工程

新建完成后,恭喜你得到了一张空白的画布!

可以在属性面板设置Width和Height,属性面板就不介绍了,自己摸索去吧!

Step2画这个按钮

可以直接拖动按钮控件到画布中,但是这样的按钮太丑了(样式是系统主题的样式)!

俺这么有美感的人怎么可以用这么丑的按钮?所以我决定画一个和我一样帅的按钮!(时间

有限。。没有画很帅啦)

这是一个Rectangle(画按钮随便用什么都可以,我这里选了Rectangle)

在属性面板,你可以控制它的圆角、描边色、填充色、在面板中的对齐方式等等

Fill既是填充色Stroke是描边OpacityMask是半透明蒙版

对于颜色,我可以选纯色也可以是渐变如果是渐变的话,就可以使用上面提到的自由

变化工具自由控制

提一下,Blend里面的颜色是8位16进制的,如上面的#FF6E6228一般Adobe的颜色是

6个数值,Blend的后六位和Adobe的一样,就是RGB色值。前两位是透明度的意思,FF

就是不透明00就是0%的透明度

这里的RadiusX和RadiusY设置了圆角,为4PX。注意,Rectangle的圆角是四个角都一

样的,既无法只设置上面两个是圆角,下面两个是直角。真的需要这种形状时,可以使用布

局里面的Border,它可以对每个圆角进行设置!但是Border作为一种布局,它比Rectangle

耗性能的多。

Layout这里我设置了这个矩形宽120高40水平居中对齐,垂直底对齐,并且距离底边

(Margin)40个像素。

让这个矩形变成按钮!选中这个矩形后,点击Blend菜单栏上的Tools,下拉列表里面有一

个MakeButton,弹出如下对话框:

是滴,这个就是传说中的Style了,起个名字,点击OK。你发现你的矩形已经成为了一个

Button。

在属性面板的CommonProperties栏目,你可以更改button上的文案内容,在Text栏目,

你可以设置文字的样式

在Brush栏目,我们发现内容和刚才的不一样了(因为我们刚才选中的是一个Rectangle,

而现在这个东西已经是一个Button了!),通过修改Forground的颜色,你可以改变文字的

颜色。

经过一番改动,现在我们的按钮变这样咯:

现在的问题是,我怎么继续修改这个button的样式呢?或者说,我的矩形哪去了?

不着急,右键里有一个EditControlParts->EditTemplate这样我们就进入了编辑这个

样式的状态。

这时候你会发现,图层面板里面的内容变了,这里显示的是ButtonStyle的内容。我们的

Rectangle就在这里。

你可以在这里添加更多东西,把按钮搞得更加华丽。注意,ContentPresenter是自动生成

的按钮上文案的那个图层,如果删掉,字就不见了。

对于一个按钮,你可以通过触发器面板添加各种响应和事件(这里就不详述,之后更具体的

教程里再详细介绍)

双击画布区域,就可以回到外面的window编辑状态。

一个简单的按钮到这里就画好了!

Step3写“HelloWorld”

可以使用Lable、TextBlock写文字:

这里用了Lable,通过属性面板,你可以改变字体大小、颜色,布局都可以调整好,最后效果:

Step4增加事件

我们的任务是:点击按钮的时候,文字出现。

1.先隐藏文字

点击选中文字图层,在属性面板的Appearance栏目,把Visibility设置为Hidden

2.给按钮加事件

点击选中按钮,在触发器面板,点击“+Event”

下面设置为sraised点击右边的“+”

弹出了对话框,问我们是否创建一个Srotyboard,点ok

这个时候界面进入了动画编辑状态,出现了时间轴

我们在0秒处,选中textbox层,在属性面板,把它的Visibility设置为Visible

一系列操作后:

要暂停时间轴的记录,点击红色的按钮(你一定能看到的,这里就不截图了)

要退出这个Soryboard的编辑,点击上面截图里,OnClick1右侧的X(这个实在太

难找了。。之前我一直没找到。。)

Step5最后一步,运行!

按F5看看运行效果吧!

点击按钮后:

[原创]ExpressionBlend2教程2-一些特性和技巧

技术|工具2009-05-3013:45:34阅读239评论1字号:大中小

这篇我总结了自己在实际操作中理解的Blend的特点,以及积累起来的一些小技巧

因为我也没有系统的学习过Blend一切都是在摸索中前进…所以一些我的理解可能

并不正确,应该有很多是由于我的"无知"所造成的所以不敢保证本文绝对的正确

对于末尾提及的一些观点,欢迎讨论:)

在像素对齐方面存在很大问题是中文应用的一大瓶颈

·前篇介绍里面已经提到了,Blend里面是打不出来像素字体的,它的所有字体都是平

滑的。这使得设计师无法使用清晰易读的宋体,在平滑的情况下,雅黑的易识别性比宋体强

的多,也更美观:(截图被博客压缩…)

·Blend可以外部导入图片,但是你要小心图片的布局。如果你设置一个图片的位置不

是写死的,那它很可能会变得模糊。举个例子,我把图片放在Grid里面,图片的对齐方式

设置为居中对齐,Grid的宽度设置为自动适应窗口大小,如果我这样做,当窗口的宽为奇

数&图片本身宽为偶数时(或者窗口宽度为偶数&图片的宽度为奇数),图片就会变得模糊。

示例如下:(由于图片被博客压缩,效果不明显)

技巧:这个问题的解决方案,只有把图片的位置写死,尽量不要采用居中对齐的布局方

式,以保证图片是清晰的。但有时候多个布局层叠较深时,上一层的对齐方式,也会直接影

响图片的显示效果。这样就只有忍受了。这也就是为啥我说这是Blend的很大问题。

这些问题的根源可能是由于Blend是基于矢量绘图的,所以导致Blend制作的界面,和

其他软件界面看起来就不一样,感觉就是有点糊糊的。Flash也是矢量的,在图像方面同样

存在像素对齐不准、模糊的问题,但是Flash的文字却是清晰的像素字体。

2.设计师不知觉充当了前段开发的角色

应用Blend的一个最大优势在于,设计师用Blend制作好界面后,程序员可以直接拷贝

Xaml到程序里面。

实际上,Blend相当于一个自动生成代码的工具,设计师在不知觉中就完成了程序界面

部分的工作量。这也便是保障了软件的最后效果和设计师的设计稿完全一致的条件。

既然设计师完成了部分代码,那么就不可避免的需要考虑性能问题。

案例:在网易相册客户度的开发前期,作为团队中的美术,我也是临时起步现学现用的

Blend,当时我不考虑什么性能(其实当时的开发人员也不熟悉WPF,也不清楚什么影响性

能),我还是像使用PS一样的使用Blend,把界面的不同元素按组分类、层叠,以便于日

后的管理、修改。

后来技术说,Border比较耗性能、投影效果耗性能、层次太深耗性能……但是这些如

果让技术去改的话,直接就会导致了界面效果的变化,所以后来我又从头到尾的修改了界面

的层次结构,能用canvas的就不用Grid,能用Rectangle的就不用Border,原本的层次编

组太深的,也都改成钱层次的。

其实如果设计师一开始就知晓这些,设计的时候多留意一下,后期就不需要返工维护了。

技巧:

1、越是易用的布局,越是耗性能。Grid很强大,border很好用,canvas很难定位,但

是canvas效率最高。

2、图层的层次不要太深,结构不要太复杂。其实道理是一样的,在PS里面如果你编

组很多,组里面又嵌套很多组,你会发现这个PSD会变得很大,并且编辑的时候很卡。

3、给图层起有意义的名字。设计师得认识到,在Blend里面画的每一个图案,都是对

应在XAML里面的一段代码。程序员是会直接拷贝黏贴到工程里面的。为了使工程更易维

护,设计师最好给每个图层起一个有意义的名字,说明它是做什么的。比如我在画一个按钮

的高光时,这个图层就叫做“HeightLight”,画描边的图层就叫做“Border”…

这是一个很好的习惯,即使是使用PS也应该给每个图层取好名字。这种做法应该包含

在一个设计规范里面,这样做的好处在于当别的设计师要使用你的PSD的时候,就能很好

控制了,就像使用自己原创的PSD一样。在以前的工作中也遇到过类似的问题,当我要用

别人的PSD时,完全要疯掉了!一百多个图层,我想提取出一个元件,但是都有哪些图层

是属于这个元件的?!所以最好的做法,一起工作的人约定好PSD文档的结构规范,合理

的编组、命名。

3、WPF(Silverlight)项目的设计流程

建议的流程是:

1.用PS等设计软件,设计出软件的最终效果,或者叫概念稿

2.对照概念稿,和开发人员交流界面布局的方案。之所以要和开发交流,因为这步非

常重要!决定了整个界面的构架方式

3.使用Blend重绘概念稿,制作出最终的实现样式

其实大家会发现,相对于传统的网站项目,第一步是设计师做的,第二步和第三步实际

上是前端开发的工作。

但由于WPF的界面,和网页不一样(只要切图、再贴图就好了),WPF里面设计师要

用Blend来绘制界面,要使出来的界面直接可用,在上面提及的性能方面,设计师就要考

虑在内。而对于界面里的动画部分,就更加需要设计师来完成制作。设计师不可能通过文字

描绘说“我要这样的效果”,然后让技术去做出来。

总得来说,WPF的优点和缺点一样的明显。

对于新技术,个人观点,设计师必须摒弃只是做图片的想法。现在贴图的界面已经开始

过时了:网站产品,随着网络带宽的提升,国内也会流行起像日韩那样的Flash酷站;在软

件应用方面,传统的MFC窗口已经被看腻,我相信很快就会被类似WPF这种技术取代。

各种炫丽的应用很快就会冒出来。(这些炫丽的界面是否好,就是另外一个问题了)

未来的界面趋势肯定是动态的!设计师有了更大的发挥空间,作为代价,设计师需要

掌握更多的技能!

4、没事多按ctrl+S随时保存文档...

Blend还是挺耗性能的,爆机比较常见。。也可能我这台电脑比较慢吧。多保存总没错:

P

更多推荐

silverlight 教程