Silverlight 遊戲開發小技巧：動感小菜單2

動感小菜單其實是想模仿Apple的菜單按鈕設計制作，但是畫虎不成反類犬，看起來有點别扭，昨天各位園友提了這方面的建議，感覺太硬如果加入動畫可能更好，非常感謝各位，而今天這篇的動感小菜單2，讓按鈕更加動感“柔”順：）期望能做的更好吧。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/211557832.jpg"></a>

<a target="_blank" href="http://blog.51cto.com/attachment/201111/211605238.jpg"></a>

直接標明一個StackPanel的Group，然後按住Alt鍵複制一個，為了友善程式設計，這次我們将它制作成一個控件：

<a target="_blank" href="http://blog.51cto.com/attachment/201111/211613177.jpg"></a>

在結構裡面直接選擇剛才Copy的組，點選右鍵選擇Make Into UserControl，中文版是制作成為自定義使用者控件選項。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/211630973.jpg"></a>

輸入一個名字，OK，就會自動進入到這個控件的編輯界面，關于自定義控件，我想其他的Blend教程有詳細介紹，這裡隻介紹技巧相關的内容。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/211644635.jpg"></a>

現在我們進入到VS中程式設計，當然了，如果您喜歡在Blend裡直接寫也可以，我個人比較習慣在VS裡編輯：）

你可以在工程中找到剛才制作的控件，選擇對應的cs檔案開始寫代碼吧。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/211653546.jpg"></a>

首先，要設定IconCard的圖像（請一定參看前一篇，本篇是在前一篇中進行的擴充）

在Group3Control的構造函數中寫成這樣：

public Group3Control()   

{   

InitializeComponent();   

for (int i = 0; i &lt; Group3.Children.Count; i++)   

var item = Group3.Children[i] as IconCard;   

item.RenderTransformOrigin = new Point(0.5, 0.5);   

item.RenderTransform = new ScaleTransform() { ScaleX = 1, ScaleY = 1 };   

iitem.IconIndex = i;   

}   

前面看過的朋友應該不難了解，這時一個指定操作。

下面重寫控件的MouseEnter和MouseLeave的函數。

protected override void OnMouseMove(MouseEventArgs e)   

foreach (var item in Group3.Children)   

var t = item as IconCard;   

if (t == null)   

continue;   

double x = e.GetPosition(t).X - t.ActualWidth / 2;   

double y = e.GetPosition(t).Y - t.ActualHeight / 2;   

double mine = Math.Sqrt(x * x + y * y);   

double mineZoom = Zoom(1.2, mine, 72);   

(t.RenderTransform as ScaleTransform).ScaleX = mineZoom;   

(t.RenderTransform as ScaleTransform).ScaleY = mineZoom;   

base.OnMouseLeave(e);   

protected override void OnMouseLeave(MouseEventArgs e)   

(t.RenderTransform as ScaleTransform).ScaleX = 1;   

(t.RenderTransform as ScaleTransform).ScaleY = 1;   

double Zoom(double m, double d, double s)   

if (d &lt; s)   

return (m * (d - s) * (d - s) / (s * s) + 1);   

else   

return 1.0;   

具體意思是，當滑鼠移入的時候，就會計算滑鼠和控件的位置，并将所有的子元素周遊修改放縮，由于通過算法得出，可以很好的讓小按鈕達到“柔”順的感覺：）

非常感謝路毅提供的算法，使得我能夠更專注做關鍵的工作，特此感謝。本工程中有一段是注釋掉的内容，就是他之前的實作效果，有興趣的朋友可以把注釋去掉，看看是什麼樣子。

本文轉自nowpaper 51CTO部落格，原文連結:http://blog.51cto.com/nowpaper/712757