笔记（二）： Expression Blend 设计Windows Phone 应用程序的UI

本笔记涉及内容：

1.在Expression Blend创建一个自定义按钮

2.为定制控件增加视觉状态效果

3.创建横幅文本的动画

1  在Expression Blend创建一个自定义按钮

一般而言，Silverlight控件会把它们的逻辑与用模板生成的视觉外观进行分离。一个ControlTemplate 指定了一个空间的可视结构和视觉化行为。您可以通过更改ControlTemplate缺省的设置来定制大多数控件的外观。这样做允许您更改控件的外观而不用更改它的功能。例如，您可以把您应用程序中的按钮变成圆边而不是缺省的矩形，而不会影响其触发Click事件的功能。

在这个任务中，用Expression Blend 来打开您在前一个练习中创建的Visual Studio项目，并替换按键的ControlTemplate 来更改它的外观和视觉感受。因为您在XAML创建了一个ControlTemplate，您可以更改一个控件的外观而不用修改任何代码。

改变控件的外观和视觉感受

1.      如果还没有打开，从Start | All Programs | Microsoft Visual Studio 2010Express for Windows Phone启动用于 Windows Phone的Microsoft Visual Studio 2010 Express。

Visual Studio 2010:从Start | All Programs | Microsoft Visual Studio 2010启动 Visual Studio 2010。

 

2.      如果您完成了前一个练习的所有步骤，您可以继续使用为上个练习所创建的解决方案（solution）；否则，要从实验的Source文件夹下的Hello Phone\Ex2-WP7AppUXDesignWithBlend\Begin处打开Begin. sln。

3.      现在，在 Expression Blend中打开当前解决方案。在Visual Studio的Solution Explorer, 右键单击 MainPage.xaml 然后选择 Open in Expression Blend。

如果此时一个有关安全风险的警告弹出，点击Yes来解除警告。

在Expression Blend中打开解决方案

 

4.      在Expression Blend中，务必确定在designer窗口打开了MainPage.xaml 文件—如果需要在Projects 面板双击该文件来打开它—当前的工作空间被设置为Design。要查看当前的工作空间，在Window菜单 选择Workspaces 同时确保Design 被选中。

在Expression Blend选择当前工作空间

注释:Expression Blend 的工作空间包含了所有的视觉界面元素。包含了画板、面板、工具面板、工作空间配置、创作的意见和菜单。

 

5.      In the designer window, 在designer窗口，右键单击 “Click Me” 按钮，指向 EditTemplate 然后选择 Create Empty。

6.      在 Create ControlTemplate Resource 对话框，选择Name且值为FancyButton，在Define in选项中保持当前值"This document"，点击OK。

为按钮控件创建一个空的控件模板

注释:资源包中提供了一个简单的方式来复用一般定义的对象和值。您可以为普通常用项包括控件模板、样式、画笔、颜色和动画来创建定义并把它们存入资源字典中。一个资源字典是一个键控的对象字典，您可以同时在XAML和代码中使用它。您可以在应用程序架构中创建不同范围的资源字典，例如允许您创建页面级的资源或者应用程序级的资源。

上面的对话框给您一个能够定义全局应用程序级控件模板的选项，这个模板被存贮在App.xaml您可以在应用程序的其他页面复用该模板，或者把模板存到This document，这样您只能在应用程序的同一页面进行复用。

 

7.      如果Objects and Timeline面板不可见，则要在Window菜单上选择Objectsand Timeline 来显示这个菜单。如果需要，您可以通过选择Window | Reset Current Workspace来重置工作空间为缺省状态。

注释:当您创建一个新的模板时，ExpressionBlend 会进入一个您可以查看和编辑新模板的模式。在 Objects and Timeline面板，在新元素树根处的模板上的单词会显示您现在进行编辑时所处的范围。

 

8.      更改模板当前根版面设计的容器。在 Objects andTimeline面板，右键单击Template 内的子元素Grid， 指向Change Layout Type,然后选择Border。

更改模板根版面设计的容器

 

注释:当您创建了 ControlTemplate, 结合 FrameworkElement 对象来构建单一控件。一个ControlTemplate 只能包含一个FrameworkElement 对象来作为其根元素。根元素通常会包含其它FrameworkElement 对象。对象的组合构成了控件的视觉结构。

 

