西西軟件園多重安全檢測下載網(wǎng)站、值得信賴的軟件下載站!
軟件
軟件
文章
搜索

首頁編程開發(fā)其它知識 → Silverlight 游戲開發(fā)設計動感小菜單

Silverlight 游戲開發(fā)設計動感小菜單

相關文章發(fā)表評論 來源:本站整理時間:2011/2/12 9:12:21字體大�。�A-A+

作者:佚名點擊:248次評論:0次標簽: Silverlight

Silverlight for macv5.1.41212.0 官方最新版
  • 類型:Mac網(wǎng)絡工具大小:1.2M語言:中文 評分:10.0
  • 標簽:
立即下載

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

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

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

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

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 }

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

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

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

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

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

好了,現(xiàn)在轉入到后臺中寫代碼吧,在Blend或VS中打開MainPage.cs,MainPage構造函數(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這個控件中取得一個元素,轉換元素成為IconCard控件,如果為null就不是,否則就可以制定一個索引給它,而它的索引屬性會幫我們更改,這個操作你可以參照上面的內(nèi)容在Blend里完成,而后面的代碼是指定變換的中心點為整個控件的(50%,50%)位置,并且指定一個放縮變換給它,不要著急我們后面會用上。

現(xiàn)在給Group1添加一個鼠標的移動事件和鼠標離開事件。

1 Group1.MouseMove+=new MouseEventHandler(Group1_MouseMove);

2 Group1.MouseLeave += new MouseEventHandler(Group1_MouseLeave);


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

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 }

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

現(xiàn)在已經(jīng)完畢,在下面的DEMO中,會看到最終效果,以及用類似方式做出來的旋轉效果:)

    mac瀏覽器
    (29)mac瀏覽器
    西西下載站為大家整理了一些符合國內(nèi)用戶操作習慣的mac瀏覽器下載,如果你不喜歡mac自帶的safari瀏覽器可以來西西下載你喜歡的mac瀏覽器。眾所周知,蘋果公司的產(chǎn)品一向以卓越的工業(yè)設計和完美的用戶體驗著稱,蘋果用戶也逐漸養(yǎng)成了追求卓越產(chǎn)品體驗的習慣。對于蘋果電腦用戶群來說,系統(tǒng)自帶的瀏覽器卻不斷挑戰(zhàn)著這些追求卓越的用戶體驗底線。很多mac用戶無法忍受系統(tǒng)自帶的safari瀏覽器都紛紛轉投其他瀏覽器,這里西西給大家整理...更多>>

    相關評論

    閱讀本文后您有什么感想? 已有人給出評價!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過難過
    • 5 囧
    • 3 圍觀圍觀
    • 2 無聊無聊

    熱門評論

    最新評論

    發(fā)表評論 查看所有評論(0)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字數(shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)