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

本篇文章，最終效果圖：

 

 

固然，不僅是一個UI而已，若是隻是一張圖片，那專業的設計師能作出更出色的效果。在這裏，它是具備許多事件和屬性的一個控件，其實，它是一個checkBox控件，接下來就讓咱們一塊兒來對checkBox進行大變身吧~話說，以前咱們已經給Listbox變身過了，有興趣的話查看：http://www.cnblogs.com/vimsk/archive/2011/03/09/1978326.html      Blend確實是個好工具，經過它，能夠盡情發揮你的想象力，並且用起來是那麼的方便（怎麼有打廣告的嫌疑，嘿嘿）。好了，廢話很少說了，開始吧~~

 

經過本文章能夠了解到的知識 

 1.經過blend使用template建立自定義的模板.

 2.如何進行template Binding.

 3.Grid佈局

 4.經過States建立 狀態過渡.

 5.Fluid Layout 的應用.

 內容有點多，因此，文章打算分紅兩篇，否則看起來有點累:)

 

如下內容努力建立中...

 

1.打開blend，新建一個Silverlight項目：

 

 

2.從資產面板中拖一個checkBox到工做區：



3.接下來，建立一個模板：



因而乎，咱們就能進入模板編輯區啦，若是看過我以前的文章的話，這些對你來講應該很熟悉了。

 

 

 

上圖所示，你能夠經過它方便進行模板編輯和普通編輯的切換工做。若是此時查看時間線和對象區，你也將看到模板的組織狀況（以下圖所示）。

 

 


上圖所示紅色圈出地方，均可以從模板編輯切換出去。

 

接下來，咱們切換到States選項卡，來查看下checkBox的相關狀態：

 

哇塞。。。一大堆。。。。。@！%￥%#￥@% 

這裏咱們主要關注的是Checked狀態。 由於這個也算是checkBox的主要做用。暫且不去管它，咱們接下去先看看checkBox模板的組成，看了後，發現有一個Grid，裏面放了一個Grid和一個Contentprestener。展開裏面的Grid，咱們能夠看到又有一大堆的東西，有點下，咱們放大看：




上面的Background用到了模板綁定，這樣的好處是當你完成模板編輯後，之後控件修改相關屬性，例如默認checkBox模板的Background就是綁定到控件的BorderBrush屬性，這樣，當控件的BoerderBursh顏色改變了，反應到模板中就是上圖中的Background屬性改變，視覺上就是紅色箭頭所指的顏色。

接下來，咱們看下Contentprestener的屬性，咱們發現，它有個Content的屬性，點擊的話，一樣發現它也是綁定的。



它綁定到了控件的Content屬性，默認拖一個checkBox，它的Content是一個text文本。

瞭解了這些東西后，開始正式動手了，首先，把Grid中的Grid給刪除掉，Contentprestener也刪除掉：

 所有刪除隻身下最外層的Grid，而後，本身放一個空的Grid進去看上去就變這樣了：

 

 咱們的目的是要讓最後的樣子是相似於iphone屏幕鎖的樣子，因此，就按照這個目標，最後的結構是這樣的：

    
展開grid：

 上圖中，Rectangle是一個矩形，表明背景。在內嵌的grid中放置了一個thumb的矩形和一個Path路徑，在畫布上將看到以下的樣子：



其中的thumb就是按鈕，Rectangle是藍色背景，path是中間的箭頭，如今很清楚了吧。。。。

接下來注意觀察上圖。看到頂部有兩把鎖了嗎？中間還有一個斜向雙箭頭的圖案，這裏說明，把Grid分紅了三個列。第一個列是開着的鎖，說明是按照百分比來設定的，中間的是自動寬度，最後的是固定長度，這裏咱們設置爲0. 爲何要這樣設定，固然是有道理的，由於最終，咱們的按鈕是會從第一列滑動到第二列，而第二列長度和控件自己長度有關，當設定爲自動，而且第三列固定爲零，這樣，當控件長度變化時，按鈕將不會滑出grid的外部，具體動手試試就清楚了。

接下來，咱們要對背景色和按鈕的前景色進行綁定，分別綁定到控件的BorderBrush和Foreground：

       



這樣，當咱們切換會控件編輯區後，設定下BorderBrush和Foreground，就會發現模板中相應部分的顏色就會跟着改變。咱們把顏色調好，接着再拖一個checkBox，引用上面咱們編輯的模板

 最後，分別調正兩個checkBox的BorderBrush和Foreground：
到目前位置，只是有了外觀，咱們發現按鈕不會滑動，接下去就來完成當checked的時候，按鈕從左邊滑動到右邊，本篇就先不寫了，太長了，見下篇了吧。。：）