Posts
80
Comments
214
Trackbacks
0
Silverlight for Windows Embedded tutorial (step 2)

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.

    IXRStoryboardPtr sboard;

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


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:

class BtnEventHandler
{
protected:

    IXRButtonBasePtr    btn;
    IXRStoryboardPtr     sboard;

public:

    BtnEventHandler(IXRButtonBasePtr& button, IXRStoryboardPtr& storyboard) : btn(button),sboard(storyboard)
    {    
    }

   
We also need to change its declaration inside the WinMain function:

    BtnEventHandler handler(btn,sboard);


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:

        HRESULT        retcode;
        XRClockState ckstate;

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


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":

        XRValue btnvalue;

        btnvalue.vType=VTYPE_READONLY_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:

    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;
    }

   
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.

posted on Sunday, October 11, 2009 3:49 AM Print
Comments
Gravatar
# re: Silverlight for Embedded tutorial (step 2)
Shai
10/12/2009 1:32 AM
Valter,
Thank you for an invaluable resource for Silverlight.
I feel that the fact this is COM programming will prevent Silverlight from being too wide spread. But, I might be wrong...

Thanks,
Shai
Gravatar
# re: Silverlight for Embedded tutorial (step 2)
sol
10/12/2009 1:39 AM
thanks for your tutorial,to the silverlight i was familiar,but not to wince6.0
Can you introduce how to make your first program running on an emulator?my development platform is vs2005+winnce6.0 r3,thx,looking forward to your reply.
Gravatar
# re: Silverlight for Embedded tutorial (step 2)
Valter Minute
10/12/2009 2:33 AM
To sol:
You can find many tutorials about CE on this page:
http://msdn.microsoft.com/en-us/windowsembedded/ce/aa731296.aspx
To add Silverlight for Embedded support to your OS Design you can see the tutorial on the "Discover the Windows Embedded experience" blog:
http://discovertheexperience.blogspot.com/2009/09/windows-embedded-ce-60-r3-using.html

to Shai:
I agree that COM isn't exactly the most popular technology in those ".NET/managed" days, and a COM-based API may sound obsolete. But I should also point out that using smart pointers and other helper classes provided by ATL and the latest release of MS compilers makes COM-based development less boring and less error-prone than it was when this technology was release. COM has quite a bad reputation between developers for being difficult to master and to implement and sometimes it deserves it's bad reputation but I think that using it inside Silverlight for Embedded was not a bad choice and providing support for smart pointer etc. inside the first release was a great way to point people in the right direction, avoiding "native" COM programming and using wrappers to reduce development time and programming mistakes.
Using .NET for silverlight would have made development even better, leaving reference counting and all that stuff to the .NET runtime but it may have an high performance impact on the low-end architectures where CE runs and those low-cost processors are mostly used for consumer devices where a nice and user-friendly interface is a killer feature.
Gravatar
# re: Silverlight for Embedded tutorial (step 2)
Shai
10/12/2009 9:57 AM
Hi Valter,
Your link to /images/geekswithblogs_net/WindowsEmbeddedCookbook/screenshots/step2/screenshot05.PNG seems to be broken in the article.

Shai
Gravatar
# re: Silverlight for Embedded tutorial (step 2)
Valter Minute
10/12/2009 10:03 AM
I can see that image in my browser and on the server file list.
Or you mean that it's broken because the text is rotated 180° and not 360°?
Gravatar
# re: Silverlight for Embedded tutorial (step 2)
Shai
10/13/2009 6:13 AM
Sorry, I didn't notice it was displaying above. You have a text saying "/images/geekswithblogs_net/WindowsEmbeddedCookbook/screenshots/step2/screenshot05.PNG" under the picture "http://geekswithblogs.net/images/geekswithblogs_net/WindowsEmbeddedCookbook/screenshots/step2/screenshot07.PNG"
So I thought it was a broken link.

PS
(You don't need to publish this response. It is not important nor critical)
Gravatar
# re: Silverlight for Embedded tutorial (step 2)
Valter Minute
10/13/2009 6:52 AM
Thank you very much for your feedback Shai, it seems that you read my own articles more carefully than I do!
Gravatar
# re: Silverlight for Embedded tutorial (step 2)
james
10/19/2009 7:10 PM
waiting for some sample tutorial on graphic (bitmap, icon, or png object) ui by using silverlight
Gravatar
# re: Silverlight for Embedded tutorial (step 2)
Valter Minute
10/20/2009 2:15 AM
New tutorial steps are coming soon, I hope.
Graphics will be an argument for sure, even if my graphic capabilities aren't so good... but I'm a programmer and XAML has been made to let the graphics part to the people that are good at it and coding to poor developers like me :)
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 2)
dhanesh
12/30/2009 9:52 PM
thanks for nice articles,
Please solve my one more problem regarding,using images in silverlight for windows embedded.
http://forums.silverlight.net/forums/p/153142/341898.aspx#341898
thanks in advance.
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 2)
paslatek
5/6/2010 8:05 PM
Hi, Thanks for tutorial ! This technology sound good I think ! :D
Just a question, do you know if Binding expressions are supported into Xaml and if yes, how to write the c++ side (something like a dependencyproperty) ?
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 2)
Valter Minute
5/10/2010 1:42 AM
Databinding is not supported on the current release of Silverlight for Windows Embedded.
You may attach named properties to any object derived from IXRDependencyObject.
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 2)
Jiang Qibing
5/30/2010 1:29 AM
Thank you! I would like to see discussed in the next steps.

Post Comment

Title *
Name *
Email
Comment *  
Verification
Toradex logo

Cookies in Use
Tag Cloud