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之路
喜歡我文章請推我一下或給我個回應，你的鼓勵會給我無限的動力喔!
若是您有其他問題或是特別需要，請在文章回應處留言，我會盡快回覆您
