- 類型：Mac網(wǎng)絡(luò)工具大小：1.2M語言：中文 評(píng)分：10.0
- 標(biāo)簽：
網(wǎng)頁(yè)應(yīng)用受限于自身的瀏覽器范疇，不能把華麗效果完全展示，正是因?yàn)槿绱�，在網(wǎng)頁(yè)上誕生了無數(shù)絢麗的設(shè)計(jì)，雖然動(dòng)感程度和桌面應(yīng)用無法比擬，但是在UI上卻下足了功夫，用戶體驗(yàn)可以說無以倫比，比如說小小的菜單，在桌面游戲還停留在四態(tài)按鈕的時(shí)候，網(wǎng)頁(yè)應(yīng)用都已經(jīng)入動(dòng)感時(shí)代了，這次，使用Silverlight實(shí)現(xiàn)一個(gè)小菜單，體驗(yàn)一下動(dòng)感吧
當(dāng)鼠標(biāo)移入的時(shí)候，目標(biāo)的圖標(biāo)就會(huì)放大，形成一個(gè)階梯的效果，要實(shí)現(xiàn)這個(gè)效果，將需要使用自定義控件和StackPanel的知識(shí)。
現(xiàn)在在一個(gè)Silverlight工程中添加新控件，用來制作小圓圈圖標(biāo)，你需要準(zhǔn)備一些ICON作為資源，我這里使用了Silverlight 游戲開發(fā)小技巧：實(shí)現(xiàn)街霸4的選人界面的資源。
為了方便控制，把UserContorl的大小設(shè)定為64x64，在LayoutRoot里面添加一個(gè)Image控件，起名為IconImage，這個(gè)我們會(huì)在自定義屬性中控制圖片的來源：
IconCard.cs中代碼寫成如下：
01 public partial class IconCard : UserControl
02 {
03 public IconCard()
04 {
05 // Required to initialize variables
06 InitializeComponent();
07 }
08 private int _iconindex = 1;
09 public int IconIndex
10 {
11 get { return _iconindex; }
12 set
13 {
14 _iconindex = value;
15 var uri = new Uri("/AppleMenu;component/Res/" + value + ".png", UriKind.Relative);
16 IconImage.Source = new System.Windows.Media.Imaging.BitmapImage(uri);
17 }
18 }
19 }
這個(gè)可以使用IconIndex來設(shè)置具體顯示哪一個(gè)圖片Icon，同時(shí)這個(gè)屬性可以為將來的選定事件做索引。
當(dāng)然了，如果你進(jìn)行了編譯，可以在Blend中選定控件，找到擴(kuò)展屬性直接修改：
現(xiàn)在在MainPage中添加一個(gè)StackPanel命名為Group1，并將顯示方式修改成為“水平”，里面添加一些剛才做制作的圖標(biāo)控件，
上面的Group2是另外一個(gè)效果，暫時(shí)不需要管他，自定義的控件在Asset（資產(chǎn)）的Project（項(xiàng)目）中查找，如果沒有，則需要編譯一下Crrl+Alt+B
添加到StackPanel方法也很簡(jiǎn)單，雙擊或者拖動(dòng)都可以，
好了，現(xiàn)在轉(zhuǎn)入到后臺(tái)中寫代碼吧，在Blend或VS中打開MainPage.cs，MainPage構(gòu)造函數(shù)中添加如下代碼：
1 for (int i = 0; i < 9; i++)
2 {
3 var c = Group1.Children[i] as IconCard;
4 if (c == null)
5 continue;
6 c.IconIndex = i;
7 c.RenderTransformOrigin = new Point(0.5, 0.5);
8 c.RenderTransform = new ScaleTransform() { ScaleX = 1, ScaleY = 1 };
9 }
這段代碼的意思是，從Group1這個(gè)控件中取得一個(gè)元素，轉(zhuǎn)換元素成為IconCard控件，如果為null就不是，否則就可以制定一個(gè)索引給它，而它的索引屬性會(huì)幫我們更改，這個(gè)操作你可以參照上面的內(nèi)容在Blend里完成，而后面的代碼是指定變換的中心點(diǎn)為整個(gè)控件的（50%，50%）位置，并且指定一個(gè)放縮變換給它，不要著急我們后面會(huì)用上。
現(xiàn)在給Group1添加一個(gè)鼠標(biāo)的移動(dòng)事件和鼠標(biāo)離開事件。
1 Group1.MouseMove+=new MouseEventHandler(Group1_MouseMove);
2 Group1.MouseLeave += new MouseEventHandler(Group1_MouseLeave);
并且在鼠標(biāo)移動(dòng)和離開事件寫入如下的代碼：
01 void Group1_MouseLeave(object sender, MouseEventArgs e)
02 {
03 for (int i = 0; i < Group1.Children.Count; i++)
04 {
05 var c = Group1.Children[i] as IconCard;
06 if (c == null)
07 continue;
08 (c.RenderTransform as ScaleTransform).ScaleX = 1;
09 (c.RenderTransform as ScaleTransform).ScaleY = 1;
10 }
11 }
12 void Group1_MouseMove(object sender, MouseEventArgs e)
13 {
14 var pt = e.GetPosition(Group1);
15 int offest = (int)pt.X / 64;
16 if (offest >= Group1.Children.Count)
17 offest = Group1.Children.Count - 1;
18 else
19 if (offest < 0)
20 offest = 0;
21 double size = 1.5;
22 for (int i = offest; i < Group1.Children.Count; i++)
23 {
24 var c = Group1.Children[i] as IconCard;
25 if (c == null)
26 continue;
27 (c.RenderTransform as ScaleTransform).ScaleX = size;
28 (c.RenderTransform as ScaleTransform).ScaleY = size;
29 size -= 0.25;
30 if (size <= 1)
31 size = 1;
32 }
33 size = 1.5;
34 for (int i = offest; i >=0; i--)
35 {
36 var c = Group1.Children[i] as IconCard;
37 if (c == null)
38 continue;
39 (c.RenderTransform as ScaleTransform).ScaleX = size;
40 (c.RenderTransform as ScaleTransform).ScaleY = size;
41 size -= 0.25;
42 if (size <= 1)
43 size = 1;
44 }
45 }
這段代碼雖然寫的有點(diǎn)啰嗦，但是看起來并不困難，通過鼠標(biāo)的X坐標(biāo)位置取得偏移點(diǎn)，計(jì)算出偏移位置上是第幾個(gè)控件，然后倒退和前進(jìn)的方式設(shè)置其他控件的大小，這樣就能出來一個(gè)類似波浪的效果。
現(xiàn)在已經(jīng)完畢，在下面的DEMO中，會(huì)看到最終效果，以及用類似方式做出來的旋轉(zhuǎn)效果：）
下載 
下載 
下載 
下載 
下載 
下載 
喜歡 
頂
難過
囧
圍觀
無聊
