Silverlight for Windows Embedded (SWE) provides an application development environment that separates the user interface (UI) design from programming (application logic).  It enables designer (designing the UI) and programmer (coding the application logic) to work on the same application project, independently, doing what they do best.

Once the design specification for the UI is established between the UI designer and application programmer, SWE enables the designer to develop UI for the application without the need to understand the underline programming logic.  At the same time, programmer can go about their coding without being bogged down by the frequent changes to the UI’s graphics and layout.

In addition, SWE leverages the hardware assisted graphic acceleration engine available on many of the new hardware and provides an efficient environment to develop application with 2D and 3D animation easily.

In part-7 of this Compact 7 getting started series, we will go through the process to develop a Silverlight for Windows Embedded application for a Compact 7 device.

Note:

The Compact 7 getting started series consist of 9 different articles, to provide information about OS design, application development and related development tools.  When application, hands-on examples written in step-by-step format with graphic illustrations are provided.

For more information about this series, visit:

    http://embedded101.com/Compact7/  

Prerequisites:

To work through the exercises in this guide, we need to have the following:

·         Successfully compiled a Compact 7 OS image with the necessary components to support Silverlight for Windows Embedded application and deployed the image to a target device.

Target Device:  eBox-3300MX or Virtual PC

For the exercise in this application note, we can work with the OS design project, created in Part-3 (eBox-3300MX as target device) or Part-3a (Virtual PC as target device) of this getting started series.

·         Compact 7 Getting Started Part-3: Develop an OS Design

·         Compact 7 Getting Started Part-3a: Develop OS Design for Virtual PC

Silverlight for Windows Embedded Application

There are two separate development environments to develop a SWE application solution, Expression Blend 3 to develop the UI and Visual Studio 2008 to develop the application logic.

A fully function evaluation version of Expression Blend 3 along with other Windows Embedded Compact evaluation software are available for download from the following URL:

http://www.microsoft.com/windowsembedded/en-us/downloads/download-windows-embedded-compact-ce.aspx

For this application note, we will use a simple hello-world example to demonstration the steps to create the UI from Expression Blend 3, import the Expression Blend project into VS2008, add some codes, build the application and download the application to a Compact 7 device.

Develop UI with Expression Blend

In this section, we will go through the steps to develop a simple UI for a SWE application using Expression Blend 3.

1.       Launch Expression Blend 3.  From Express Blend menu, select FileàNew Project to bring up the New Project wizard.

2.       From the Project types pane on left, select Windows Embedded.

3.       From the right pane, select Silverlight for Windows Embedded Application and enter Compact7SWE as the project name, as shown in Figure-1.

Fig-1

Figure - 1

Note:

When Expression Blend 3 is installed prior to installing Compact 7, the Silverlight for Windows Embedded application template is installed as part of the Compact 7 software installation.

If the Silverlight for Windows Embedded Application template is not available, you need to install the following template from the Compact 7 installation DISC, in the “\WEST” folder:

-          WindowsEmbeddedSilverlightToolsBlendTemplates.msi

4.       Enter Compact7SWE as the name for the project and click OK.

5.       From the Expression Blend menu, select View à Active Document View à Split View to show the application in both design (showing the canvas) and source-code (XAML code) views, as shown in Figure-2.

Fig-2

Figure-2

6.       From the XAML code window, change the width and height to 320 and 240 respectively.

7.       From the Assets tab on the left pane, select the Button control and draw a button on the canvas, as shown in Figure-3.

Fig-3

Figure - 3

8.       From the Expression Blend menu, select FileàSave All to save the project.

Preparing OS Design to Support SWE Application

In this section, we will work through the steps to prepare the OS design project to support the SWE application exercise, using an existing project from Part-3a (Develop OS Design for Virtual PC) of this getting started series.

9.       Launch the MyVPC OS design project.

10.   From the Catalog Items View window, expand the \Third Party\Embedded101 folder.

