First Silverlight for Windows Embedded Application


Hello, my name is Paul Monson and I am one of developers of the Windows Embedded Silverlight Tools (WEST).

This post will give you a brief introduction to the following features:

  • The Blend 3 template for Silverlight for Windows Embedded (SWE) Applications.
  • The wizard for creating a Platform Builder subproject that uses SWE.
  • The event tool.
  • The project update wizard.

The Blend template provides a Blend project that restricts the features available in Blend to match the features available in Silverlight for Windows Embedded as closely as possible. Using this template will enable designers and developers to create projects more quickly since the features available in Blend when using this template should just work in SWE.

Once you have designed the UI in a Blend project you can quickly create a SWE Application using the wizards and tools in Visual Studio 2008. The wizard creates a Platform Builder subproject that provides a minimalist C++ application. The wizard also generates wrapper controls for each of the UserControls that are designed in Blend.

The event tool assists in connecting event handlers to Silverlight controls.

The update wizard updates the subproject with new UserControls, named objects, and event handlers that are added to the original Blend project.

David Shoemaker explained how to install the tools you will need. After build and test your First Image you are ready to create a Platform Builder subproject application using Blend and WEST.

1. Begin by opening Blend 3, creating a new “Silverlight for Windows Embedded Application” project. We will be creating a Platform Builder subproject later, so make sure the location doesn’t have any spaces in it (this means that you can’t create the project in the default project location in the documents folder.)

image

Once the project is created you should see an empty design surface in Blend. Let’s add the text “Hello World” to the design surface by adding a TextBlock and setting the following properties.

2. Set Name to “HelloWorldTextBlock”, Text to “Hello World” and the font size to 24pt.

image

3. Hit F5 and verify that you see the words “Hello World when you run the Silverlight App. Launch VS 2008.

Now that you’ve created a “Hello World” Blend application you are ready to use the WEST subproject wizard to create a Silverlight for Windows Embedded Application. This wizard takes the Blend project you just created as input and creates Platform Builder subproject.

4. Open your OS Design in VS 2008.

5. On the Tools menu find “Windows Embedded Silverlight Tools” and click “Create Platform Builder Subproject…” and click “Next”

image

6. Project Name

a. Name=Hello

b. Choose a location for your subproject.

c. Click “Next”

image

7. Project Selection

a. Browse to and select the Blend project you just created.

b. Click “Next”

image

8. Check the validation report for errors. If you are following along there shouldn’t be any, but if the Silverlight project you selected uses features that are not supported by Silverlight for Windows Embedded you will see warnings or errors here. When you’re done with the report click Finish.

image

9. Now you should see a Summary Report in Visual Studio that includes a list of the files added and the information from the validation report.

image

10. The subproject was created but it isn’t added to your OS Design yet. To add the new subproject to your OS Design, right-click “Subprojects” in the solution explorer, and choose “Add Existing Subproject…” from the context menu.

11. Select the subproject you just created and click OK. The new subproject should now appear as a node in your OS Design.

image

12. Open MainPage.xaml

13. Click View -> Other Windows -> Windows Embedded Events to show the event tool.

14. Select “LayoutRoot” in the upper treeview.

15. Double-click the empty text box next to MouseLeftButtonDown in the lower half of the event tool.

image

16. Copy the following implementation into the stub. This code will exit the application when you click anywhere in the root Grid that isn’t covered by another control.

   1: HRESULT MainPage::LayoutRoot_MouseLeftButtonDown (IXRDependencyObject* pSender, XRMouseButtonEventArgs* pArgs)
   2: {
   3:     IXRVisualHostPtr pHost;
   4:     App::GetVisualHost(&pHost);
   5:     if(pHost)
   6:     {
   7:         pHost->EndDialog(0);
   8:     }
   9:     return S_OK;
  10: }

17. Right-click the subproject node and choose Build.

18. Download your OS image to your device or vCEPC.

19. On the menu choose Platform>Run and select Hello.exe

At this point you should see your “Hello World” screen appear on the device. You have just created a Silverlight for Windows Embedded application. Now let’s add a button and make it do something when you click on it.

20. In Blend 3 add a Button to MainPage.xaml. Set the Name to “Button1” and the Content of the button to “Click Me” and then run the Blend project to verify that it is valid.

21. In VS 2008 open MainPage.cpp and make it the active editor. Any file from the project should work, but in order for the update menu item to work correctly you must have a project file from the project you want to update open in the active editor.

