??? Silverlight中的ControlTemplate(1)-概念

???? Silverlight中的ControlTemplate(2)-概念

???? Silverlight中的ControlTemplate（3）-Blend設計ControlTemplate

?????

??? 上一篇我是通過Blend簡單的演示如何修改ControlTemplate，這一篇關注VSM這個部分。

??? 概念的東西就不再重復了，這篇通過Blend演示如何一步一步設計VisualStateManager

??? 首先在WorkSpace上放置一個橢圓，這里設置一下其Name和Fill屬性

? 在Blend3中，對一個FrameworkElement元素應用動畫時，Blend會自動對未命名的元素進行處理，這里我們將橢圓命名為MyEliipse

? 現在開始設計動畫，為了簡單起見，這里就設計當鼠標進入MyEllipse時，填充色由紅變為黃色

? 選擇MyEllipse（默認快捷鍵V）

???????

選中之后，我們打開States面板

?????????? ? 因為理論性的東西前面幾篇文章已經分析過了，所以這里就不花篇幅了

? 如上圖所示，單擊Add state group這個按鈕，創建一個VisualStateGroup，給其命名為CommonStates，并將默認的Transition時間

變換為0.5s?

?? 現在單擊 Add State按鈕添加一個State，并且命名為MouseEnter，這個時候你會發現，Workspace會出現紅色邊線

?? ?? 這個其實就是提醒你，這時候對VisualTree的任何改變將記錄到一個Storyboard中

這個時候就可以通過點擊Objects and Timeline中的Show Timeline按鈕對Timeline進行動畫修改咧，

確保選中MyEllipse圖形，通過Recode Keyfrme按鈕記錄動畫

這里按照前面的想法，當鼠標進入時，將MyEllipse的Fill屬性由Red改為Yellow

???? ?

? 這樣我們就設計好了一個VisualState了，那么這里我另外再設計一個名MouseLeave的 VisualState，使得鼠標移走時，顏色由黃色變回紅色

? 其實過程都是一樣的，我就不重復了。

??????????????????????????????? ? 那么如果想修改狀態遷移，也可以直接在Blend中修改。

? 可以看看生成的XAML代碼：??? ?

??? 為了看到效果，我們在VS中進行設置：

private void MyEllipse_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e) { VisualStateManager.GoToState(this, "MouseEnter", true); } private void MyEllipse_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e) { VisualStateManager.GoToState(this, "MouseLeave", true); }

? 這里用到了VisualStateManager類中的GoToState這個方法，運行一下就可以看到效果了

? 其實到這里已經把前面VSM里大部分概念都涉及到了，給我的感覺這個地方如果掌握的好，并且還有好的創意，

我相信做出來的效果肯定很炫。這篇就到這里，希望對使用Blend的朋友有點幫助。

?

?

?

本篇代碼：Silverlight3環境? VSMExample

轉載于:https://www.cnblogs.com/626498301/archive/2010/12/13/1904592.html

總結

以上是生活随笔為你收集整理的Blend设计VSM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。