Blend 2.5 6月份(2008 June)预览版

Blend 2.5 6月份(2008 June)预览版
WPF和Silverlight撰写程序模型最强大的一个功能是其完全定制组件的观感的能力，这允许开发人员和设计师以微妙和戏剧性的方式对组件的UI进行精雕细琢，促成大幅度的灵活性。我曾在这里的Silverlight组件模板博客文章里对这些概念讨论过。
这个星期的Expression Blend 2.5六月份预览版现在对组件模板编辑加了设计器支持，将方便你快速地改变任何组件的外观，而不必再屈尊去修改XAML源码。

Blend 2.5 6月份预览版 (英文、日文、韩文版)

组件模板编辑支持

WPF和Silverlight撰写程序模型最强大的一个功能是其完全定制组件的观感的能力，这允许开发人员和设计师以微妙和戏剧性的方式对组件的UI进行精雕细琢，促成大幅度的灵活性。我曾在这里的Silverlight组件模板博客文章里对这些概念讨论过。
这个星期的Expression Blend 2.5六月份预览版现在对组件模板编辑加了设计器支持，将方便你快速地改变任何组件的外观，而不必再屈尊去修改XAML源码。
要看组件模板编辑的实战范例的话，在Expression Blend设计表面上拖放2个Slider组件：

我们也许会判定默认的Slider组件模板的滑块对我们的应用来说太大，太宽了。要用组件模板编辑功能来改变它的话，我们可以在设计器上右击其中一个 slider，选择“编辑组件部件”上下文菜单项。我们可以给我们的Slider选择建立一个空白的组件模板（从头做起），也可以编辑内建组件模板的复制（然后对之细调）：

在我们选择编辑现有的组件模板的复制之后，Blend会提示我们建立并命名一个可重用的模式资源，我们将在其中定义我们的组件模板。命名完之后，我们可以选择将模式保存在应用级（在App.xaml中）或在目前页面/使用者组件中：

在点选OK之后，我们会发现转到了Slider组件的模板编辑模式之下，我们可以改变，细调，新增/去除Slider组件模板中的任何底层元素。注意下面，在模板编辑模式中，我们可以看到和选择组成Slider组件模板的任何底层元素（这些元素在下面的“Objects”窗口中用红笔圈了出来）。
想把滑块做得窄一点的话，我们可以选择组件模板中的“HorizontalThumb”元素，调整它的宽度（在接口里或透过属性网格）：

然后，我们可以使用设计器顶部的breadcrumb导航条回到我们的页面，看组件模板的变动实施后的效果：

注意，目前只有一个Slider组件使用了刚定义的组件模板的新模式资源。
要把同样的模式资源用到另外一个Silder组件上，我们可以选择该组件，右击，然后使用“Apply Resource（应用资源）”上下文菜单，把“ScottSlider”模式用到该组件上：

之后，2个Slider将引用同个模式：

以后对“ScottSlider”模式做的任何改变将会自动应用到这2个组件之上。
注意，在Silverlight 2中发布的所有组件都支持组件模板，在Expression Blend中都支持上面那样的编辑体验。

Visual State Manager (VSM-视觉状态管理器) 之支持

Silverlight银光 和 WPF中的组件模板支持对组件的“look（外观）”，以及组件的“feel（感觉）”的定制。“feel”之谓，我指的是改变它交互的响应性。例如，在按下时，得到焦点时，失去焦点时，处于按下的状态时，处于不可用（disabled）状态时，内中有东西被选中时。。。，它是如何反应的。经常地，在使用者像这样与组件做交互时，你要执行动画效果。

我们在Silverlight 2 Beta2中引进的一个新东西是"Visual State Manager（视觉状态管理器）" (VSM)，该功能将极大地方便你建造交互性的组件模板。VSM引入了你可在组件模板中利用的2个基本概念："视觉状态(Visual States)" 和 "状态迁移（State Transitions）"。例如，像按钮这样的组件为自己定义了多个视觉状态： "Normal（正常）", "MouseOver（鼠标游标之下）", "Pressed（按下）", "Disabled（不可用）", "Focused（取得焦点）", "Unfocused（不具焦点）"。在Blend中的模板编辑模式下，设计师现在可以轻松地编辑按钮在每个特定状态下的外观，以及设定迁移规则来控制从一个状态迁移到另一个状态时动画效果应该执行的时间。然后在执行时，Silverlight会动态地执行合适的动画故事板来把组件从一个状态平滑地过渡到另一个状态。
这个模型很棒的地方是，设计师不用编写程序，不用手工建立动画故事板，也不用理解组件的对象模型就可以非常有效率。这使得学习建立交互性组件模板的曲线非常容易，意味着现有的美工可以轻松地参与Silverlight项目。今年稍后，我们还将往WPF中新增"Visual State Manager（视觉状态管理器）" (VSM)的支持，让你在Windows应用中使用同样的方法，以及在 WPF 和 Silverlight银光 项目间共享组件模板。
要看这个的实战范例，让我们往设计表面上加一个Button组件：

然后，我们可以右击按钮组件，编辑它的组件模板。我们将不从现有的默认组件模板开始（就像上面的Slider范例一样），让我们建立一个空白的组件模板，从头做起：

Blend会提示我们给要建立的模式（Style）资源取一个名字，我们将它取名为“ScottButton”，点选OK。这会把设计器置于按钮的组件编辑模式下，一开始只有一个空白的组件模板：