22. On the Tools menu find Windows Embedded Silverlight Tools and click Update Silverlight for Windows Embedded Project…

23. You should see a progress bar briefly, and when it finishes the message “Update Completed” should be displayed in the Output pane.

image

24. Open the MainPage.xaml from the subproject resources node.

25. Click View -> Other Windows -> Windows Embedded Events to show the event tool.

26. Select “Button1” in the upper treeview.

27. Double-click in the right-hand side of the Click event row in the lower grid.

28. A Button1_Click event handler stub is inserted and the cursor is positioned in MainPage.cpp at the insertion point.

29. Change the implementation of the stub to:

   1: HRESULT MainPage::Button1_Click (IXRDependencyObject* pSender, XRMouseButtonEventArgs* pArgs)
   2: {
   3:     m_pHelloWorldTextBlock->SetText(L"Click");
   4:     return S_OK;
   5: }

30. Right-click the subproject and choose Build.

31. If you disconnected from the test device or emulator you will need to reconnect now, and then select Target -> Run -> Hello.exe again.

32. Click the button, you should see the text block change to “Click”

If the new subproject is checked into source control, both the Blend project and the Platform Builder subproject need to be checked in with the same relative path between the projects that they had at the time the new subproject was created.


Comments (14)

  1. ricky says:

    Hi Paul,

    Why I could not found the "Blend 3 template for Silverlight for Windows Embedded (SWE) Applications" in the Blend 3/4. Is this template need to download ? or how to get this template?

  2. Paul Monson says:

    The "Silverlight Windows Embedded Application" template is installed with the Windows Embedded Silverlight Tools which are part of the Windows Embedded Compact 7.0 CTP (go.microsoft.com/fwlink).  

  3. silverlight newbie says:

    Hi Paul,

    Does the SWE application generated from the wizard in C++ always?  How could I generate a C# application?

  4. Todd Segal says:

    Silverlight for Windows Embedded is a C++ framework only. Silverlight in the browser, on the PC and Phone support managed code (like C#) as well.

  5. Gench says:

    Hi Paul,

    I am very confused about the versions of the tools. I would like to develop a silverlight application on windows ce 6.0 R3. In this case, can I use VS 2008 and Blend 3? or do I have to use VS 2005 and Blend 2? Any help is highly appreciated!

  6. AKOCH says:

    Hi Paul,

    By default WEST will place all generated files in the main project folder. Is there a way to direct WEST to put its output in a specific folder? Or at least update files in a specific folder after I've moved them?

    Thanks.

    — Axel

  7. AKOCH says:

    @Gench

    Here is what we've gone through:

    The Silverlight runtime that comes with CE6R3 only supports Silverlight 2 functionality. That means you can use either Blend 2 or Blend 3 but you will have to create a Silverlight 2 project. You can use either VS2005 or VS2008 to create your application as long as you use the correct SDK and target the right device. HOWEVER, you will not be able to use WEST since these tools specifically target the Silverlight runtime that comes with CE7  (essentially Silverlight 3). Also you can NOT use the VS2008 project template for silverlight for embedded that installs with WEST and CE7. The code that this template generates is not compatible with CE6R3. Do yourself a favor and switch over to CE7 — the tool chain is a lot better.

    — Axel

  8. Aravind says:

    Thanks paul, is the tool WEST available to download as a single package, I dont want to download windows compact and install, as i want to convert my c# code to c++ for WinCE 6.0 R3

  9. Arso says:

    Hi Paul,

    How can we "close" silverlight for embedded app from native code? I mean app.exit or something like that but from button clicked code in MainPage.cpp?

    greetings.

  10. Arso says:

    ExitProcess(0); works well. Is there way to hande OnClose event?

  11. Unni says:

    Thanks Paul for the First Silverlight for Windows Embedded Application. It was helpful to get started.

  12. Andrew Craig says:

    Hi Paul,

    do you happen to know if Expression Blend 4 will work with Windows Embedded Compact 7 Visual Studio 2008?  All the examples I've seen mention Expression Blend 3 but this doesn't seem available to buy through Microsoft (unless you take out certain MSDN Subscriptions)

    Thanks

    Andrew

  13. kayalvizhi says:

    thank you paul, could i find more on this embedded topic???

  14. Design says:

    Hi Paul,

       I am seeing strange issue. If I am trying to create a standalone application, build and deploy it is fail in initialization but when loaded as a part of OS image it works fine. Further debugging to this problem reveals to me that it fails to load XMLResource in LoadResourceDirectory app initialization function.