Note: This is an old entry from my other blog.
In our first tutorial http://geekswithblogs.net/WindowsEmbeddedCookbook/archive/2009/10/01/silverlight-for-embedded-tutorial.aspx we learnt how to load a XAML-based user interface inside your own application and intercept the events that it generates. In this second tutorial we will learn how to use storyboards to create animations inside our user interface and how we can control them from code. We can reopen our silverlight2 application project in Expression Blend 2 SP1 and add a new element to our UI: a TextBlock.
We can place it just under our button.
Then we can create a new storyboard, using the "+" button that we can find just under the "Objects and Timeline" toolbox header.
We should assign a name to our new Storyboard, as we did with the button control.
Now we can move our storyboard time cursor to the 1 second mark and change our page to the end point of our animation.
We can rotate our TextBlock, for example.
Expression Blend create for us the animation and transformation objects required to perform the desired visual effect. We want to have our TextBlock performing a full rotation, so we can edit the parameters of the rotation transform and set the angle to 360 degrees.
By right clicking on the tranform item we can also set the number of iteration that this animation performs. We set it to infinite to have a continous rotation of our poor TextBlock.
Now we save the changes we did to our project in Expression Blend and go back to Platform Builder to change our code. First of all we have to get a pointer to our Storyboard. We can retrieve it using the FindName method of our visual root, like we did to retrieve a pointer to the button object in the first step of this tutorial.
We will need to use the storyboard and button object inside your event handler class, so we need to change it to store those two smart pointers:
We also need to change its declaration inside the WinMain function:
Now we can edit our OnClick event handler to use our button to start and stop spinning animation. First of all we should know if the animation is running. To do that we can retrieve the state of our storyboard object:
if ckstate is XRClockState_Stopped, our animation is stopped, so we will need to start it, using the Begin method of our Storyboard object. If the animation is running we should stop it using the Stop method. At the same time we want to change the text on the button object to reflect the action it performs. The IXRButton object (COM interface) derives from the IXRContentControl object that defines methods to access a control "content". What is "content" for a Silverlight for Windows Embedded object? It's an instance of the XRValue class. This class can contain different kinds of data: strings, numbers, coordinates etc. It's current content type is defined by the vType field and may be one of the VALUE_TYPE enumeration values: 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 Depending on the type you set, you can use one of the fields of the object (defined as an unnamed union) to set the actual value of your XRValue objects. If you worked on COM (Component Object Model) applications in the past (or you are working on this kind of technology right now, of course!) the XRValue object will remind you the VARIANT object that is used in COM to define "generic" data. To change the content of our button we need to declare an XRValue object of type "read only string":
We can assign its value trough the pReadOnlyStringVal field and set it to "Spin!" or "Stop!" depending on our animation current state. The full code of our event handler will be:
A little more complicated than the event handler of our previous tutorial step, but not so much. And in this function we used two very useful features of Silverligh for Embedded: animations and control content access. You can download the full source code here: http://cid-9b7b0aefe3514dc5.skydrive.live.com/self.aspx/.Public/SilverlightSample2.zip Please use the comments to let me know if you find this kind of tutorial useful, to report mistakes and to suggest the arguments that you would like to see discussed in the next steps.