在文章使用Silverlight for Embedded開發絢麗的界面(2)我介紹了如何通過subproject的方式開發SE應用程序，并在文章使用Silverlight for Embedded開發絢麗的界面(3)提供了AlchemySDK，讓開發SE變的更方便。

這篇文章我繼續翻譯：http://geekswithblogs.net/WindowsEmbeddedCookbook/archive/2009/10/11/silverlight-for-embedded-tutorial-step-2.aspx

?

我們講過如何加載一個XAML-based用戶界面到我們的應用程序中，并截獲程序產生的事件。

這篇文章我們會學習如何使用故事板(storyboard)在我們的用戶界面上創建動畫，并介紹如何從代碼中控制這些動畫。

我們使用Expression Blend 2重新打開Silverlight 2 application project，并添加一個新的元素到UI上：TextBlock。

?

我將其放置在Button下面：

?

?

然后我們就可以使用“+”按鈕(在”Objects and Timeline”標題下面)創建一個新的storyboard：

?

我們給新的storyboard分配一個名字方便后面操作：

?

我們將storyboard的時間光標移至1s處：

?

旋轉TextBlock：

?

Expression Blend為我們創建動畫和呈現指定的視覺效果所需要的中間對象(transformation objects)。

我們讓TextBlock執行一個360度旋轉：

?

通過在tranform item上右擊設置動畫的重復次數。我們設置一直重復：

?

保存項目返回Platform Builder修改代碼。

首先通過FindName從visual root獲得指向stroyboard的指針，就像之前我們取得button對象的指針一樣。

?

1 2 3 4 5

IXRStoryboardPtr sboard; if?(FAILED(retcode=root->FindName(TEXT("SpinText"), &sboard))) ????return?-1;

?

我們需要在event handler類使用storyboard和button對象，所以修改它以便儲存這2個對象的智能指針。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

class?BtnEventHandler { protected: ????IXRButtonBasePtr??? btn; ????IXRStoryboardPtr???? sboard; public: ????BtnEventHandler(IXRButtonBasePtr& button, IXRStoryboardPtr& storyboard) : btn(button),sboard(storyboard) ????{??? ????} }

修改在WinMain函數中的聲明：

?

1	BtnEventHandler handler(btn,sboard);

?

編輯OnClick event handler以便控制開始和停止按鈕的旋轉動畫。

先通過獲得storyboard對象的屬性來判斷動畫是否在進行中：

?

1 2 3 4 5 6 7

HRESULT????????retcode; XRClockState ckstate; if?(FAILED(retcode=sboard->GetCurrentState(&ckstate))) ????return?retcode;

如果ckstate的值是XRClockState_Stopped，說明我們的動畫是停止的，那么使用storyboard對象的Begin方法啟動它。

同樣如果動畫是運行的，我們通過Stop方法停止它。

同時我們還想改變button的text以便反應它正執行的動作。IXRButton對象(COM interface) 繼承自IXRContentContro對象，IXRContentContro對象定義了訪問"content"的方法。

那么SE對象的"content"到底是什么？

其實它是XRValue 類的一個實例。XRValue類包含了不同的值：字符串(strings)、數字(numbers)、坐標(coordinates)等。它當前的值類型(content type)是通過vType字段來指定的，vType可以是枚舉類型VALUE_TYPE 的一個值：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

VTYPE_NONE = 0, VTYPE_FLOAT = 1, VTYPE_INT = 2, VTYPE_BOOL = 3, VTYPE_UINT = 4, VTYPE_COLOR = 5, VTYPE_READONLY_STRING = 6, VTYPE_BSTR = 7 VTYPE_POINT = 8, VTYPE_RECT = 9, VTYPE_THICKNESS = 10, VTYPE_SIZE = 11, VTYPE_GRIDLENGTH = 12, VTYPE_CORNER_RADIUS = 13, VTYPE_OBJECT = 14

XRValue對象是否讓你想起COM中的VARIANT對象？

在此我們定義一個只讀的字符串(read only string)作為button的content：

?

1 2 3

XRValue btnvalue; btnvalue.vType=VTYPE_READONLY_STRING;

我們通過pReadOnlyStringVal字段來賦給按鈕的值是"Spin!" 還是"Stop!"，當然我們是根據動畫的當前狀態來判斷的。

全部的enent handler代碼是這樣的：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

HRESULT?OnClick(IXRDependencyObject* source,XRMouseButtonEventArgs* args) { ????HRESULT????????retcode; ????XRClockState ckstate; ????if?(FAILED(retcode=sboard->GetCurrentState(&ckstate))) ????????return?retcode; ????XRValue btnvalue; ????btnvalue.vType=VTYPE_READONLY_STRING; ????if?(ckstate==XRClockState_Stopped) ????{ ????????btnvalue.pReadOnlyStringVal=L"Stop!"; ????????if?(FAILED(retcode=sboard->Begin())) ????????????return?retcode; ????} ????else ????{ ????????btnvalue.pReadOnlyStringVal=L"Spin!"; ????????if?(FAILED(retcode=sboard->Stop())) ????????????return?retcode; ????} ????if?(FAILED(retcode=btn->SetContent(&btnvalue))) ????????return?retcode; ????return?S_OK; }

你可以從這里下載Demo的代碼：

http://cid-9b7b0aefe3514dc5.skydrive.live.com/self.aspx/.Public/SilverlightSample2.zip

作者: 王克偉
出處:?http://wangkewei.cnblogs.com/?
版權聲明: 本文的版權歸作者與博客園共有。轉載時須注明本文的詳細鏈接，否則作者將保留追究其法律責任的權利。
您可以從這里更方便的找到我的文章。 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的使用Silverlight for Embedded开发绚丽的界面(4)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。