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

作者: nowpaper 來源: 博客園發布時間: 2011-02-14 23:12 閱讀: 1685 次推薦: 0 原文鏈接 [收藏]

　　網頁應用受限于自身的瀏覽器范疇，不能把華麗效果完全展示，正是因為如此，在網頁上誕生了無數絢麗的設計，雖然動感程度和桌面應用無法比擬，但是在UI上卻下足了功夫，用戶體驗可以說無以倫比，比如說小小的菜單，在桌面游戲還停留在四態按鈕的時候，網頁應用都已經入動感時代了，這次，使用Silverlight實現一個小菜單，體驗一下動感吧

　　當鼠標移入的時候，目標的圖標就會放大，形成一個階梯的效果，要實現這個效果，將需要使用自定義控件和StackPanel的知識。

　　現在在一個Silverlight工程中添加新控件，用來制作小圓圈圖標，你需要準備一些ICON作為資源，我這里使用了Silverlight 游戲開發小技巧：實現街霸4的選人界面的資源。

　　為了方便控制，把UserContorl的大小設定為64x64，在LayoutRoot里面添加一個Image控件，起名為IconImage，這個我們會在自定義屬性中控制圖片的來源：

　　IconCard.cs中代碼寫成如下：

public partial class IconCard : UserControl
{
　　public IconCard()
　　{
　　　　// Required to initialize variables
　　　　InitializeComponent();
　　}
　　private int _iconindex = 1;
　　public int IconIndex
　　{
　　　　get { return _iconindex; }
　　　　set
　　　　{
　　　　　　_iconindex = value;
　　　　　　var uri = new Uri("/AppleMenu;component/Res/" + value + ".png", UriKind.Relative);
　　　　　　IconImage.Source = new System.Windows.Media.Imaging.BitmapImage(uri);
　　　　}
　　}
}

　　這個可以使用IconIndex來設置具體顯示哪一個圖片Icon，同時這個屬性可以為將來的選定事件做索引。

　　當然了，如果你進行了編譯，可以在Blend中選定控件，找到擴展屬性直接修改：

　　現在在MainPage中添加一個StackPanel命名為Group1，并將顯示方式修改成為“水平”，里面添加一些剛才做制作的圖標控件，

　　上面的Group2是另外一個效果，暫時不需要管他，自定義的控件在Asset（資產）的Project（項目）中查找，如果沒有，則需要編譯一下Crrl+Alt+B

　　添加到StackPanel方法也很簡單，雙擊或者拖動都可以，

　　好了，現在轉入到后臺中寫代碼吧，在Blend或VS中打開MainPage.cs，MainPage構造函數中添加如下代碼：

for (int i = 0; i < 9; i++)
{
　　var c = Group1.Children[i] as IconCard;
　　if (c == null)
　　　　continue;
　　c.IconIndex = i;
　　c.RenderTransformOrigin = new Point(0.5, 0.5);
　　c.RenderTransform = new ScaleTransform() { ScaleX = 1, ScaleY = 1 };
}

　　這段代碼的意思是，從Group1這個控件中取得一個元素，轉換元素成為IconCard控件，如果為null就不是，否則就可以制定一個索引給它，而它的索引屬性會幫我們更改，這個操作你可以參照上面的內容在Blend里完成，而后面的代碼是指定變換的中心點為整個控件的（50%，50%）位置，并且指定一個放縮變換給它，不要著急我們后面會用上。

　　現在給Group1添加一個鼠標的移動事件和鼠標離開事件。

Group1.MouseMove+=new MouseEventHandler(Group1_MouseMove);
Group1.MouseLeave += new MouseEventHandler(Group1_MouseLeave);

　　并且在鼠標移動和離開事件寫入如下的代碼：

void Group1_MouseLeave(object sender, MouseEventArgs e)
{
　　for (int i = 0; i < Group1.Children.Count; i++)
　　{
　　　　var c = Group1.Children[i] as IconCard;
　　　　if (c == null)
　　　　　　continue;
　　　　(c.RenderTransform as ScaleTransform).ScaleX = 1;
　　　　(c.RenderTransform as ScaleTransform).ScaleY = 1;
　　}
}
void Group1_MouseMove(object sender, MouseEventArgs e)
{
　　var pt = e.GetPosition(Group1);
　　int offest = (int)pt.X / 64;
　　if (offest >= Group1.Children.Count)
　　　　offest = Group1.Children.Count - 1;
　　else
　　　　if (offest < 0)
　　　　　　offest = 0;
　　　　double size = 1.5;
　　for (int i = offest; i < Group1.Children.Count; i++)
　　{
　　　　var c = Group1.Children[i] as IconCard;
　　　　if (c == null)
　　　　　　continue;
　　　　(c.RenderTransform as ScaleTransform).ScaleX = size;
　　　　(c.RenderTransform as ScaleTransform).ScaleY = size;
　　　　size -= 0.25;
　　　　if (size <= 1)
　　　　　　size = 1;
　　}
　　size = 1.5;
　　for (int i = offest; i >=0; i--)
　　{
　　　　var c = Group1.Children[i] as IconCard;
　　　　if (c == null)
　　　　　　continue;
　　　　(c.RenderTransform as ScaleTransform).ScaleX = size;
　　　　(c.RenderTransform as ScaleTransform).ScaleY = size;
　　　　size -= 0.25;
　　　　if (size <= 1)
　　　　　　size = 1;
　　}
}

　　這段代碼雖然寫的有點啰嗦，但是看起來并不困難，通過鼠標的X坐標位置取得偏移點，計算出偏移位置上是第幾個控件，然后倒退和前進的方式設置其他控件的大小，這樣就能出來一個類似波浪的效果。

　　現在已經完畢，在下面的DEMO中，會看到最終效果，以及用類似方式做出來的旋轉效果：）

　　本篇工程源代碼下載地址如下：點擊直接下載