11.   Expand the AutoLaunch_v300_Compact7 component node and remove (uncheck) the following components:

o   AutoLaunch_v300_Compact7

o   Autolaunch CoreCon

Note:

These two components are not needed for the exercise in this application note.

12.   From VS2008 menu, select ProjectàMyVPC Properties to bring up the MyVPC Property Pages screen.

13.   From the left pane, expand the Configuration Properties node and select Build Options.

14.   From the right pane, double click on Enable KITL to set this build option to YES.

15.   Click Apply follow by OK to save the change and close the screen.

16.   From VS2008 menu, select BuildàBuild Solution to build the OS design.

17.   Download the OS runtime image to a Virtual PC target device for testing. 

18.   After confirming the OS image is able to boot up as expected, close the Virtual PC.

19.   From VS2008 menu, select TargetàDetach Device to terminate the download connection.

Port Expression Blend Project as Compact 7 Subproject

In this section, we will work through the steps to port the XAML code user interface project created with Expression Blend 3 to Compact 7.

Continuing from the previous section, work through the following steps to port the Compact7XAML Expression Blend project created earlier, as a subproject to the MyVPC OS design, from the VS2008 IDE:

1.       From the VS2008 menu, select ToolsàWindows Embedded Silverlight ToolsàCreate Platform Builder Subproject to bring up the Silverlight for Windows Embedded Platform Builder Subproject Wizard.

2.       Click Next to bring up the next screen.

3.       Enter Compact7SWE as the name and click Browse to select a directory for the project, as shown in Figure-4.

Note:

For this exercise, let’s place the subproject in the same directory as the MyVPC OS design.

 

Fig-4

Figure - 4

4.       Click Next to continue to the next screen.

5.       Click Browse and select the following XAML code project file, as shown in Figure-5:

Fig-5

Figure - 5

6.       Click Next to bring up the Validation screen, as shown in Figure-6.

Fig-6

Figure - 6

7.       Click Finish to complete the porting process.

Add SWE Subproject to OS Design

In the previous section, we ported the Compact7XAML Expression Blend project as a Compact 7 subproject.  In this section, work through the following steps to add the subproject to the OS design:

1.       From VS2008 menu, select ProjectàAdd Existing Subproject to bring up a file selection screen.

2.       Navigate and select the following project file, which was created in the previous porting steps:

C:\WINCE700\OSDesigns\MyVPC\Compact7SWE\Compact7SWE.pbpxml

After the subproject is added, it shows up under the Subprojects folder in the Solution Explorer window, as shown in Figure-7.

Fig-7

Figure - 7

 

Configure and Build the SWE Subproject

As part of any application development project, we expected to go through multiple iterations of writing and modifying the code.  To avoid repeatedly recompiling the complete OS design project, which is not needed and take a long time, we can configure the OS design to exclude the subproject from the OS design’s build process and compile the subproject separately as needed.

Work through the following steps to configure the OS design and build the SWE subproject:

1.       From the VS2008 Solution Explorer window, right mouse click on MyVPC and select Properties to bring up the MyVPC Property Pages screen.

2.       From the left pane, expand the Configuration Properties node and select Subproject Image Settings.

3.       From the right pane, select the Compact7SWE project, as shown in Figure-8.

Fig-8

Figure - 8

4.       Click Edit to bring up the Edit Run-Time Image Settings screen, as shown in Figure-9.

Fig-9

Figure - 9

5.       Select Exclude from image and click OK.

6.       From MyVPC Property Pages screen, click Apply follow by OK to save and close.\

7.       From the Solution Explorer window, right mouse click on the Compact7SWE subproject and select Build to build the project as shown in Figure-10.

Fig-10

Figure – 10

Launch the SWE Application on Target Device

In the previous sections, we created a XAML code UI application using Expression Blend, ported the UI application into a Compact 7 SWE subproject, added the subproject to the OS design and built the SWE application. 

