
2.2 BIend的使用
一个完整的使用Blend的效果如图2-12所示,即Blend的工作区域图示。

图2-12 Blend的工作区域图示
图中1号区域为文档窗体选择区,该区域用于显示所有已经打开的XAML文档,并将其按顺序排列,以便开发者可以方便地进行文档间的切换。
图中2号区域为Blend的开发模式选择键,其中上面的设计模式选择键被按下时,Blend的状态为设计模式,如当前图示所示;下面的XAML状态被按下以后,中间的设计页面将切换为代码状态,显示XAML代码。(需要注意的是,目前的Blend中尚不支持XAML语言的智能感知,如果进行XAML的开发,笔者建议大家使用Visual Studio 2008。)
Blend的整体开发环境有两种基本模式,即一般使用模式和设计模式,其页面布局的示意结构如图2-13所示。

图2-13 Blend的WorkSpace示意图
左侧图的模式为设计状态下的WorkSpace,其包含的内容分别为:1号区域为菜单项,2号区域为工具箱,3号区域为互动状态板,4号区域为主工作区,5号区域为信息和报错显示区域,6号区域为属性项目以及资源文档,其实际图形状态如图2-12所示。
右侧图显示的是动画状态下的工作区域示意,其中:1号区域为菜单,2号区域为工具箱,3号区域为互动菜单,4号区域为主工作区,5号区域为属性项目以及资源文档,其实际工作情况下的形制如图2-14所示。

图2-14 动画设计窗体工作区图
Blend中主工作区域的使用和设定
Blend中的主工作区域是设计的主面板,所有的设计和开发工作都是基于这一平台进行的。对其主要属性设定有3个方面,即背景线的设置、放缩设置及拖拽设置。
熟悉设计工具的设计人员都对背景线十分熟悉,这一工具为设计区域进行背景网格化绘制,让设计人员有明确的背景图示作为定位标示,以方便进行设计,其形制如图2-15所示。

图2-15 带有背景线网格的主设计区域
除背景线外Blend还提供了一个设计区域快照功能,即当设计人员把图形拖拽到设计主面板上的时候,在没有完全放开鼠标左键的时候,会在主设计区域显示一个被拖拽控件的区域样式,该区域以红色边框作为显示,让设计人员可以知道这个控件被拖拽过来之后会占据多大区域,红色示意线还会显示控件是否对齐。这一功能的使用如图2-16所示。

图2-16 拖拽控件显示区域示意
开启和关闭以上功能的设定在主设计区域下侧,即如图2-17所示的设置属性面板当中。

图2-17 网格线设置属性面板
面板左侧的百分数设定用于设置主设计区域的显示与实际尺寸的比率。百分比右边的第一个图示 用于显示背景线,这是一个状态形开关,单击一次以后图标变成
,此时背景线被隐藏起来,再次单击则会显示成原来的
,背景线再次出现。
右边第二个按钮 用于标示一个被拖拽的控件和背景线之间的对齐关系,单击之后图标变成
,此时不再显示拖拽控件与背景线对齐关系,再次单击则图标会恢复成原来的
,此时拖拽控件与背景线的显示关系会再次出现。
右边第一个按钮 用于标示一个被拖拽的控件和另一个被拖拽控件之间的对齐关系,单击之后图标会变成
,此时不再显示拖拽控件与拖拽控件之间的对齐关系,再次单击则图标会恢复成
,此时拖拽控件之间的对齐关系会再次显示。
对主设计区域的放大和缩小设定有两种方法,其一是使用Zoom工具来实现;其二是使用网格线设置属性面板(如图2-17所示)左侧的百分比设置工具。
在工具箱中有一个用于放大和缩小的工具Zoom,此工具可以用来设置主设计区域的显示比率,在默认情况下其在设计区域显示形状为
,此时单击鼠标左键就会对主设计区域进行放大,按住Alt键再使用缩放工具,其显示形状为
,此时单击鼠标左键会对主设计区域进行缩小操作。
除了使用这个工具以外,在View菜单中还有两个选项分别为Fit to Screen和Actual Size,其中Fit to Screen用于把正在设计的产品放大到整个区域,而Actual Size则是把主设计区域的内容按照实际尺寸显示。
最后一个比较重要的工具是所谓的Hand工具,很多设计软件都有这个工具,这个工具可以用于对主设计区域进行各种方向的拖拽,其在工具箱中的图标是,酷似一只张开的手掌,使用时单击鼠标左键然后拖拽鼠标,即可实现对主设计区域的拖拽。
设计区域中的另外一个重要角色是工具箱,如图2-18所示。

