Silverlight 2 Beta 2 新特性(补充)
以下内容主要针对[url=http://download.microsoft.com/download/8/5/8/858627dc-9aa3-4f86-bb3d-729204927da3/Blend.en.msi]Blend2 6月份预览版[/url].更多内容访问 [url=http://weblogs.asp.net/scottgu/archive/2008/06/06/silverlight-2-beta2-released.aspx]Scott原文[/url] [url=http://blog.joycode.com/scottgu/archive/2008/06/09/115138.aspx]Scott中文[/url]
[b]控件模板编辑支持[/b]
WPF和Silverlight编程模型最强大的一个功能是其完全定制控件的观感的能力，这允许开发人员和设计师以微妙和戏剧性的方式对控件的UI进行精雕细琢，促成巨大的灵活性。我曾在[url=http://blog.joycode.com/scottgu/archive/2008/02/29/114916.aspx]这里[/url]的Silverlight控件模板博客贴子里对这些概念讨论过。
这个星期的Expression Blend 2.5六月份预览版现在对控件模板编辑加了设计器支持，将方便你快速地改变任何控件的外观，而不必再屈尊去修改XAML源码。
要看控件模板编辑的实战例子的话，在Expression Blend设计表面上拖放2个Slider控件：
[img]http://www.scottgu.com/blogposts/sl2beta2/step1.png[/img]
我们也许会判定默认的Slider控件模板的滑块对我们的应用来说太大，太宽了。要用控件模板编辑功能来改变它的话，我们可以在设计器上右击其中一个 slider，选择“编辑控件部件”上下文菜单项。我们可以给我们的Slider选择创建一个空白的控件模板（从头做起），也可以编辑内置控件模板的拷贝（然后对之细调）：
[img]http://www.scottgu.com/blogposts/sl2beta2/step2.png[/img]
在我们选择编辑现有的控件模板的拷贝之后，Blend会提示我们创建并命名一个可重用的样式资源，我们将在其中定义我们的控件模板。命名完之后，我们可以选择将样式保存在应用级（在App.xaml中）或在当前页面/用户控件中：
[img]http://www.scottgu.com/blogposts/sl2beta2/step3.png[/img]
在点击OK之后，我们会发现转到了Slider控件的模板编辑模式之下，我们可以改变，细调，添加/去除Slider控件模板中的任何底层元素。注意下面，在模板编辑模式中，我们可以看到和选择组成Slider控件模板的任何底层元素（这些元素在下面的“Objects”窗口中用红笔圈了出来）。
想把滑块做得窄一点的话，我们可以选择控件模板中的“HorizontalThumb”元素，调整它的宽度（在界面里或通过属性网格）：
[img]http://www.scottgu.com/blogposts/sl2beta2/step4.png[/img]
然后，我们可以使用设计器顶部的breadcrumb导航条回到我们的页面，看控件模板的变动实施后的效果：
[img]http://www.scottgu.com/blogposts/sl2beta2/step5.png[/img]
注意，目前只有一个Slider控件使用了刚定义的控件模板的新样式资源。
要把同样的样式资源用到另外一个Silder控件上，我们可以选择该控件，右击，然后使用“Apply Resource（应用资源）”上下文菜单，把“ScottSlider”样式用到该控件上：
[img]http://www.scottgu.com/blogposts/sl2beta2/step6.png[/img]
之后，2个Slider将引用同个样式：
[img]http://www.scottgu.com/blogposts/sl2beta2/step7.png[/img]
以后对“ScottSlider”样式做的任何改变将会自动应用到这2个控件之上。
注意，在Silverlight 2中发布的所有控件都支持控件模板，在Expression Blend中都支持上面那样的编辑体验。
[b]Visual State Manager (VSM-视觉状态管理器) 之支持[/b]
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控件：
[img]http://www.scottgu.com/blogposts/sl2beta2/step23.png[/img]
然后，我们可以右击按钮控件，编辑它的控件模板。我们将不从现有的默认控件模板开始（就象上面的Slider例子一样），让我们创建一个空白的控件模板，从头做起：
[img]http://www.scottgu.com/blogposts/sl2beta2/step10.png[/img]
Blend会提示我们给要创建的样式（Style）资源取一个名字，我们将它取名为“ScottButton”，点击OK。这会把设计器置于按钮的控件编辑模式下，一开始只有一个空白的控件模板：
[img]http://www.scottgu.com/blogposts/sl2beta2/step11.png[/img]
上面有一样需要注意的东西是，在Blend中有一个新的“States（状态）”窗口，这个窗口会显示Button控件提供的所有的“Visual States（视觉状态）”。在上面，当前被选中的是“Base(基底)”状态，该状态允许我们定义我们的按钮控件模板常用的视觉树。
然后，我们可以往我们的基底状态中加一些矢量元素，来定义象下面这样的定制按钮的外观。我们可以使用由Blend提供的内置矢量绘制工具支持来设计这些图形，或者使用Expression Design 或 Adobe Illustrator来建造矢量图形，然后将其导入Blend中。下面，我们在我们的控件模板中加了4个“Path”元素，一个是带圆角的背景（其名为 “background”），另一个带阴影（drop shadow）（其名为“shadow”），还有一个是带40%蔽光性的“shine”（在顶部加了一些晕光），再有一个定义了默认的内部内容（在这个情形下，是个房子的图案）：
[img]http://www.scottgu.com/blogposts/sl2beta2/step12.png[/img]
注：我们也可以导入一个图片，但使用矢量元素会给予我们以后对按钮进行扩缩/转换，在任意分辨率或尺度上保持清晰观感的灵活性（特别是在 Silverlight移动设备的场景下，屏幕的分辨率大不相同或较小时，尤其有用），还允许我们对美工设计中的任何矢量元素可以轻易地做动画效果或改动。
完成设计上面的基底状态之后，我们可以按F5在浏览器中运行应用：
[img]http://www.scottgu.com/blogposts/sl2beta2/step13.png[/img]
你可以在上面看到，我们的按钮控件现在拥有一个比较好看的外观。尽管它有了一个新的外观，但按钮依然象以前那样触发同样的焦点，点击，和悬浮事件，所以，使用按钮的开发人员在操作使用了我们的新控件模板的按钮时，不用改动任何代码。
但我们的新按钮控件模板的一个缺点是，它并不是交互的。这意味着，如果按钮获得/失去焦点，或者鼠标悬浮其上时，我得不到任何视觉反馈。点击时，我也得不到很好的按下/弹起的动画效果。
要将交互性加到我们的按钮上，我们将回到Blend中，再次操作我们按钮的控件模板。之前我们把矢量图形元素加到了我们按钮的“Base（基底）”状态中，这允许我们定义所有视觉状态的默认视觉外观。我们现在将回去，进一步定制个别的按钮视觉状态。
例如，为实现按钮的mouse-over行为，我们可以在“States”窗口中选择“MouseOver”状态，然后细调按钮处于该状态时的外观。在下面，我选了控件模板中的“shine”矢量元素，调整它在属性网格中的Opacity属性，使其在MouseOver状态下可见度更高。注意Blend是如何在对象窗口中，自动使用红点加亮“shine”元素，然后在该元素的下面列出了Opacity属性的。这可以便利很快地跟踪我们在控件模板中在 “Base（基底）”状态和“MouseOver”状态间所做的所有变动：
[img]http://www.scottgu.com/blogposts/sl2beta2/step14.png[/img]
然后，我们可以在“States”窗口中选择“Pressed”状态，定制按钮处于按下状态时的外观。我们将改变“Base（基底）”状态的2样东西，第一个变动是使得“shine”元素可见（就象MouseOver状态一样），第二个变动是稍微偏移按钮控件的内容，同时保持影子元素不动。这会给予按钮一个很好看的“depressed（按下)”外观，与它的基底视觉形成很好的反差：
[img]http://www.scottgu.com/blogposts/sl2beta2/step15.png[/img]
我们可以这样来实现偏移变动： 在设计器中选择background，content和shine元素，然后在属性浏览器中对它们施加一个偏移显示转换（offset render transform）：
[img]http://www.scottgu.com/blogposts/sl2beta2/step16.png[/img]
现在，在浏览器中再次运行我们的应用的话，我们会发现我们的按钮在使用时有交互的视觉反馈了。下面是我们按钮的“Normal（正常）”外观：
[img]http://www.scottgu.com/blogposts/sl2beta2/step17.png[/img]
将鼠标悬浮于按钮之上，会造成象下面这样的发光效果：
[img]http://www.scottgu.com/blogposts/sl2beta2/step18.png[/img]
点击按钮会导致它按下去，隐藏影子（在松开鼠标按钮时，它会弹回来）：
[img]http://www.scottgu.com/blogposts/sl2beta2/step19.png[/img]
注意，我们不用编写任何代码或XAML来改变我们按钮的观感，新的视觉状态管理器功能会自动地为我们处理视觉状态间的过渡。
在默认情形下，在你从一个视觉状态移动到另一个视觉状态时，Silverlight会动态地为你构建和运行过渡Storyboard（提供了2个状态间的平滑过渡动画效果），你不需编写任何代码就可以让这一切发生（注：如果你想的话，你还是能降低层次（drop down），加一个定制的Storyboard过渡，但在大多数情形下，你大概可以使用自动的Storyboard过渡）。
Silverlight的自动过渡功能中你可以利用的一个特性是，定制视觉状态过渡发生所花的时间，你可以这么做，点击视觉状态右边的箭头，设置一个规则来控制当从一个特定状态移到另一个状态时，过渡动画效果应该运行的时间。
例如，我们可以加如下的规则来表示，我们要它花0.2秒钟的时间来从"Normal"过渡到"MouseOver"视觉状态：
[img]http://www.scottgu.com/blogposts/sl2beta2/step20.png[/img]
然后，我们可以象这样来配置这个规则，在Normal->MouseOver间过渡时花0.2秒钟：
[img]http://www.scottgu.com/blogposts/sl2beta2/step21.png[/img]
然后，我们可以点击"MouseOver"状态，设置一个规则，导致从MouseOver->Normal的过渡花0.4秒钟：
[img]http://www.scottgu.com/blogposts/sl2beta2/step22.png[/img]
现在，当我们重新运行应用时，对MouseOver场景，我们将有一个慢了一点的动画过渡，给我们的应用添加了一种稍微更加平滑和更为精致的感觉。我们不用编写一行代码就可以促成这个效果。 随Silverlight 2发布的所有控件都有对象上面这样的控件模板和视觉状态管理器之定制的内置支持。
想进一步了解新的视觉状态管理器和控件模板编辑功能的话，请看一下 这里 和 这里的教程, 以及这里, 这里 和 这里的相关录像。
[[i] 本帖最后由 langmuir 于 2008-6-12 21:31 编辑 [/i]] 支持，又学到东西了，:) 很不错楼主辛苦了！
good
很好。按钮控件的过渡动画一般可以用silverlight自动实现，但是不知道能不能查看自动播放的storyboard代码呢，这样就不仅可以改变过渡动画的时间了，也不必自己重新写storyboard [quote]原帖由 [i]ptxfp[/i] 于 2008-6-16 10:49 发表 [url=http://bbs.blueidea.com/redirect.php?goto=findpost&pid=4061483&ptid=2863445][img]http://bbs.blueidea.com/images/common/back.gif[/img][/url]
很好。
按钮控件的过渡动画一般可以用silverlight自动实现，但是不知道能不能查看自动播放的storyboard代码呢，这样就不仅可以改变过渡动画的时间了，也不必自己重新写storyboard [/quote]
当然可以查看由VSM辅助创建的Storyboard代码.
thank you
明白，刚才脑袋发热呵呵。。。页:
[1]