转自:http://www.devdiv.com/thread-36212-1-1.html
你用可以使用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,你能不写任何代码的情况下修改控件的外观。
图一: 改变控件的外观和体验
1. 用Visual Studio 2010打开前面创建的工程 HelloPhone.
2. 现在用 Expression Blend 打开当前的项目。方法是:在Visual Studio中,选择MainPage.xaml单击右键,选择 Open in Expresssion Blend.
如果有警告提示,选择Yes忽略它.
图二: 用Express Blend打开项目工程
3. 在Expression Blend中,确定打开了MainPage.xaml,如果有必要的话,双击Project面板打开它- 当前的的workspaces被设置为Design. 去看当前的workspaces
在Windows菜单中确定Design选项被选中。
图三: 在Expression Blend中,选择当前workspace
4. 在设计窗口,右击"Click Me"按钮,选择Edit Template,在选择Create Empty.
5. 在Create ControlTemplate Resource对话框中,设置Name为FancyButton,保持当前的"This document"在Define in选项下,点击Ok.
图四: 创建一个空的按钮控件模板
注意: 资源提供了一个简单的方法重用已经被定义的通用对象和值.你能定义一些通用的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。
图五: 改变模板的根布局容器
注意:当你创建一个ControlTemplate时,你合并FrameworkElement对象为一个单独的控件.一个ControlTemplate必须有一个FrameworkElement作为
它的根元素。根元素通常包括其他的FramewrokElement对象.合并在一起的对象由控件的可见框架构成的。
8. 在Object and TimeLine面板上,Border被选中后,在Properties面板下的Appearance中,设置BorderThickness属性边的值为2,然后设置CornerRadius
在属性值为15。
图六: 配置border元素的外观
9. 现在,在Brushes选项中,选择Background属性并且点Gradient brush选项,然后点击the left gradient stop(下图的最下边左边用红色圆圈括住的控件),
选择后设置颜色值,例如: #FFADADAD。 接着设置select the right gradient stop的颜色值为 #FF0A0A0A(下图的最下边右边用红色圆圈括住的控件).
图七:为按钮背景配置一个渐变颜色的画刷
10. 然后,在Brushes 选项中,选择BorderBrush属性,选择一个Solid color brush 选择一个浅灰色的值,例如#FFC0C0C0.
图八:为按钮边框配置一个solid brush
11. 一旦你创建了按钮的背景,下一步就是增加一个标题。第一,确定Border在Object and Timeline面板中仍然被选中。
12. 然后,转换到Assets面板,选择Controls目录,在下拉框中选择TextBlock控件。然后双击它,就将他插入到Border元素中。
图九: 从工具箱中插入一个TextBlock控件
图十: 在Object and Timeline下显示,在Border元素中插入一个TextBlock
13. 现在,在Tools面板中,点击Selection tool最上面的图标或者选择键盘V,重新恢复选择模式。
注意:插入TextBlock后,设计者仍然是在插入模式下你能继续增加其他的TextBlock元素,直到你退出这个模式。
15. 在Objects and Timeline面板下,选择新增加的Textblock元素。然后再属性面板内,打开Brushes目录,设置Foreground画刷为前颜色,例如: #FFFFFFFF.
图十一: 设置按钮的foreground颜色
16. 下一步,打开Layout目录,设置 HorizontalAlignment 和 VerticalAlignment 属性值为Center. 然后设置Margin属性值为10为左右两边,设置顶部和底部
的值为4。
图十二: 配置标题的页面距和布局属性
17. 设置TextBox控件的Text属性到按钮模板控件的Content属性值。方法如下:
1. 打开Common Properties目录
2. 点击Advanced property options- 在属性值旁边的一个方块图标,如下图中被红色标框提示。
3. 选择Template Binding展示属性列表,这些属性能被绑定。
4. 从列表中选择Content属性
图十三: 绑定Text属性到模板上
18. 点击CTRL+5保存更新的文件。
你现在能测试新的自定义的按钮。 Expression Blend for Windows Phone允许在手机上或者模拟器上运行你的应用程序。注意如果你打开Device模板,
你选择在那个上面测试你的应用程序。默认情况下使用模拟器来运行应用程序。
图十四:绑定Text属性刀模板上
19. 点检F5运行测试程序。在文本框中输入字符串,然后点击按钮。
图十五: 从 Expression Blend for Windows Phone从启动一个应用程序
注意:即使点击触发了期望的行为事件,但是没有显示按钮是焦点或者什么时候它被按下。在下边的例子中,你将更新你的模板,根据状态来改变按钮的状态。
例子二:在按钮上增加状态的变化
在这个例子中,你将修改你的模板,点击按钮时,按钮显示焦点,然后再非按钮区域点击时,按钮会取消焦点。
1. 在Object and Timeline面板下,选择Border控件。
2. 现在,转到State面板,查看按钮的可用状态。
图十六:状态面板显示可用的状态
注意:State状态显示所有的可用的控件状态。在这个状态下,你自定义模板区定义基本的显示。然后每一个状态你改变模板来和你的状态向匹配,例如
在焦点状态下,按钮周围有包围框。
3. 在ForcusStates目录下,选择Unfocused状态,这时按钮在没有焦点情况下的显示。
图十七:状态记录
4. 隐藏按钮的包围框,当按钮失去焦点时:
1. 在Object and Timeline面板下选择Border
2. 在Properties面板下,打开Brushes目录选择BorderBrush属性
3. 点击Show advanced properties图标,设置Opacity属性值为0
图18:当失去焦点时,按钮的包围框透明
5. 转到States面板选择Pressed状态,保存鼠标点击时的状态变化。
6. 在Properties面板下,打开Transform目录,选择Translate。设置X和Y的值为2。这样当按钮被点击时,就稍微的改变了按钮的位置,去表明他被按下了。
图19: 在按下后按钮移动
7. 最后,在States面板中,选择Base模板区关闭记录模式。
8. 保存更新
9. 运行程序,测试效果。注意观察下面情况;
1. 在文本框中输入文字,点击Tab是按钮获得焦点
2. 注意,当按钮获得焦点后,包围框包围了按钮,说明他被激活了
3. 现在,点击按钮看他的位置是怎么改变的来表明它被按下