In this section, work through the following steps to launch the SWE application to a Compact 7 target device, using Virtual PC as the target device:

8.       Launch the OS runtime image, compiled in the earlier section with KITL enabled, to the Virtual PC.

9.       From VS2008 menu, select TargetàRun Programs to bring up the Run Program screen, as shown in Figure-11.

Fig-11

Figure - 11

10.   From the Available Programs pane, select Compact7SWE.exe and click Run to launch the program on the Virtual PC with Compact 7 OS, as shown in Figure-12.

Fig-12

Figure - 12

Since we did not write any code for the button click event, clicking on the Button control does not have any effect.

Terminate the Compact7SWE application and leave the Virtual PC with Compact 7 OS running.

Add Click Event to UI Project in Expression Blend

In this section, we will add a button click event to the XAML code UI project in Expression Blend.

1.       Launch Compact7XAML project from Expression Blend IDE.

2.       From the Expression Blend menu, select View à Active Document View à Split View to show the application in both design (showing the canvas) and source-code (XAML code) views.

3.       From the XAML code window, change the Button’s Content property to “Hello World”, as shown in Figure-13.

Fig-13

Figure - 13

4.       Click on the Hello World button.

5.       From the Properties tab’s top-right corner, click on the Event icon to bring up the list of available events, as shown in Figure-14.

Fig-14

Figure - 14

6.       Enter Button for the name of the control and double click on the blank text box for the Click event to create a button_Click event, as shown in Figure-15.

Fig-15

Figure – 15

7.       From Expression Blend menu, select FileàSave All to save the change.

Port Updated Expression Blend Project to Compact 7

In this section, work through the following steps to port the updated Expression Blend UI project to the Compact 7 SWE subproject.  Then, build and launch the SWE application:

1.       From the VS2008 Solution Explorer window, expand the Compact7SWE subproject folder.

2.       Expand the Source files folder and double click on MainPage.cpp to open this file in the code editor window.

3.       From VS2008 menu, select ToolsàWindows Embedded Silverlight ToolsàUpdate Silverlight for Windows Embedded Project to port the modified XAML code to the subproject.

4.       Search for the newly added button click event in MainPage.cpp and add a MessageBox function to display a message, as shown in the following code snippet:

HRESULT MainPage::button_Click (IXRDependencyObject* pSender, XRMouseButtonEventArgs* pArgs)

{

    HRESULT hr = E_NOTIMPL;

 

    if ((NULL == pSender) || (NULL == pArgs))

    {

        hr = E_INVALIDARG;

    }

    MessageBox (NULL, TEXT("Hello World!"), TEXT("Compact 7 SWE App"), MB_OK | MB_TOPMOST);

    return hr;

}

 

5.       From the Solution Explorer window, right mouse click on the Compact7SWE subproject and select Build to build the project.

6.       From VS2008 menu, select TargetàRun Programs to bring up the Run Program screen.

7.       From the Available Programs pane, select Compact7SWE.exe and click Run to launch the program on the Virtual PC with Compact 7 OS.

8.       After the application is launched on the Virtual PC, click the Hello World command button to trigger the “Hello World!” message, as shown in Figure-16.

Fig-17

Figure - 16

Summary

Although we used a simple hello-world example in this application note, to demonstrate the steps to develop the user interface using Expression Blend and port the user interface to a Compact 7 native code project, the example demonstrated the two environments, Expression Blend and Visual Studio, can work seamlessly together enabling designer and programmer to work together on the same project, doing what they do best to develop new generation of Windows Embedded device with stunning user interface.

To learn more about Silverlight for Windows Embedded, visit the following URLs:

Silverlight for Windows Embedded information and reference:

http://msdn.microsoft.com/en-us/library/ee502198.aspx

Silverlight for Windows Embedded Code Samples:

http://msdn.microsoft.com/en-us/library/hh802398.aspx