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

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

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

?

本篇范例最後成果：

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

01

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

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

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

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_20.png"></a>

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

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

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

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_18.png"></a>

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

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

02

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

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

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_16.png"></a>

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

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

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

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_14.png"></a>

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

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

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_12.png"></a>

列表里有：

＊ -&gt; MouseOver

MouseOver -&gt; Normal

MouseOver -&gt; Pressed

MouseOver -&gt; Disabled

MouseOver –&gt; ＊

“星号＊＂表任何状态

所以＊ -&gt; MouseOver表示任何状态到MouseOver

而MouseOver -&gt; ＊，则表示MouseOver到任何状态

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_10.png"></a>

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

范例这里选的是Ripple

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_8.png"></a>

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

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_6.png"></a>

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

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

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

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_4.png"></a>

完成後按下F5看看成果

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1103/Expression-Blend-4---Chapter-33-Visual-S_D399/image_2.png"></a>

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

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

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

附上本范例的专案

本篇的教学就到此。

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

一步一步迈向HIE之路

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

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