Thursday, 24 June 2010

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!

9 comments:

Valter Minute said...

Pingback:
http://geekswithblogs.net/WindowsEmbeddedCookbook/archive/2010/06/24/silverlight-for-windows-embedded-on-windows-embedded-compact-7.aspx

urmik said...

hi..
I want to make application for Windows CE..I am going to use Windows Embedded CE R3 for that...Is there any way to create applications or Portable navigation device with more attractive GUI like vista or Windows 7 style...And If yes than how??? I want to make application in c#.net...

Jochen Dieckfoß [MVP] said...

Hi urmik,

Thank you for your good question. Silverlight for Windows Embedded (SWE) has a native C++ interface. So if you want to take advantage of the graphical capabilities of SWE I strongly suggest you write your application in C++. Writing C# applications under Windows Embedded CE 6.0 does not come with any nice tools for GUI design like Silverlight or WPF.

However, it is possible to write SWE applications using C#.NET by using P/Inwoke. Fellow MVP Andy Wigley has held a talk
on that topic at TechED North America.

You should keep in mind that complex GUIs need a lot of performance and managed applications increase the need for performance even further. So you should definitely utilize the HW support.

Best regards
-Jochen

Anonymous said...

Hi Jochen,

can you add a couple lines how to debug the silverlight subproject with PB? I think that might add a lot of value to the blog :)

urmik said...
This comment has been removed by the author.
urmik said...

Hi Jochen,

Thank you so much for your kind reply.
I have few questions related to this.
I have seen quite a few videos and images of Windows CE device and Portable navigation device(WinCE platform) with very attractive UI applications..They are using Windows CE 6.0 R3..I am wondering that how they made applications with such attractive UI..Is "Silverlight" only option to make attractive GUI???

Also we can make application for WIndows CE 6.0 using C# managed code in Visual studio 2005 device applications..But from that we can not make applications with attractive GUI...Is there any use of graphic library?? or "Silverlight" only option?and can you give me your e-mail id?

Thanks

Regards,
Urmik

Jochen Dieckfoß [MVP] said...

Hi urmik,

thanks you for your reply. I would assume that those Windows Embedded CE 6.0 R3 GUIs you saw videos off are created using Silverlight for Windows Embedded (SWE).

When writing your application in C# your only option is to use Windows Forms. Which as you already mentioned is not really usable for creating rich UIs. The only addition to the .NET CF I know off is the Smart Device Framework from OpenNETCF but it is not intended to create rich UIs either.

As I suggested before, I would strongly recommend that you use SWE if you want to create rich UIs under Windows Embedded CE 6.0 R3. Again, it also makes sense that SWE is a native framework for performance reasons. When using SWE please use the HW acceleration to achieve good performance.

You can contact our entire Blog team via mailto:embedded-experience@gmx.de

Best regards
-Jochen

Tom said...

Hi,
Is there a way to have West create a project that can be imported into vs2008 without PB.

Thanks,
Thomas

Jochen Dieckfoß [MVP] said...

Hi Tom,

thank you for this good question. I have just written a new post concerning this topic:
http://discovertheexperience.blogspot.com/2011/05/windows-embedded-compact-7-silverlight.html

Have fun
-Jochen