原文:零元学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之路
喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您