图2-18 ToolBox(工具箱)
在图2-18中:
红色区域1为选择区域工具,这一工具用于在主设计区域进行区域选择,选中此工具之后按住鼠标左键并进行拖拽可以把拖拽区域中的所有内容选中,也可以直接在某个控件上单击用于选中这个区域,这一控件的快捷键为“V”。
红色区域2为显示区域,包括我们刚刚介绍过的放大和缩小工具、拖拽设计面板工具,以及用于对3D设计进行镜头变换的工具。
红色区域3是刷子工具区域,专门用于着色和颜色获取,并可以对窗体控件进行颜色变换设定(关于刷子对象的详细设定可以参考后面的章节)。
红色区域4是对象工具,包含了Silverlight中常用的各种控件,其内容可以划分为蓝色标记所显示的5类区域。
· 第1类蓝色区域是笔形绘制工具,这一工具用于绘制线条。
· 第2类蓝色区域为封闭式图形绘制工具,这一类工具可以用来绘制矩形、椭圆以及直线。
· 第3类蓝色区域为布局类控件,专门用于在设计页面上摆放控件时进行布局设定,让各种控件能够被摆放在指定位置。
· 第4类蓝色区域为文本绘制区,这一区域的控件主要用来绘制文本和承接用户输入文本。
· 第5类蓝色区域为通用控件区域,这一部分放置了常用的按钮控件、单选和复选按钮控件等常用控件。(第4章专门介绍了相关内容。)
红色区域5是附加控件区域,可以用来附加用户自定义的控件,单击最下面的按钮会出现如图2-19所示的扩展控件库。

图2-19 扩展控件库
扩展控件是通过加载其他含有Silverlight控件定义的DLL文件来实现加载新控件的,关于自定义控件的使用和加载在第4章有更为详细的介绍。
在图2-19中:
1号区域为搜索栏,在此输入要寻找的控件名称关键字,就可以在本地的DLL文件当中寻找这一控件。
2号区域是设置以何种方式显示控件,当选择Gallery的时候只会显示控件的缩略图,如图2-19中所示,选择Details的时候则会显示所有控件的详细路径和名称描述,如图2-20所示

图2-20 Details模式下的显示
3号区域为正常控件的内容显示。
4号区域是复选框,此选项用于设定是否显示所有的控件。
5号区域用于选择所加载的控件所存在的名字空间。
6号区域为设置默认内容的选择区域。
工程管理窗体如图2-21所示。

图2-21 工程管理窗体
在图2-21中:
区域1是工程引用区域,包括工程内部的DLL文件;
区域2是资源目录,包括应用程序中所包含的逻辑代码和可执行程序代码;
区域3是项目中包含的引用资源;
区域4是本地资源文件,包含本地的资源信息;
区域5是后置逻辑代码;
区域6是数据源选项;
区域7是数据源列表。
属性面板用于对控件和物体的属性进行配置,其功能在所有面板中最为丰富复杂(见图2-22),下面我们对其功能一一介绍一下。

图2-22 属性面板图示
红色区域1是选择对象的细节介绍。
红色区域2是切换显示状态按钮,该按钮决定显示的是属性窗体还是事件窗体。
红色区域3用于在诸多属性中找到你需要调用的那个,它通过输入一个关键字进行搜索。
红色区域4用于选择对控件填充时所使用的刷子种类,关于刷子对象和绘制方式在下一章会有详细的介绍。
红色区域5用于对刷子的属性进行详细配置,
红色区域6是对刷子对象进行编辑,通过这个工具可以设置出符合自己审美的刷子对象。
红色区域7、8、9、10都是颜色设置区域,其中7是颜色编辑器;8是本地资源中可调用的颜色;9是获取当前区域的颜色选择器,这一器具类似于可以从屏幕上指定区域吸取墨水的吸管,可以获取屏幕上指定区域的颜色设定;10是使用RGB颜色对颜色进行设置。
红色区域11是Alpha通道设置。
红色区域12是颜色样本设置区,分别保存了初始颜色和当前颜色。
红色区域13用于对显示颜色样本进行微调。
红色区域14可以把一个颜色转变成本地资源,以便以后再次复用。
红色区域15是使用十六进制形式来显示颜色。
红色区域16、17、18、19是设置梯度变化的部分,关于色阶的梯度变化在下一章我们进行讲解。
蓝色区域1是刷子种类选择器,通过这个工具可以选择不同刷子对象。
蓝色区域2是外观显示器的选择器,通过这个工具可以选择显示的样式。
蓝色区域3是布局显示选择器,通过这个工具可以选择布局样式。
蓝色区域4是通用属性选择器,通过这个工具可以选择属性样式。
蓝色区域5是文本选择器。
蓝色区域6是变形工具选择器,关于变形工具的使用在介绍动画的章节有详细讲解。
蓝色区域7和蓝色区域8是混合工具选择器。
蓝色区域9和蓝色区域10是3D造型应用专用的光源和视角切换选择器。
资源文件面板如图2-23所示。

图2-23 资源文件面板
红色区域1是创建新的资源文件夹按钮,单击之后会创建新的资源文件文件夹。
红色区域2为显示的资源文件创建选择器,用于确定资源文件类型。
红色区域3已经存在于当前项目中,应用程序级的资源文件信息。
红色区域4为各种不同样式的资源文件定义。
红色区域5为一个资源文件链接。
红色区域6为被定义过的资源文件信息。
红色区域7为文档级的资源文件。
红色区域8为对象级资源文件。