上面有一样需要注意的东西是，在Blend中有一个新的“States（状态）”窗口，这个窗口会显示Button组件提供的所有的“Visual States（视觉状态）”。在上面，目前被选中的是“Base(基底)”状态，该状态允许我们定义我们的按钮组件模板常用的视觉树。

然后，我们可以往我们的基底状态中加一些向量元素，来定义象下面这样的定制按钮的外观。我们可以使用由Blend提供的内建向量绘制工具支持来设计这些图形，或者使用Expression Design 或 Adobe Illustrator来建造向量图形，然后将其导入Blend中。下面，我们在我们的组件模板中加了4个“Path”元素，一个是带圆角的背景（其名为 “background”），另一个带阴影（drop shadow）（其名为“shadow”），还有一个是带40%蔽光性的“shine”（在顶部加了一些晕光），再有一个定义了默认的内部内容（在这个情形下，是个房子的图案）：

注：我们也可以导入一个图片，但使用向量元素会给予我们以后对按钮进行扩缩/转换，在任意分辨率或尺度上保持清晰观感的灵活性（特别是在 Silverlight移动设备的场景下，屏幕的分辨率大不相同或较小时，尤其有用），还允许我们对美工设计中的任何向量元素可以轻易地做动画效果或改动。
完成设计上面的基底状态之后，我们可以按F5在浏览器中执行应用：

你可以在上面看到，我们的按钮组件现在拥有一个比较好看的外观。尽管它有了一个新的外观，但按钮依然像以前那样触发同样的焦点，点选，和悬浮事件，所以，使用按钮的开发人员在操作使用了我们的新组件模板的按钮时，不用改动任何程序。

但我们的新按钮组件模板的一个缺点是，它并不是交互的。这意味着，如果按钮获得/失去焦点，或者鼠标游标悬浮其上时，我得不到任何视觉反馈。点选时，我也得不到很好的按下/弹起的动画效果。

要将交互性加到我们的按钮上，我们将回到Blend中，再次操作我们按钮的组件模板。之前我们把向量图形元素加到了我们按钮的“Base（基底）”状态中，这允许我们定义所有视觉状态的默认视觉外观。我们现在将回去，进一步定制个别的按钮视觉状态。

例如，为实现按钮的mouse-over行为，我们可以在“States”窗口中选择“MouseOver”状态，然后细调按钮处于该状态时的外观。在下面，我选了组件模板中的“shine”向量元素，调整它在属性网格中的Opacity属性，使其在MouseOver状态下可见度更高。注意Blend是如何在对像窗口中，自动使用红点加亮“shine”元素，然后在该元素的下面列出了Opacity属性的。这可以便利很快地跟踪我们在组件模板中在 “Base（基底）”状态和“MouseOver”状态间所做的所有变动：

然后，我们可以在“States”窗口中选择“Pressed”状态，定制按钮处于按下状态时的外观。我们将改变“Base（基底）”状态的2样东西，第一个变动是使得“shine”元素可见（就像MouseOver状态一样），第二个变动是稍微偏移按钮组件的内容，同时保持影子元素不动。这会给予按钮一个很好看的“depressed（按下)”外观，与它的基底视觉形成很好的反差：

我们可以这样来实现偏移变动： 在设计器中选择background，content和shine元素，然后在属性浏览器中对它们施加一个偏移显示转换（offset render transform）：

现在，在浏览器中再次执行我们的应用的话，我们会发现我们的按钮在使用时有交互的视觉反馈了。下面是我们按钮的“Normal（正常）”外观：

将鼠标游标悬浮于按钮之上，会造成象下面这样的发光效果：

点选按钮会导致它按下去，隐藏影子（在松开鼠标游标按钮时，它会弹回来）：

注意，我们不用编写任何程序或XAML来改变我们按钮的观感，新的视觉状态管理器功能会自动地为我们处理视觉状态间的过渡。

在默认情形下，在你从一个视觉状态移动到另一个视觉状态时，Silverlight会动态地为你构建和执行过渡Storyboard（提供了2个状态间的平滑过渡动画效果），你不需编写任何程序就可以让这一切发生（注：如果你想的话，你还是能降低层次（drop down），加一个定制的Storyboard过渡，但在大多数情形下，你大概可以使用自动的Storyboard过渡）。

Silverlight的自动过渡功能中你可以利用的一个特性是，定制视觉状态过渡发生所花的时间，你可以这么做，点选视觉状态右边的箭头，设定一个规则来控制当从一个特定状态移到另一个状态时，过渡动画效果应该执行的时间。

例如，我们可以加如下的规则来表示，我们要它花0.2秒钟的时间来从"Normal"过渡到"MouseOver"视觉状态：

然后，我们可以像这样来设定这个规则，在Normal->MouseOver间过渡时花0.2秒钟：

然后，我们可以点选"MouseOver"状态，设定一个规则，导致从MouseOver->Normal的过渡花0.4秒钟：

现在，当我们重新执行应用时，对MouseOver场景，我们将有一个慢了一点的动画过渡，给我们的应用新增了一种稍微更加平滑和更为精致的感觉。我们不用编写一行程序就可以促成这个效果。 随Silverlight 2发布的所有组件都有对象上面这样的组件模板和视觉状态管理器之定制的内建支持。

想进一步了解新的视觉状态管理器和组件模板编辑功能的话，请看一下 这里 和 这里的教学, 以及这里, 这里 和 这里的相关录像。
本文章来自于神魂颠倒论坛 http://bbs.flash2u.com.tw
原文网址:http://bbs.flash2u.com.tw/dispbbs_225_84661.html

原文:大专栏  Blend 2.5 6月份(2008 June)预览版