Expression Blend 的點滴（4）--建立相似iPhone屏幕鎖控件（下）

接着上篇。。。

接下去，將一步步演示若是建立當點擊checkBox後，其中的按鈕由左邊滑動到右邊，表示處於Checked狀態。

首先，切換到States選項卡，而後點擊checked項：



接着查看時間線和對象區，確保已經選定到了grid，由於當Checked狀態發生時，咱們要改變grid的位置，使得它從第一列變到第二列。



而後，能夠修改grid的Column屬性到1；



好了，一個相似iphone屏幕鎖的控件算完成了，可是這時你運行的話，會發現還有一點點不完美的地方，就是，當Checked的時候，按鈕會直接從第0列跳到第一列，咱們想讓運動更平滑一點，固然，這裏的方法不少，能夠把grid改爲canvas而後修改margin值，或者修改水平位移，在Checked中添加過渡狀態。不過這樣作，將破壞佈局。在這裏其實很簡單，只要一步就能夠了：



點擊上圖所示按鈕，並設定一個時間，這就啓用了平滑佈局模式，這樣，運動按鈕滑動將會以流暢的動畫來表示，甚至能夠添加緩衝動畫效果。

好了，最後再拖放個圓，看看這個checkBox的功能若是。當Checked的時候改變圓的顏色：

   private   void  checkBox_Checked( object  sender, RoutedEventArgs e)
        {
            myellipse.Fill = new  SolidColorBrush(Colors.Red);
        }

         private   void  checkBox_Unchecked( object  sender, RoutedEventArgs e)
        {
        myellipse.Fill = new  SolidColorBrush(Colors.Blue);
        }

完成了，最後看看演示效果：