Windows Embedded Compact 7: Silverlight for Windows Embedded Tutorial

Hi folks,

As previously stated, Windows Embedded Compact 7 comes with quite a lot of improvements with regards to Silverlight for Windows Embedded (SWE): SWE is now based on Silverlight 3 and the new Windows Embedded Silverlight Tools (WEST) generate most of the glue code so you don’t have to write the glue code manually any more!

Now let’s focus on our first, simple SWE application for Windows Embedded Compact 7. Let’s begin with the installation: make sure you install Expression Blend 3 prior to Windows Embedded Compact 7 to ensure that the new SWE template will be added to Expression Blend 3. Otherwise you need to reinstall the WEST tools manually after installing Expression Blend 3.

Create an Expression Blend 3 SWE project:

1. Open Expression Blend 3.
2. In Expression Blend 3 click on New Project…



3. In the New Project Dialog select Silverlight for Windows Embedded Application, set the Name to SWEApp, set the Location to C:\Expression\Blend3\Projects\ careful here as this path needs to be WITHOUT spaces.


NOTE:
Later on we will import the project into Platform Builder. Platform Builder cannot handle spaces in the path.
The only option in the Language field is Visual C#. The WEST will convert the C# code to C++ code upon importing the project into Platform Builder.
4. Click OK to create the new project.
5. On the left, double click the Button control to add a default sized button. On the right of the MainPage.xaml window, click on the Split button to display the XAML code underneath


6. In the Properties on the top right set the Name of the button to myButton, to be able to address the button in the SWE C++ code later on.


7. Click on the Events icon to the far right of the Name field and add an Event Handler called myClickMe in the Click field. Upon conversion to SWE C++ code this will generate a Click Event Handler which we will populate later.


8. Examine the XAML view to see that we have created a button named myButton with a Click Event Handler called myClickMe.


9. From the Expression Blend 3 menu select File ¦ Save All, afterwards minimize Expression Blend 3.

Create a SWE subproject in Platform Builder

10. Open your previously created Windows Embedded Compact 7 OSDesign supporting SWE (SYSGEN_XAML_RUNTIME set) in Visual Studio 2008 with Platform Builder.
11. With the OSDesign open, click Tools ¦ Windows Embedded Silverlight Tools ¦ Create Platform Builder Subproject.


12. In the wizard that appears, click Next then enter SWEApp in the Name field and D:\SWESubprojects in the Location field as the name and location for our subproject. Click Next.


13. Specify C:\Expression\Blend3\Projects\SWEApp\SWEApp\SWEApp.csproj as the Silverlight project to convert. The wizard automatically recognizes MainPage.xaml. Click Next.


14. Now the WEST tool does its magic! Notice that there were no errors converting our project. Click Finish to end the wizard.


15. Examine the Summary Report which will be opened in Visual Studio 2008.
16. In the Platform Builder Solution Explorer, right-click Subprojects ¦ Add Existing Subproject….


17. Browse to D:\SWESubprojects\SWEApp, select SWEApp.pbpxml. Then click Open.


18. Take a moment to examine the generated code in App.cpp, MainPage.cpp and WinMain.cpp. In Windows Embedded CE 6.0 R3 we would have to write ALL this glue code ourselves!


19. In MainPage.cpp locate the event handler that we have created in Expression Blend 3: MainPage::myClickMe. Add the following code to display a native message box towards the end of the event handler:
// display a native message box
MessageBox(NULL,TEXT("Hello from Silverlight for Windows Embedded!"),
TEXT("SWE Sample"),MB_OK ¦ MB_SETFOREGROUND ¦ MB_TOPMOST);

hr = S_OK;
Save the file.


20. In the Solution Explorer, right-click your OSDesign and select Properties.


21. In the appearing Property Pages dialog box, expand the Configuration Properties on the left, select Subproject Image Settings, double click SWEApp on the right and make sure that Exclude from image and Always build and link as debug are checked. Click Ok on both dialog boxes to accept the changes.


22. Right-click the SWEApp subproject and select build. Notice that our SWEApp built successfully with 0 errors and 0 warnings.


23. Congratulations! We can now start our image and run our SWEApp.



Don't miss fellow MVP Valter Minute's series of SWE tutorials for Windows Embedded CE 6.0 R3 on his Blog.

Have fun!