Blend4实例中文教程_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Blend4实例中文教程
上传于||文档简介
&&B​l​e​n​d实​例​中​文​教​程
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
下载文档到电脑，查找使用更方便
还剩119页未读，继续阅读
你可能喜欢Expression Blend_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Expression Blend
上传于||暂无简介
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
下载文档到电脑，查找使用更方便
还剩33页未读，继续阅读
你可能喜欢查看: 6667|回复: 4
精华6在线时间260 小时帖子主题UID30691积分8128技术分3317 资源分319 分享激情2877 博客好友记录相册
高级工程师
巡抚, 积分 8128, 距离下一级还需 1872 积分
UID30691积分8128
练习二：用Expression Blend 设计wp7应用程序用户界面
& & & & 你用可以使用Expression Blend设计基于桌面的富客户端网络应用程序，你也可是设计出Windows phone 的基于Silverlight的应用程序。 Expression Blend for Windows Phone
允许你创建基于XAML接口的Windows Phone 应用程序，它的事件行为可以在Visual Studio中设置。
& & & &&&Expression Blend for Windows Phone被包含在Windows Phone开发工具中了。
& & & & 例子一：用Expression Blend创建一个自定义的Button
& & & & & & & & 一般情况下，Silverlight控件用模板将界面和逻辑分开。一个ControlTemplate指定一个控件的可视化的结构和可视化的行为。你能修改它们的默认的ControlTemplate
& & & & 的设置来自定义大部分控件的显示状态。允许你在不修改控件对应函数功能的情况下修改控件的显示状态。例如，你能将你的应用程序中的方块按钮修改成圆形按钮，而原
& & & & 先得按钮事件Click仍然保留。
& & & & & & & &
& & & & & & & & 在这个例子中，你用 Expression Blend 打开在前面练习中创建的HelloPhone的Visual Studio工程、修改程序中按钮的ControlTemplate的设置，改变按钮的外观。
& & & & 因为你在XAML中在ControlTemplate，你能不写任何代码的情况下修改控件的外观。
& & & & & & & & & & & & & & & & & & & & & & & && && && && && &
21:41:45 上传
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 图一： 改变控件的外观和体验
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &
& & & & & & & & 1. 用Visual Studio 2010打开前面创建的工程 HelloPhone.
& & & & & & & &
& & & & & & & & 2. 现在用 Expression Blend 打开当前的项目。方法是：在Visual Studio中，选择MainPage.xaml单击右键，选择 Open in Expresssion Blend.
& & & & & & & && & 如果有警告提示，选择Yes忽略它.
& & & & & & & & & & & & & & & & & & & & & & & & & & & &
21:41:47 上传
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&图二： 用Express Blend打开项目工程
& & & & & & & & 3. 在Expression Blend中，确定打开了MainPage.xaml，如果有必要的话，双击Project面板打开它- 当前的的workspaces被设置为Design. 去看当前的workspaces
& & & & & & & && & 在Windows菜单中确定Design选项被选中。
& & & & & & & && && && && && && && && && && && && && &
21:41:49 上传
& & & & & & & && & & & & & & & & & & & & & & & & & & & & & & & & &&&图三： 在Expression Blend中，选择当前workspace
& & & & & & & &
& & & & & & & & 4. 在设计窗口，右击&Click Me&按钮，选择Edit Template，在选择Create Empty.
& & & & & & & &
& & & & & & & & 5. 在Create ControlTemplate Resource对话框中，设置Name为FancyButton,保持当前的&This document&在Define in选项下，点击Ok.
& & & & & & & && && && && && && && && && && && && &&&
21:41:53 上传
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&图四： 创建一个空的按钮控件模板
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&
& & & & & & & & & & & &&&注意： 资源提供了一个简单的方法重用已经被定义的通用对象和值.你能定义一些通用的item,比如控件的模板、样式、画刷、颜色、和动画效果，并且
& & & & & & & & & & & &&&& & & & & & & & & & & & & & & & 将他们存储在资源字典中。一个资源字典是有关键字对象的字典。它能用在XAML和代码中。你能在你的应用程序构架中创建你的资源字典的使用
& & & & & & & & & & & &&&& & & & & & & & & & & & & & & & 范围，是页面内部使用合适整个应用程序都使用。上面的对话框给你一种选择定义全局Application范围的控件模板，在那例子中它被存放在
& & & & & & & & & & & &&&& & & & & & & & & & & & & & & & App.xaml中，这样你能在整个应用程序中使用这个模板，或者你也能将它存在This document这样你只能在同一页面内使用这个控件模板。
& & & & & & & & & & & &&&& & & & & & & & & & & & & & & &
& & & & & & & & 6. 如果object and Timeline面板不可见，选择菜单Window 在选在Objects and Timeline，这样就可以看到这个面板了。如果有必要你能重置workspace到
& & & & & & & & & & & &&&到软件的默认状态。
& & & & & & & & & & & &&&
& & & & & & & & & & & &&&注意：当你创建一个新的模板时，Expression Blend输入一个模型，在这个模型上你可以查看和修改为新的模板。在Object and Timeline面板内，word
& & & & & & & & & & & && && &&&面板在在新的元素数的根部，指示你编辑控件的模板的适用范围。
& & & && &
& & & && &7. 改变当前模板的根不具容器.在Object and TimeLine面板中，在模板里面右击Grid， 指向Change Layout Type，然后选择Border。
& & & && && && && && && && && && && && && &
21:42:00 上传
& & & && && && & & & & & & & & & & & & & & & & & & & & & & &&&图五： 改变模板的根布局容器
& & & && && & & & & & & & 注意：当你创建一个ControlTemplate时，你合并FrameworkElement对象为一个单独的控件.一个ControlTemplate必须有一个FrameworkElement作为
& & & && && & & & & & & && && & 它的根元素。根元素通常包括其他的FramewrokElement对象.合并在一起的对象由控件的可见框架构成的。
& & & && && & & & & & & && && &
& & & && &8. 在Object and TimeLine面板上，Border被选中后，在Properties面板下的Appearance中，设置BorderThickness属性边的值为2，然后设置CornerRadius
& & & && && &在属性值为15。
& & & && && && && && && && && && && && && && && && &
21:42:03 上传
& & & && && && & & & & & & & & & & & & & & & & & & & & & & && &&&图六： 配置border元素的外观
& & & && && && & & & & & & & & & & & & & & & & & & &
& & & && &9. 现在，在Brushes选项中，选择Background属性并且点Gradient brush选项，然后点击the left gradient stop（下图的最下边左边用红色圆圈括住的控件）,
& & & && && & & & 选择后设置颜色值，例如： #FFADADAD。 接着设置select the right gradient stop的颜色值为 #FF0A0A0A（下图的最下边右边用红色圆圈括住的控件）.
& & & && && & & && && && && && && && && && && && && && &&&
21:42:08 上传
& & & && && & & & & & & & & & & & & & & & & & & & & & & && & 图七：为按钮背景配置一个渐变颜色的画刷
& & & && && & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &
& & & && &10. 然后，在Brushes 选项中，选择BorderBrush属性，选择一个Solid color brush 选择一个浅灰色的值，例如#FFC0C0C0.
& & & && && & & & & & & & & & & && && && && && && && &
21:42:13 上传
& & & && && & & & & & & & & & & & & & & & & & & & & & & && &图八：为按钮边框配置一个solid brush
& & & && && & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &
& & & && &11. 一旦你创建了按钮的背景，下一步就是增加一个标题。第一，确定Border在Object and Timeline面板中仍然被选中。
& & & && &
& & & && &12. 然后，转换到Assets面板，选择Controls目录，在下拉框中选择TextBlock控件。然后双击它，就将他插入到Border元素中。
& & & && && && && && && && && && && && && && && && &
21:42:16 上传
& & & && && & & & & & & & & & & & & & & & & & & & & & & & 图九： 从工具箱中插入一个TextBlock控件
& & & && && & & & & & & & & & & & & & & && && && && &&&
21:42:18 上传
& & & && && & & & & & & & & & & & & & & & & & & & & & & & 图十： 在Object and Timeline下显示，在Border元素中插入一个TextBlock
& & & && && & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &
& & & && &13. 现在，在Tools面板中，点击Selection tool最上面的图标或者选择键盘V，重新恢复选择模式。
& & & && && & & & & & & &
& & & && && & & & & & & & & & & & 注意：插入TextBlock后，设计者仍然是在插入模式下你能继续增加其他的TextBlock元素，直到你退出这个模式。
& & & && &
& & & && &15. 在Objects and Timeline面板下，选择新增加的Textblock元素。然后再属性面板内，打开Brushes目录，设置Foreground画刷为前颜色，例如： #FFFFFFFF.
& & & && && && && && && && && && && && && && && && && &
21:42:22 上传
& & & && && & & & & & & & & & & & & & & & & & & & & & & & & & 图十一： 设置按钮的foreground颜色
& & & && && &
& & & && &16. 下一步，打开Layout目录，设置 HorizontalAlignment 和 VerticalAlignment 属性值为Center. 然后设置Margin属性值为10为左右两边，设置顶部和底部
& & & && && & 的值为4。
& & & && && && && && && && && && && && && && &
21:42:25 上传
& & & && && & & & & & & & & & & & & & & & & & & & & && && & 图十二： 配置标题的页面距和布局属性
& & & && && & & & & & & & & & & & & & & & & & & & & & & & & & & & & &
& & & && &17. 设置TextBox控件的Text属性到按钮模板控件的Content属性值。方法如下：
& & & && && & & & & & & &
& & & && && & & & & & & & 1. 打开Common Properties目录
& & & && && & & & & & & & 2. 点击Advanced property options- 在属性值旁边的一个方块图标，如下图中被红色标框提示。
& & & && && & & & & & & & 3. 选择Template Binding展示属性列表，这些属性能被绑定。
& & & && && & & & & & & & 4. 从列表中选择Content属性
& & & && && && && && && && && && && && && && &
21:42:26 上传
& & & && && & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 图十三： 绑定Text属性到模板上
& & & && && &
& & & && &18. 点击CTRL+5保存更新的文件。
& & & && && & & & & & & & 你现在能测试新的自定义的按钮。 Expression Blend for Windows Phone允许在手机上或者模拟器上运行你的应用程序。注意如果你打开Device模板，
& & & && && & & & & & & & 你选择在那个上面测试你的应用程序。默认情况下使用模拟器来运行应用程序。
& & & && && & & & & & & && && && && && && && && &
21:42:28 上传
& & & && && & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&图十四：绑定Text属性刀模板上
& & & && && & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&
& & & && &19. 点检F5运行测试程序。在文本框中输入字符串，然后点击按钮。
& & & && && && && && && && && && && && && && && && &
21:42:31 上传
& & & && && & & & & & & & & & & & & & & & & & & & & & & & & & & && && && &图十五： 从 Expression Blend for Windows Phone从启动一个应用程序
& & & && && & & & & & & &
& & & && && & & & & & & & 注意：即使点击触发了期望的行为事件，但是没有显示按钮是焦点或者什么时候它被按下。在下边的例子中，你将更新你的模板，根据状态来改变按钮的状态。
& & & & 例子二：在按钮上增加状态的变化
& & & & & & & &
& & & & & & & & 在这个例子中，你将修改你的模板，点击按钮时，按钮显示焦点，然后再非按钮区域点击时，按钮会取消焦点。
& & & & & & & &
& & & & & & & & 1. 在Object and Timeline面板下，选择Border控件。
& & & & & & & &
& & & & & & & & 2. 现在，转到State面板，查看按钮的可用状态。
& & & & & & & && && && && && && && && && && && && && &&&
21:42:33 上传
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & && && && &图十六：状态面板显示可用的状态
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &
& & & & & & & & & & & & 注意：State状态显示所有的可用的控件状态。在这个状态下，你自定义模板区定义基本的显示。然后每一个状态你改变模板来和你的状态向匹配，例如
& & & & & & & & & & & & & & & & & & & & & & & & 在焦点状态下，按钮周围有包围框。
& & & & & & & & & & & & & & & & & & & & & & & &
& & & & & & & & 3. 在ForcusStates目录下，选择Unfocused状态，这时按钮在没有焦点情况下的显示。
& & & & & & & && && && && && && && && && && && && && && &
21:42:38 上传
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&图十七：状态记录
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&
& & & && &4. 隐藏按钮的包围框，当按钮失去焦点时：
& & & && && &
& & & && && &1. 在Object and Timeline面板下选择Border
& & & && && &2. 在Properties面板下，打开Brushes目录选择BorderBrush属性
& & & && && &3. 点击Show advanced properties图标，设置Opacity属性值为0
& & & && && && && && && && && && && && && && &
21:42:43 上传
& & & && && && & & & & & & & & & & & & & & & & & & &
& & & && && && & & & & & & & & & & & & & & & & & & & & & & & 图18：当失去焦点时，按钮的包围框透明
& & & && && && & & & & & & & & & & & & & & & & & & & & & & &
& & & && &5. 转到States面板选择Pressed状态，保存鼠标点击时的状态变化。
& & & && &
& & & && &6. 在Properties面板下，打开Transform目录，选择Translate。设置X和Y的值为2。这样当按钮被点击时，就稍微的改变了按钮的位置，去表明他被按下了。
& & & && &
& & & && && && && && && && && && && && && &
21:42:49 上传
& & & && && & & & & & & & & & & & & & & & & & & & & & & & 图19： 在按下后按钮移动
& & & && && & & & & & & & & & & & & & & & & & & & & & & & & & & &
& & & && &7. 最后，在States面板中，选择Base模板区关闭记录模式。
& & & && &
& & & && &8. 保存更新
& & & && &
& & & && &9. 运行程序，测试效果。注意观察下面情况；
& & & && && & & & & & & &
& & & && && & & & & & & & 1. 在文本框中输入文字，点击Tab是按钮获得焦点
& & & && && & & & & & & & 2. 注意，当按钮获得焦点后，包围框包围了按钮，说明他被激活了
& & & && && & & & & & & & 3. 现在，点击按钮看他的位置是怎么改变的来表明它被按下
精华6在线时间260 小时帖子主题UID30691积分8128技术分3317 资源分319 分享激情2877 博客好友记录相册
高级工程师
巡抚, 积分 8128, 距离下一级还需 1872 积分
UID30691积分8128
昨天晚些翻译的内容， 因为网站当时访问不了，就今天发了。发贴时没有注意，格式有也不对，也不知到怎么修改。翻译水平有限，见谅！
精华0在线时间1057 小时帖子主题UID103412积分21417技术分2723 资源分1278 分享激情9067 博客好友记录相册
高级工程师
内阁大臣, 积分 21417, 距离下一级还需 28583 积分
UID103412积分21417
精华0在线时间107 小时帖子主题UID102663积分3507技术分1334 资源分113 分享激情1410 博客好友记录相册
知县, 积分 3507, 距离下一级还需 1493 积分
UID102663积分3507
精华0在线时间7 小时帖子主题UID319948积分454技术分155 资源分17 分享激情134 博客好友记录相册
实习工程师
县吏, 积分 454, 距离下一级还需 46 积分
UID319948积分454
DEVDIV博主
十级贡献勋章
十级贡献勋章
九级光辉勋章
九级光辉勋章
八级荣誉勋章
八级荣誉勋章
七级卓越勋章
七级卓越勋章
六级尊贵勋章
六级尊贵勋章
五级至尊勋章
五级至尊勋章
四级英才勋章
四级英才勋章
三级英豪勋章
三级英豪勋章
二级精英勋章
二级精英勋章
一级王者勋章
一级王者勋章
及时将最新信息发给我
通过Email及时将最新的模板和服务发给我。
及时了解我们最新动态。关注我们的微博
官方微博: &&&7984人阅读
C#开发/WPF/Entity/WinForm/C#游戏
转载请标明是引用于
在VS2010+C#+WPF 开发项目过程中涉及到界面的布局与设计，网上有人讲采用Expression Design 4与Expression Blend 4工具相当方便，
于是决定试看看，下面将这个过程与大家分享。
一、安装目的
尽管程序员可以使用VS编写XAML代码的方式来构造用户界面，但是对于有设计爱好的用户来说，使用类似Photoshop一样的Expression套件能将
软件美工最大化。设计过程是先使用了Expression Design来设计图形，然后将其导入到Expression Blend中进行布局处理。
二、Expression Design
1、Expression Design简介
Expression Design 是一个专业的图表和图形设计工具。该工具提供了矢量图形的绘制能力，强大之处可以像PhotoShop一样设计好用户界面或是所需要量的图形，
使用其导出功能导出为XAML资源或代码。
2、获得方法
若是Expression Design 4与Expression Blend 4要一起安装，那么请参考本文第二大点中讲到的步骤；
若是只是想安装Expression Design4，那么通过下面的方法；
首先进入微软（中国）下载中心，搜索expression design，在搜索的结果中选择Expression Web 4下载，得到的安装包大概有二百多M。
然后运行安装包进行安装，安装时选择第二项Expression Design 4。
安装完成后，程序菜单中就会出现Microsoft Expression组，其中就有Microsoft Expression Design 4了。
主界面如下：
三、Expression Blend 4
1、Expression Blend简介
&&Expression Blend（下称Blend），是一款用于设计桌面和Web应用用户界面的可视化工具。用户可以通过拖拉控件方式创建用户交互界面；另外Blend中，包含一款软件原型建模工具SketchFlow， 该工具允许用户快速开发出专业的项目原型，创建设计原型后，以丰富的界面效果展示给客户，该工具将在后文详细讲述。
2、 获得方法
与Expression Design 一样，它是从微软（中国）下载中心下载。
&& 下地地址：
得到的安装&& ExpressionStudio_UltimateTrial_zh-Hans.exe&& 文件有300多M，
这么大是因为它将四种组件都包含进来了，有：
大家可以看到通过它也可以安装Expression Design 4。
因为我们只用Expression Blend 4所以只勾选第二项。
安装成功后的主界面：
&参考文章：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1714053次
积分：19205
积分：19205
排名：第277名
原创：243篇
转载：265篇
评论：425条
(1)(2)(5)(1)(1)(1)(2)(5)(4)(1)(1)(4)(3)(2)(6)(5)(14)(6)(4)(29)(20)(33)(25)(45)(49)(61)(55)(56)(69)}