top-silverlight | Just another WordPress weblog

三/09

10

Expression Blend 入门教程

原文:http://silverlight.jc.jishu.me/meigong_sl/ExpressionBlend.html

教程中使用的是Expression Blend 2.0 sp1版本。

2.1.  启动Expression Blend

  开始菜单 > 程序 > Microsoft Expression > Microsoft Expresion Blend 2点击动行!如图2.11所示

 

Expression Blend
 图2.11

 

2.2.  新建项目

  主菜单中选择:文件(F) > 新建项目(W),这会出现“图2.21”的界面,这时在“位置”中选择一个保存的位置,Expression Blend会建立项目需要的一些文件:“bin,obj,Properties,App.xaml,App.xaml.cs,Page.xaml,Page.xaml.cs, sl1.csproj”。并进入了设计界面。这时建立一个Silverlight项目对应生成一个.xap文件。

 

Expression Blend

图2.21

 

2.3.  切换视图

为了更灵活的办公,设计试图的另换切换可以带来很大的方便。这时您可以按“Shift”快捷键,这时界面属性和状态时间轴面板都就隐藏了,为您承让出更多的空间任意发挥创意了!

 

菜单中选择:窗品(W)> 活动工作区(A)> 动画工作区(A),这时您的环境布局有了很大的改变。这时您还可以在菜单中选择:窗品(W)> 活动工作区(A)> 设计工作区(A)切换到您想要的布局模式。

 

平移快捷键:您可以把美工板中任意画上些内容,在工具框中选择工具后,在画面点下鼠标移动后放开即可。然后可把左下角的Expression Blend设为800%。这时按下空格同时,在美工板拖拽,就可以实现移动画布的显示位置。

 

代码和设计模式切换,菜单中选择:视图(V)> 活动文档视图(V) 下面进行切换代码或设计模式。

 

设计布局

 

在左下角的美工板里,有Expression Blend辅助设计视图,分别为“显示/隐藏对齐网格”,“启用/禁用网格线对齐”,“启用/禁用对齐线对齐”。您可以灵活的试试,使工作变的轻松些。

 

2.4.  颜色

  在Silverlight中使用的颜色是8位16进制的,其中前两位是透明颜色。

 

示例:属性面板改变按钮的字体颜色、背景颜色

 

第一步:在工具框中选择Expression Blend按钮控件,在美工板中绘制一个按扭,并选中如“图3”所示。

 

Expression Blend

图3

 

第二步:打开属性面板菜单:窗口(W)> 属性(T),打开属性面板,如“图2.41”所示。

 

Expression Blend

图2.41

 

其中Background为背景颜色,Foreground为前景(文字颜色)颜色,点击图中所示的Background,然后再在下面的调色板中进行选择想要的颜色。然后点击Foreground,然后在下面选择想要的字体颜色。

 

2.5.  属性面板

  设计手里的法宝,因为在属性面板中,每一个控件(路径、按扭、文本)的内容是不一样的,所以建议朋友自由查看,并找出其中则律才是成功之道。下面更出常见属性的解示,供需要朋友查询:

 