9.      在Objects and Timeline面板 保持Border元素为选中状态, 切换到Appearance下的Properties面板，设置BorderThickness 属性值，每条边都设为2；CornerRadius属性值为15。

配置边界元素的外观

10.  现在，在Brushes 部分，选择Background 属性并 挑选 Gradient brush 选项。然后，单击左边渐变区域通过停止鼠标来选中它，把值设定为浅灰色，例如 #FFADADAD。然后选择右边的渐变条设定值为深灰色，例如#FF0A0A0A。      

为按钮配置渐变背景

11.  当上述工作完成后，在 Brushes部分，选择 BorderBrush 属性，选择Solid color brush 并选择浅灰色，例如#FFC0C0C0。

为按钮边界配置一个固定的颜色

12.  当您完成为按钮创建背景的操作，下一步是添加一个标题。首先，确保Border元素在Objects and Timeline 面板中始终是被选中的。

13.  然后，切换到 Assets 面板，选择 Controls类别，向下滚动列表直到TextBlock 控件被显示出来。然后，通过双击该控件来插入一个控件的实例，该实例被嵌套到模板的Border元素中。

工具箱中插入一个TextBlock控件

Objects and Timeline 面板 上显示新的 TextBlock 嵌套在Border元素中

 

14.  现在，在 Tools 面板，选择 Selection工具l  或按 V键来 恢复选择模式。

注释:完成插入TextBlock后， 设计工具designer保存在插入模式，直到退出这个模式您才可以继续添加别的TextBlock元素。

15.  在 Objects and Timeline 面板，选择新添加的TextBlock元素。然后，在Properties 面板，展开Brushes 类别并设置Foreground 画笔颜色为浅色，例如#FFFFFFFF。

为按钮控件设置前景色

16.  然后， 展开 Layout 类别并把 HorizontalAlignment 和VerticalAlignment 的属性值设置为Center。然后，Margin 左右两边的属性值都为 10且上下两边的属性值为 4。

配置标题控件的margin 和 alignment属性

17.  把模板中TextBox 控件的Text 属性与按键模板化控件中的Content属性关联起来。要做到这点：

◦       展开 Common Properties类别

◦       点击 Advanced property options—属性值旁的一个正方形图标

◦       在模板化控件中选择 Template Binding  来显示可以绑定到该属性的属性列表，

◦       从列表里选择Content属性

注意 Text属性的值变为“Click Me”——该值当前是设置的是按键控件Content属性——且现在被显示在一个黄色框内，意味着它是一个模板-绑定属性。

 

绑定模板中Text属性

注释:模板绑定是把一个空间模板的一个属性值与其他模板化控件的属性值相关联，它允许您设计一个定制的控件，但是当您在应用程序中使用这种控件的时候仍会带来一些变化。

 

18.  按CTRL+S来保存更新后的文件。

您现在可以开始测试新定制的按钮了。用于Windows Phone的 Expression Blend 允许您的Windows Phone应用程序在一个真的的电话设备或者一个模拟器上运行。 注意如果您打开Device面板 （从Window 菜单打开），您可以选择在何处预览您的程序。缺省情况下 Expression Blend 将会使用 Windows Phone Emulator 来部署和运行应用程序。

构建模板的Text属性

19.  现在按F5 来构建和运行应用程序。输入一些文本然后点击按钮。

从 Expression Blend启动应用程序

 

请注意，即使点击触发预期的行为，但是没有视觉提示来指示该按钮具有焦点或当它被按下。接下来的任务，您将会通过更新模板来实现按钮根据其状态不同而相应更改为不同的外观。

 

2  为定制控件增加视觉状态效果

在这个任务中，您将对控件模板进行添加不同视觉状态的升级，升级后将会允许：当选择焦点落在按钮控件上时，会出现一个高亮轮廓；当按钮控件被按下时，将会在页面上变换它的位置。

1.      在Objects and Timeline panel面板，选在Border控件。

2.      现在, 切换到States面板并检查按钮 控件可用的视觉状态。

States 面板展示了Base状态被选中

