米米貓學開發

2009年7月27日星期一

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. 程式碼:

private void goBigger(object sender, MouseEventArgs e)
{
VisualStateManager.GoToState(this, "Bigger", true);
}

private void goNormal(object sender, MouseEventArgs e)
{
VisualStateManager.GoToState(this, "Standard", true);
}