[Silverlight] 天啊!我把CheckBox變成圖釘了!!

敬告:本篇內容極為簡單,完全沒難度可言,若覺得不值一看的大哥大姊們請別鞭我。
相信有玩Blend的朋友應該都很清楚Blend自訂控制項威力的強大,這邊就讓Ouch來班門弄斧一下,示範如何自己做出一個外觀是圖釘的CheckBox控制項(連Developer都可以搞定,完全不用勞煩辛苦的Designer)。



敬告:本篇內容極為簡單,完全沒難度可言,若覺得不值一看的大哥大姊們請別鞭我。
 

相信有玩Blend的朋友應該都很清楚Blend自訂控制項威力的強大,這邊就讓Ouch來班門弄斧一下,示範如何自己做出一個外觀是圖釘的CheckBox控制項(連Developer都可以搞定,完全不用勞煩辛苦的Designer)。

 

首先,我們用Blend建立一個Silverlight專案,在LayoutRoot中任意拉三個Rectangle,並設定該Border為空RadiusXRadiusY各為3,並改變填色為灰色

image



接著調整一下三個Rectangle的大小,讓它看起來比較像圖釘的形狀(由上而下越來越窄,最上方的扁一點,最下面的細一點),接著按住Ctrl點選那三個Rectangle,並使用功能列表的Object->Align->Horizontal Center將三個Rectangle置中對齊,再來將它們三個做個疊羅漢,圖釘的樣子就出來啦。

image



再來一樣使用Ctrl選取那三個Rectangle,再按下滑鼠右鍵,選取Combine->Unite,三個Rectangle就會合體變一個Path了。

image



接下來,在合體成功的Path上按下滑鼠右鍵,選取Make Into Control,於對話視窗中選取CheckBox,並幫要產生的樣式取個名字,這邊我取做PinStyle,再來按下OK鈕。

image



然後就會進入樣版編輯模式,因為我只是要它有圖釘釘住和沒釘住的兩種狀態,並不需要顯示文字,所以直接將ContentPresenter移除掉,同時將Template中的Grid容器改為比較適當的大小

image



這一步就是重頭戲了,我們要讓圖釘有釘住和沒釘住的的兩種狀態,所以開啟States頁籤,進行State的編輯,因為圖釘預設的狀態是沒釘選的狀態,所以我們在Base State中把圖釘先旋轉(Rotate)90度

image



最後,我們要讓圖釘被釘住時要轉成直立的,所以把Check States中的Checked狀態的Path的Rotation值改回0度,接著離開樣版編輯模式,打完收工啦!!(如果希望切換狀態時有動畫的話也是可以自行加入動畫的喔)

來看看做出來的成果:

附上專案原始碼,請笑納: