原文:零元学Expression Blend 4 - Chapter 32 简单轻松的学会如何使用Visual States(上)
Visual State Manager中文翻译为视觉状态管理器，这是Blend的强大功能之一
这项功能赋与了视觉设计师更大的空间
?
Visual State Manager中文翻译为视觉状态管理器，这是Blend的强大功能之一
这项功能赋与了视觉设计师更大的空间
?
以一般制作Html网页所使用到的Button举例来说：
通常会出现的三种基本状态：Normal、MouseOver、Pressed可能就需要三张不同的图片来组成
?
但是在Blend内却是完全不同的设计方法：
你只需要修改预设Button的基本样式，或是使用一张图片甚至是用内建工具拖拉出的图型，就能转化成Button，直接能拥有Button的基本属性
若是你看过我之前的文章介绍，很多都有使用到Visual State这项功能：自制玻璃质感的Button就是一个很好的例子
?
这次不一样的是我们从Create Empty开始!
?
01
拉出一个Button後，在Button上单击右键Edit Template->Create Empty，命名完成点击OK
?
会看到Objects and Timeline下存在一个空白的Gird，并且取代了原本的Button
?
切换到State，这边显示了Button提供的所有Visual States（视觉状态）
(如果找不到State这个Tab，请到TopMenu->Window勾选)
?
在上面，目前被选中的是Base(基本)，这里列出了所有允许我们定义Button的状态列表：
分为Common与Focus两种
CommonStates包含了Normal、MouseOver、pressed以及Disabled
FocusStates包含了Unfocused与Focused
?
02
然後，我们在Base状态中，加入一些图型把我们的Button外观制作好
你可以跟着范例做，或是放入图片
?
范例使用Eliipse拖拉出两个圆形两个颜色为渐层的椭圆型，使用渐层以及图层堆叠的方式做出类反光效果
深蓝色码：#FF333E93
浅蓝色码：#FFB0C3E3
(想看更详细的图形工具介绍，请到这里)
?
拖拉一个椭圆至於圆形下方，形成此圆的阴影部分，直接调整ZIndex为-1就可以把阴影置於圆形後方
(不了解ZIndex吗?这里有更详细介绍)
?
使用两个椭圆型制作出一个爱心的形状
Translate->Flip->Flip X axis翻转其中一个椭圆再使之交叠就可以达成
?
接着把两个椭圆选起来，单击右键->Combine->Unite
?
到此前置作业大致完成
?
你可以按下F5预览看看，你会发现自订的Button完全没有任何反应，得不到任何操作时视觉上的反馈
?
如果是以其他的工作或是以传统的合作方式，视觉设计师的工作就到这边了，但是有了Visual State这项功能，设计师就可以继续发挥
想知道更多吗?看下篇就知道。
?
?
本篇的教学就到此。
?
?
?
(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)
一步一步迈向HIE之路
喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您