名称/图标 说明 名称/图标 说明
Background 背景色 BorderBrush 边框颜色
Foreground 字体颜色 OpacityMask 一个作为Brush实现的不透明蒙版,该蒙版应用到此元素所呈现内容任何Alpha通道蒙板。
Fill 控件内部填充的颜色 Stroke 边框的颜色
ZIndex 层次,如果两个控件的某个部分都在一个像素中,其这时会显示ZIndex大的控件像素 ToolTip 鼠标上去控件,提示的信息。
VerticalAlign 竖向对齐 HorizontalAlign 横向对齐
Opacity 透明度 BorderThickness 上下左右里各边框的粗丝。
Visibility 是否可见 值:显示/隐藏 Content 内容,一般为文本框中的数据。
Margin 控件与父控件的距离。 Padding 控件内部的填充距离,填出边距指在对象和其它子控件的边框之间的距离。默认零
Width 宽(像素) Height 高(例素)
Cursor 当控件放在控件上时,鼠标的形状。 IsHitTestVisible 该值声明是否可以返回此元素作为其呈现内容的某些部分的点击测试记过。
Row Grid表格控件中第几行中出现 Column Grid表格控件中第几个列中出现
RowSpan Grid表格控件中横向跨单格出现,如2,向右出现在两个单元格中。 ColumnSpan Grid表格控件中坚向跨单元格显示,如2,向下出现在2个单元格中。
IsTabStop 控件是否包含在Tab键定位中。换句话说就是按Tab时是否在控件中停留焦点。 TabIndex 一个值,该值决定元素的逻辑定位顺序。
Tag 任意对象值,该值可用于存储有着于元素的自定义信息。(换句话说,不用也行) FontStretch 字体在屏幕上紧缩或加宽的程度。默认值是Normal
FontStyle 设置字体形状,可以把字体设为斜体 FontWeight 设置字体的粗细程度
RenderTransform 影响此元素的呈现位置的转换信息。呈现转换通常用于动态显示元素的临时效果或者向元素的临时效果。变形器。 IsEnable 是否启用,激活状态。
Clip 用于定义元素内容轮廓的几何图形。几何图形之外的元素或内容将从视觉上在呈现的布局中剪切掉。名词:遮罩! RenderTransformOrign xy两个数组组成。呈现转换相对于元素 边界的中心点。
MaxWidth 最大宽度约束 MaxHeight 最大高度约束
MinWidth 最小宽度约束 MinHeight 最小高度约束
HorizontalScrollBarVisibility 横向滚动条选项显示 VerticalScrollBarVisibility 竖向滚动条显示选项

2.6.  Silverlight常用控件介绍

 

形状 名称 控件
Expression Blend Path 路径 可以化出各种各样的图形。
Expression Blend Button按扭 使用者选择点击,出发程序代码。
Expression Blend Canvas画布 使用的固定坐标,适应与自由布局。
Expression Blend CheckBox复选框 通过选中,获取使用者的操作。
Expression Blend StackPanel堆叠 自动布局的容器控件,使里面的子控件按顺序显示。
Expression Blend Grid 网格 可以定义多个单元格,使布局更整齐。
Expression Blend Image 图像 用与显示指定的图像文件。
Expression Blend Line 直线 直线图形
Expression Blend Border 边框 容器控件,可以定义丰富的边框,和背景定义。
Expression Blend Password密码框 用与输入密码
Expression Blend RadioButton单选框 用与多个选项只可选一值时使用。
Expression Blend Path 铅笔 更简单的方式创建Path对象。
Expression Blend Rectangle 矩形 矩形图形
Expression Blend ScrollBar 滚动条 一般用在显示一个控件的哪个部份的控件。
Expression Blend ScrollViewer放大局部器 个允许您滚动其中所含的子元素的元素。该元素仅包含单个子元素。因此在大多数情况下,需要在其中使用堆叠面板、画布面板或网格面板等版式面板。“ScrollViewer”可用于其他控件(如列表框)的模板中,以支持内容滚动功能。当“ScrollViewer”中的内容过多时,可以启用内容剪切。还可以对滚动条进行控制,令其处于不可用、隐藏或可见状态,或者使其仅仅在需要时自动显示。
Expression Blend ListBox列表控件 显示多个数据,由使用者选择。常用与多的数据,可以绑定。
Expression Blend Slider 滑块 设置一个最大或最小值,通过滑块设置或获取其比例中的值。
Expression Blend TextBlock 文本块 显示有格式文本,可在属性框中按需要定义
Expression Blend TextBox 输入框 可以输入键盘输入的文本框
Expression Blend Ellipse 椭圆形 创建椭圆形状。
Expression Blend Media Element 媒体播放元素 支持在线播放mp3.wma.wmv格式音频视频格式,支持流媒体mmsrtsp协议。


No tags

No comments yet.

Leave a Reply

<<

>>

Theme Design by devolux.nh2.me