Convert an Expression Blend Project to a XAML for Windows Embedded Application Template (Compact 2013)

Article
11/09/2017

3/26/2014

Windows Embedded Compact 2013 offers two ways to create a XAML for Windows Embedded application template.

If you have Platform Builder installed, you can import an Expression Blend project into an existing OS Design project.
If you do not have Platform Builder installed, you can create the project using the Windows Embedded XAML Tools. This method also requires that you install an SDK that was built from an OS Design project that included support for XAML for Windows Embedded.

The following procedures assume that you have Platform Builder installed.

Prerequisites

Prepare an Expression Blend Project

The Windows Embedded XAML Tools installation includes a XAML for Windows Embedded Clock sample project, which provides the basis for the tutorials in this section.

To prepare the XAML for Windows Embedded Clock sample project

Browse to the WindowsEmbeddedXAMLClock sample folder located at %ProgramFiles%\Windows Embedded XAML Tools.
Do one of the following:
- If you have Expression Blend installed, you can copy the sample project to the C:\Users\[name]\Documents\Expression folder, as long as there are no spaces in the full name of the file path.
- If you do not have Expression Blend installed, create a C:\ExpressionBlend working folder and copy the WindowsEmbeddedXAMLClock sample project to it.

You will use the accompanying WindowsEmbeddedXAMLClockUpdate folder later in this tutorial to apply updates. When you merge these updates into your sample project, you will overwrite some files. To avoid overwriting the original sample project, you create a working copy of the sample folder in C:\ExpressionBlend.

In the following steps, you create and run a XAML for Windows Embedded-based application, MyClock.exe, which is based on the XAML for Windows Embedded Clock sample project.

Include XAML for Windows Embedded in Your OS Design

Before you can run XAML for Windows Embedded-based applications in Windows Embedded Compact, you must include the native XAML for Windows Embedded runtime in your device image.

To include XAML for Windows Embedded in your OS Design

Start Visual Studio.
In Platform Builder, open the OS Design for your target device.

If you do not have a device, you can use the sample virtual device that shipped with Compact 2013. For more information using a virtual device, see Set Up a Virtual Test Device or Use the Sample Virtual Device.
In Platform Builder, open the Catalog Items View for your OS Design. If the Catalog Items View is not visible, follow these steps to make it visible:
1. In Visual Studio, click the View menu.
2. Select Other Windows, and then select Catalog Items View. The Catalog Items View pane appears in Visual Studio.
Expand Core OS, **Windows Embedded Compact **, Shell and User Interface, and then **XAML for Windows Embedded **.
Under **XAML for Windows Embedded **, select the check box for **XAML for Windows Embedded **. This enables the Sysgen variable SYSGEN_XAML_RUNTIME in your OS Design.
Expand Core OS, Core OS Services, and then Kernel Functionality.
Under Kernel Functionality, verify that the check box for Target Control Support (Shell.exe) is selected. This enables you to use the Target Control functionality in Platform Builder to communicate with an attached device, such as a virtual device.
Build your OS Design.

Generate a Platform Builder Subproject From Your Expression Blend Project

To create an initial XAML for Windows Embedded application template from an Expression Blend project, use the Windows Embedded XAML Tools Platform Builder Subproject Application Wizard. The Subproject Application Wizard generates a Platform Builder subproject from the resources and XAML files of the source Expression Blend project. After you incorporate this Platform Builder subproject into your OS Design, you can develop, test, and deploy the application as you would any other Windows Embedded Compact application.

When you import your Expression Blend project into a Platform Builder subproject, follow these guidelines.

Avoid making manual changes to the Expression Blend XAML files; always edit XAML files from within Expression Blend.
If your Expression Blend project contains user controls, ensure that each user control has a unique name, even across namespaces.
Verify that your Expression Blend project includes a default App.xaml file for the application class and MainPage.xaml (or Page.xaml) for the startup; do not rename these files.
Name all XAML elements that you will attach to event handlers. If you want Windows Embedded XAML Tools to generate empty stub code for your event handlers, you must explicitly name these XAML elements from within Expression Blend.
If you want to add XAML Resource Packager (XRPack) identifiers to user controls in your Expression Blend project, add these identifiers before you import the project. For more information about application packaging with XRPack, see XAML Resource Packager in the Windows Embedded Compact 2013 documentation. For special XAML programming considerations related to XRPack, see XAML Markup Reference for XRPack.
Finalize the Expression Blend project name and location, XAML file names, the .csproj file name, and all namespace names before you start the Subproject Application Wizard. Changing the names or locations of any of these files and folders can break build dependencies between your subproject and the Expression Blend project.

