零元学Expression Blend 4 - Chapter 33 简单轻松的学会如何使用Visual States(下)

原文:零元学Expression Blend 4 - Chapter 33 简单轻松的学会如何使用Visual States(下)

上篇提到了Visual State Manager中文翻译为视觉状态管理器是Blend的强大功能之一

本篇要更深入介绍如何使用

?

上篇提到了Visual State Manager中文翻译为视觉状态管理器是Blend的强大功能之一

本篇要更深入介绍如何使用

?

本篇范例最後成果：

?

很抱歉，阁下使用的浏览器并不支援 IFrame，不能正常浏览我的网页

?

01

接续着上篇的介绍，所以接下来开始相关效果的设定

左键单击MouseOver，工作区左上方会亮起小红点并显示”state recording is on”

在这个状态下，请把爱心的颜色更改为#FFFFCACA





?

再来是Pressed，一样单击Pressed使之为state recording is on状态

(应该可以发现，从MouseOver转换为Pressed时爱心从粉红色会更改回白色，这就是状态间的变换)

选取最大的圆，并更改些微的大小





?

你可以再次按下F5，试试看是否Button已经有操作时视觉上的反馈了

?

注意到了吗?我们不用编写任何程式码或XAML就能改变我们按钮的外观

?

02

而接下来介绍如何使用Visual State功能处理视觉状态间的变换

为了更明显看出两个状态变换间的差异，我让Pressed时的圆形变得比刚刚更大一点





?

在Visual State预设情形下，由一个视觉状态移动到另一个视觉状态时，Blend会自动的构建和执行过渡时间的Storyboard（即为Blend自动帮我们生成了2个状态间平滑过渡的动画效果）

再一次实现了在Blend里，你不需编写任何程式码就可以让这一切发生

?

但若还是想要自订过渡时间的Storyboard，你还是能加自己所设计的Storyboard





?

Blend的自动过渡功能中你可以利用的一个特性是，自订视觉状态过渡发生所需要花费的时间

单击Add Transition(状态右边带有”+号”的箭头)->MouseOver->Pressed





?

列表里有：

＊ -> MouseOver

MouseOver -> Normal

MouseOver -> Pressed

MouseOver -> Disabled

MouseOver –> ＊

?

“星号＊＂表任何状态

所以＊ -> MouseOver表示任何状态到MouseOver

而MouseOver -> ＊，则表示MouseOver到任何状态





?

设定一个TransitionEffect，Blend已经内建了许多效果，你可以选一个喜欢的效果来测试

范例这里选的是Ripple





?

接着的是EasingFunction，但这个范例我们不使用这项功能

(详细的EasingFunction介绍请看这里)





?

接着设定当MouseOver状态移到Pressed状态时，过渡效果所执行的时间

Transiton duration ->由0s改为1s，设定值接受小数点

这里表示由MouseOver状态移到Pressed状态须经过1秒钟的执行时间





?

完成後按下F5看看成果





?

你应该会发现很明显的差异

?

其他状态的过渡效果可以依不同的需求作调整

相信你会慢慢发现Blend这项强大功能的神奇力量

?

附上本范例的专案

?

?

?

本篇的教学就到此。

?

?

?

(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)

一步一步迈向HIE之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您