Silverlight 遊戲開發小技巧：扇形排列元素

鬥地主風靡了大江南北，在春晚都做免費性推廣，棋牌遊戲平臺幾乎將其作為標配，但是牌類遊戲總是一成不變的樣子——橫向排列，如果扇形排列應該更加符合真實，最近在WP7上玩了一個UNO遊戲就是用扇形排列，感覺很不錯， 今天咱們照貓畫虎，在Silverlight上實現一個扇形的手牌效果。

可能看到這個預覽圖有的朋友就會笑了，這個可以使用RenderTransform實現，前面有講過，只需要將RenderTransformOrigin的原點設置在牌外面就行，然後旋轉，這樣實現倒是可以，可是算起來實在麻煩， 要考慮牌數和位置，今天不是炒冷飯，而是使用PathListBox來實現，PathListBox在Silverlight的標準SDK中是沒有的，它是Blend的一個擴展控制項，用來實現路徑動畫等效果。

現在先建立一張牌的控制項，這次不用新建，首先在畫布上畫好，如下圖：

選擇繪製出來的元素，點擊滑鼠右鍵選擇製作成使用者控制項的選項：

輸入一個名字：

這樣就會製作好了一個自訂的控制項，此做法可以省去定大小等麻煩，如下圖：

現在我們添加一個使用者自訂控制項到MainPage看看效果，你需要在Asset（資產）中找到這個使用者控制項，如果沒有則需要編譯一下：Ctrl+Alt+B

現在繪製一個圓形，在工具中選擇Ellipse：

看好規定好的路徑，繪製好位置之後，將這個圓形變成Path路徑，然後在工具列中選擇Direct Selection，選擇下面的兩條線，這兩條線是我們所不需要的，所以直接按Del按鈕刪除掉：

只剩下一個將要作為路徑的Path：

選定Path，點擊滑鼠右鍵選擇製作成為Layout Path功能，這個其實是一個快捷方式，如果正常操作需要引用dll然後添加對應的控制項，我這裡以簡單的方式完成：

PathListBox此時就會出現在佈局中了，並且下面的Path也添加到PathListBox做路徑的基礎。

現在拖動Card控制項到PathListBox中，你會發現牌已經到了最開始的點了：

下面選定PathListBox，把參數設置成如下：

現在複製幾個Card出來看看效果吧，怎麼樣，很不錯吧。

但是這個排列仍然覺得彆扭，調整Path就可以達到你的目標，可是有更好的方法來解決，把參數調整成下面的參數：

就是說開始的點在30%，而結束的點在40%，你可以動態調整一下，看看效果，非常棒，弄成動畫就更有意思了：）

最後把黑線去掉，這樣看起來就更加自然了：

選擇Path把Stroke的顏色畫筆設置為沒有。

好了現在已經完成，我為Card做了一個小動畫看起來更加有趣，在這個小技巧的基礎上，相信各位能擴展更多的玩法出來，今天就到此為止吧：）

本篇工程原始程式碼下載位址如下：點擊直接下載