注释:在States 面板可以看到控件的所有视觉状态。 Base 状态所定义的元素样式在每个状态下都是一致的。在这个情况下，您可以通过对模板的定制来更改控件的基本外观。然后，对于其它的状态，您同样可以通过这种方式来更改模板，为相应状态提供视觉变化的依据。例如，在Focused状态下，围绕控件将会显示边界线。

 

3.      在FocusStates类别中, 选择 Unfocused 状态来实现当按钮控件失去焦点时触发状态的录制。

当前模式下对模板的更改仅仅被应用到特定的状态下。

在Expression Blend中的状态录制

 

注释:当您选择正常状态外的其他状态一些变化将会发生。首先，被选择状态的标签旁亮起一个红色的圆圈，代表该状态正被使用。接着，旁边的设计区域出现了一个红色边框。最后, 设计区域左上角的标题被选中说明状态录制已经启动了。在这个模式下，模板上元素的任何变化都会被录制并记录到XAML文件中。在运行时，当该状态处于活动状态时，这些变化将被应用到基本模板上。

4.      当按钮失去焦点后，围绕按钮的边界线将会被隐藏：

◦       在Objects and Timeline面板，选择Border

◦       在Properties面板，展开Brushes ，选择BorderBrush 属性

◦       点击 Show advanced properties 图表 ，并把画笔的 Opacity 属性值设为 0

把Unfocused状态的边界线设置为透明

5.      回到 States 面板 然后从CommonStates类中选择Pressed state，并为鼠标点击触发的操作开启状态录制 。

6.      在Properties面板，展开 Transform 并选择Translate项 。 设置X 和Y 的值为2。

这个更改将会导致当按钮无论何时被点击其位置将会发生一些形变，并以此来表示按钮被按下。

按钮处于Pressed状态时，按钮位置发生变化

7.      最后，在States面板上选择Base模板来关掉录制模式。

8.      按CTRL + S来保存更新的文件。

9.      现在您已经完成了对定制控件添加不同的视觉状态，现在可以开始测试这个被更新的按钮：

◦      按F5来构建和运行应用程序

◦      输入一些文本然后按Tab键使输入焦点切换到按钮上。

◦      注意，当焦点切换到按钮上，按钮上将会出现一个边界线来表明按钮被选中

◦      此时，按下空格键或者点击按钮，注意此时按钮位置发生了下沉的形变。

 

 

3  创建横幅文本的动画

动画是基于关键帧的，这些帧定义了一个平滑的视觉转换的起止点。在Expression Blend中创建一个动画， 你需要创建一个Storyboard，在这个Storyboard中您需要在时间轴上标记每个关键帧属性的变化。 例如，您可以在时间轴0秒时 设置一个关键帧，它记录一个矩形在画板上左边的位置；然后在时间轴1秒时设置另一个关键帧，它记录了同一个矩形在画板上右边的位置。动画的效果是基于矩形的X和Y属性在1秒钟内的变换。当您正在运行一个动画，它会在指定的时间段 引入属性的变化值并把结果显示在您的应用程序上。利用这种方式，您可以在画板上实现一个对象的任何属性的动画，即使是非视觉属性也可以做到这一点。

这个任务中，您将会在Expression Blend中创建一个Storyboard，实现按下按钮后，在横幅控件上文本出现动画效果。

1.      切换当前工作空间到动画工作空间。点击Window菜单按钮，指向Workspaces 并选择Animation。

注意这将会重新调整窗口，其目的是为编辑时间轴留出最大可用空间。

注释:可以通过选择Window | Reset Current Workspace，实现恢复一个工作空间到其缺省状态。

 

2.      如果需要，退出编辑按钮控件模板。要做到这点，点击Objects andTimeline 面板上FancyButton (Button Template)元素旁的Scope Up 按钮  来显示页面的元素树。

注释:当您在编辑一个控件模板的时候，Objects andTimeline 面板仅显示该模板的元素树。要想编辑页面上其他元素，你需要退出当前编辑对象的范围。

 

3.      现在，在Objects and Timeline 面板点击New来创建一段新的脚本。这是一个标有“+”号的按钮，它在面板的右上角位置。

Objects and timeline 面板的Animation模式

4.      在 Create Storyboard Resource 对话框，把 Name值 设为AnimateBanner 然后点击OK。

创建一个新的storyboard 为横幅增加动画

 