Perform the following steps to create a Platform Builder subproject for the MyClock application.

To create the initial MyClock subproject from the XAML for Windows Embedded Clock sample

Create an empty folder called MyClock to hold your Platform Builder subproject. For example, if the name of your OS Design is VCEPC, create a MyClock folder in this location:

C:\WINCE800\OSDesigns\VCEPC\MyClock
With your OS Design project open, click **Windows Embedded XAML Tools ** on the Tools menu, and then click Create Platform Builder Subproject.
When the Create Platform Builder Subproject dialog box appears and displays the Overview, click Next.
In the Project Name dialog box, type "MyClock" for the name.
Browse to the location of your empty Platform Builder subproject MyClock folder (for example,

C:\WINCE800\OSDesigns\VCEPC\MyClock).

Click Next.
In the Project Selection dialog box, click Browse, and then navigate to the .csproj file of the XAML for Windows Embedded Clock sample that you copied to C:\ExpressionBlend earlier. This file is at the following location:

C:\ExpressionBlend\WindowsEmbeddedXAMLClock\WindowsEmbeddedXAMLClock.csproj
Select the .csproj file, and then click Open.
In the Project Selection dialog box, under Project Contents, verify that the Project Selection dialog box displays MainPage.xaml, and then click Next.
Verify that the Validation dialog box shows No Errors Reported to indicate that Windows Embedded XAML Tools imported the Expression Blend project successfully.

If the error message The project file you selected is either invalid or corrupt appears, Windows Embedded XAML Tools was unable to create a Platform Builder subproject from the Expression Blend project. For more information about resolving validation errors, see Troubleshoot the Clock Application.
Click Finish to view the Summary Report Change Log.

Important

After you have created a Platform Builder subproject, do not move or rename the associated Expression Blend project folder, XAML files, or .csproj file. Your Platform Builder subproject depends upon the .csproj and XAML files of the associated Expression Blend project.

Add the Subproject to Your OS Design

To build and test the application template that the Subproject Application Wizard produced, you must add the generated Platform Builder subproject to your OS Design.

To add the MyClock subproject to your OS Design

Open your OS Design project in Platform Builder.
On the Project menu, click Add Existing Subproject.
In the new Windows Explorer window, browse to the location of your MyClock project (for example, C:\WINCE800\OSDesigns\VCEPC\MyClock\MyClock).
Select the .pbpxml file associated with the MyClock subproject, MyClock.pbpxml. Click Open.

Build the Application Template

Once you have incorporated this subproject into your OS Design, you can compile and link the generated application template to run on your target device.

To build MyClock.exe

Select your OS Design in Platform Builder. In the Solution Explorer pane, expand Subprojects to view all subprojects.
Locate and right-click the MyClock subproject that you created earlier, and then click Build.
Verify that the output window displays the following message:

C:\WINCE800\OSDesigns\VCEPC\MyClock\MyClock\sources - 0 error(s), 0 warning(s)
======== Build: 1 succeeded or up-to-date, 0 failed, 0 skipped ========

Run the Application Template

When the subproject builds successfully, you can run the resulting application, MyClock.exe, on your target device by performing the following steps.

To run MyClock.exe on your target device

Connect and boot up your device in Platform Builder. If you are using virtual device, be sure that your virtual device is running and connected to Platform Builder as described in Download the OS to the Device.
On the Target menu, click Run Programs.
In the Run Program dialog box, under Available Programs, select MyClock.exe and then click Run.
Verify that your target device displays the face of the XAML for Windows Embedded clock with stationary hour, minute, and second hands pointing downward at six o’clock, as shown in the following figure.

Running the Application Template

The hands of MyClock do not yet move; you will add functionality later in this tutorial so that MyClock can display the current time.

The Subproject Application Wizard creates enough C++ code in the application template to do the following:

Initialize the Windows Embedded Compact XAML for Windows Embedded runtime.
Instantiate XAML-declared objects in the XAML for Windows Embedded runtime.

Although the C# code-behind files of the source Expression Blend project contain functionality to animate the hands of the clock, Windows Embedded XAML Tools does not port this code for you. In the next section, you will add C++ code to animate the hands of MyClock.exe so that it can keep time.

Next Steps

Develop Your Application by Adding C++ Code