Silverlight 3動畫 - 數字倒數

Silverlight 3動畫-照片輪播

這次請到米米貓的朋友米米喵來站台

StepByStep(32)：Silverlight 3動畫-自製重複使用的按鈕

自製圓型按鈕-Demo

StepByStep(32)：Silverlight 3動畫-自製按鈕步驟

步驟
1.建立Silverlight應用程式,為簡單起見只建一個專案外加測試網頁

2.加一個Button
3.Edit Template

4.Name

5.加Ellipse,填漸層色

6.設外框顏色,與粗細

7.設State,當任一狀態轉變到MouseOver時

8.加事件,設0.3s,Fill設為填籃色

9.轉換成Control

10.設Name

11.回到Page.xaml設計畫面,後續可以從工具箱加入自製的MyButton

12.加兩個MyButton到Page.xaml

StepByStep(31)：Silverlight 3動畫-轉轉圖

做出以下效果的Silverlight動畫:

開發工具 : Visual Studio 2010 Beta1 + Expression 3
1.使用Visual Studio 2010 Beta1 建一個Silverlight App
2.加一張圖片到Silverlight App 專案
3.開啟Blend設計Page.xaml
4.將圖片拖到 page.xaml設計畫面

5.設定圖片Layout
6.Add state group
7.Add state,做兩次,一個命名為Normal;一個命為Bigger (目前測試不能命中文,無法Run)

8.設Bigger State 的Scale , 放大兩倍,x=2;y=2;

9.設定旋轉 Rotate角度

10.設定Default Transition時間

11.存檔,回到Visual Studio

12.選取畫面上的Image,設定MouseEnter為goBigger;MouseLeave為goNormal;

13. 程式碼:

1 private void goBigger(object sender, MouseEventArgs e)

2 {

3 VisualStateManager.GoToState(this, "Bigger", true);

4 }

5

6 private void goNormal(object sender, MouseEventArgs e)

7 {

8 VisualStateManager.GoToState(this, "Standard", true);

9 }

14.執行測試網頁,滑鼠未移到圖片上時,Image是標準大小

15.滑鼠移到圖片上方,將放大並旋轉