5.      要在动画中创建关键帧，首先，要找到Objects and Timeline面板上 元素树中的BannerTextBlock元素选中并点击它，如果需要，展开Grid父元素来显示它。

6.       然后, 在时间轴上点击并拖拽播放头（playhead）有1秒的偏移量。

改变时间轴播放头的偏移量

注释:播放头是在时间轴的上方的黄色标记线所在位置。现在对页面中元素所作的任何 更改都会被记录为在播放头创建的关键帧。

7.      然后，切换到Properties面板，展开 Transform 类， 然后选择Scale 变形（transform）。 设置X属性值为-1。这个变形反映的是元素水平轴上的改变。

为文本应用一个scale变形

8.       切换回到时间轴面板。

注意现在多出一个新的关键帧—用灰色圆圈表示—当时间轴正在录制时，更改元素树中的元素，录制结果会反映在选定的时间偏移量处。

在动画storyboard 中创建一个关键帧

9.      现在，改变时间轴的播放头的偏移量为2秒。

10.  再一次， 切换到 Properties 面板, 展开 Transform 类并选择Scale 形变。 更改X 属性值为1，并恢复元素的原始状态 。

注意由于上面的更改第二个关键帧出现在时间轴的storyboard上。

Objects and Timeline 面板展示了关键帧的插补

11.  为了在设计工具designer中测试动画,您需要为横幅控件加入一些文本。首先，点击面板左上角AnimateBanner  左边的红色圆圈来暂时关闭录制功能——因为您也不想把添加文本操作也录制为动画的一部分。

关闭录制模式

注释:当您关闭了录制功能，对页面元素的任何操作都不会被加入到动画中。

 

12.  现在， 在designer上的BannerTextBlock 元素上右键单击并选择Edit Text。为横幅控件输入一个合适的文本然后点击ENTER 。

13.  要测试动画，点击 时间轴上的Play键。

注意横幅中的文本如何沿其中轴线水平旋转，在整个动画周期中的动作是如何保持统一的。在接下来的步骤里， 您将会利用一个非常简单的功能来改变关键帧之间的插补动作，并制作一个更加自然的动画。

在designer中运行动画

 

14.  通过在时间轴上点击灰色圆圈图标来选择第一个关键帧。

注意当您选择了一个帧，在designer视图上将会自动显示帧中出现的用户界面元素的状态，在本例中，横幅文本会相应显示。

现在，在 Properties 面板的 Easing 类下， 确保 EasingFunction被选中，展开下拉菜单来显示可用的功能，并选择Cubic Out功能。

这个特定的缓和（easing）功能是快要接近关键帧时降低切换的速率。

为关键帧之间的插补操作应用缓和功能

Note:关键帧的插补，描述了如何利用动画显示两个关键帧时间空隙期间属性的改变。您可以通过应用一个缓和功能来更改关键帧的插补值从而或得一个理想的动画。

 

15.  重复前面的步骤为第二帧添加缓和功能。这次选择 Cubic InOut功能 ，使得变换开始处于一个慢速率，逐渐加速，最后在接近结束帧的时候减慢其速度。

选择CubicInOut 缓和功能

 

16.  要测试加入了缓和功能的动画效果，需在时间轴上按Play按钮。

注意，横幅控件开始会高速旋转，当镜像的文本出现时减慢速度，接着又加速，最后减速并恢复到原始位置。

17.  到目前为止， 您已经创建了一个针对横幅文本的动画Storyboard，但是它目前只是一个存在于项目中不会被使用的资源。 要播放这个动画，您还需要利用事件来触发这个Storyboard， 这种情况下，利用点击Click Me 按钮来触发。打开这个按钮的Click事件句柄:

◦       切换当前工作空间到设计工作空间。在Window菜单 Window ，指向Workspaces 并选择Design。

◦       在 Projects 窗口, 点击MainPage.xaml旁的箭头 ( ) ，来显示其代码隐藏文件。

◦      双击 MainPage.xaml.cs 打开代码隐藏视图。

 

18.  更新事件句柄来实现播放动画，插入以下高亮区域的代码段到结束括号前的位置。

private void ClickMeButton_Click(object sender, RoutedEventArgs e){  BannerTextBlock.Text= MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin();}