Create and Prepare the OS Design and Application Launcher Project (Compact 7)

Article
03/14/2014

3/12/2014

Before you create a Microsoft Silverlight for Windows Embedded application launcher by using the sample home screen, you must use Platform Builder to create an OS design project in which you select the screen size and the theme design you want to start with. Then you modify the sample home screen to meet the needs of your users.

You can choose from three different screen resolutions and four different visual themes for each screen resolution. This topic describes each of the options and then describes how to create an OS design that uses the preliminary theme and a display screen size.

Each display screen size supports a specific layout based on a specific screen resolution that determines how elements are sized, positioned, and arranged on the screen, .

Each theme design for a display screen size provides a visual appearance for the UI elements, with customized colors, textures, and icons.

Prerequisites

To create a Silverlight for Windows Embedded application launcher by following the procedures in this section, you must install the following items in order:

Microsoft Expression Blend 3, downloaded from Download: Expression Blend 3 + SketchFlow Trial.
Microsoft Visual Studio 2008 with SP1.
Windows Embedded Compact 7 with Platform Builder and Windows Embedded Silverlight Tools. For more information, see Installation.
If you want to run and test your application launcher, you will need a device or a virtual CEPC. For information about setting up a device, see Develop with Virtual CEPC.

The Expression Blend templates are installed at %ProgramFiles%\Microsoft Expression\Blend 3\ProjectTemplates\en\Windows Embedded Silverlight Tools\Application.

If you are using a non-U.S. English language version of Expression Blend 3, you must manually copy the template files from %ProgramFiles%\Microsoft Expression\Blend 3\ProjectTemplates\en\Windows Embedded Silverlight Tools\Application to a directory that you create in your local user directory: %Users%\user-name\Documents\Expression\Blend 3\ProjectTemplates\Windows Embedded Silverlight Tools\Applications.

After you manually copy the files to the new directory path, Expression Blend displays the templates in the New Project dialog box.

The procedures in this topic and in the rest of the topics in this section assume some familiarity with Silverlight for Windows Embedded and Expression Blend. For an introductory tutorial, see Getting Started with Silverlight for Windows Embedded.

Determine the Display Screen Size

Use the following table to determine which screen size to use.

Display Screen Size	Characteristics
Small	Screen resolution of 480 × 640 pixels Portrait orientation
Medium	Screen resolution of 800 × 480 pixels Landscape orientation Tip: Use the medium screen size for a virtual CEPC.
Large	Screen resolution of 1920 × 1080 pixels Landscape orientation

Choose the Preliminary Theme Design

After you decide which display screen size to use for your theme, you decide which preliminary theme design to work from.

The theme designs available for each display screen size are described below.

Theme Designs for Small Display Screens

The following table shows the theme designs available for the small display screen size:

Theme	Appearance
Default Theme
Theme 1
Theme 2
Theme 3

Theme Designs for Medium Display Screens

The following table shows the theme designs available for the medium display screen size:

Theme	Appearance
Default Theme
Theme 1
Theme 2
Theme 3

Theme Designs for Large Display Screens

The following table shows the theme designs available for the large display screen size:

Theme	Appearance
Default Theme
Theme 1
Theme 2
Theme 3

Create an OS Design That Uses the Preliminary Theme and Display Screen Size

After you decide which theme and display screen size to start with, create an OS design from the Embedded Device with Silverlight XAML design template. When you create the OS design, select the display screen size and preliminary theme, and then customize the theme to meet the needs of your users.

If you decide to implement theme switching, the preliminary theme you choose will be the default theme for your Windows Embedded Compact device.

Note

Subsequent procedures in this section require an OS design with a display screen size and preliminary theme.

To create an OS design that uses your preliminary theme and display screen size

In Platform Builder for Windows Embedded Compact 7, on the File menu, point to New, and then select New Project.
In the New Project dialog box, under Project Types, select Platform Builder, enter a name for the project, and then click OK.
Click Next.
In the OS Design Wizard, on the Board Support Packages page, click Virtual PC: x86, and then click Next.
On the Design Templates page, select Embedded Device with Silverlight XAML, and then click Next.
On the UI Screen Size page, select the display screen size that you want:
- For a small display screen, select 640 × 480 Portrait (IMG_SCREEN_SMALL) for a small display screen.
- For a medium display screen, select 800 × 480 Landscape (IMG_SCREEN_MEDIUM) for a medium display screen.
- For a large display screen, select 1920 × 1080p Landscape (IMG_SCREEN_LARGE) for a large display screen.
Click Next.
On the Applications page, expand Sample Home Screen and select one of the following preliminary themes:
- Default Theme (IMG_XRST_THEME_0)
- Theme 1 (IMG_XRST_THEME_1)
- Theme 2 (IMG_XRST_THEME_2)
- Theme 3 (IMG_XRST_THEME_3)
Select the Silverlight for Windows Embedded applications that you want to include in the OS design and then click Next.
Click Finish.
In the Catalog Item Notification dialog box, read the notification, and then click Acknowledge.
In Catalog Items View, browse to <OSDesignName>\Core OS\Windows Embedded Compact\Core OS Services\Kernel Functionality and then select the Target Control Support catalog item (SYSGEN_SHELL) to use the Target Control command-line prompt window in Platform Builder.
On the File menu, click Save All.

To build and run the OS design

With your OS design project open in Visual Studio, on the Build menu, click Build Solution.
In the Output window, verify that the build succeeded.
On the Build menu, click Make Runtime Image.
In the Device drop-down menu, select the name of the Virtual CEPC device that you already configured.
Start the virtual CEPC that you have preconfigured and connected to Platform Builder, as described in Develop with Virtual CEPC. For example, to start Virtual CEPC on a computer that is running Windows 7:
- On the Start menu, point to All Programs, point to Windows Virtual PC, and then click Windows Virtual PC.
- Double-click the virtual CEPC you have preconfigured.
On the Target menu, click Attach Device.

Your OS image is downloaded to the virtual CEPC and boots up to show the current, default application launcher.

Now that you have an OS design project that includes support for Silverlight for Windows Embedded and uses the sample home screen, follow the procedures in this section to customize the home screen.

Edit the XAML Project for the Theme in a Working Folder

After you determine the display screen size and preliminary theme design and create an OS design, you can use Expression Blend 3 to change the foundational XAML for the sample home screen. You edit the XAML files in a working folder.

Each preliminary theme design includes the base elements of a Microsoft Silverlight for Windows Embedded application launcher for a Windows Embedded Compact device. You can use Expression Blend to change the visual appearance or the layout of the elements, replace the elements, and add additional elements to the theme design.

To create a custom theme by starting with a preliminary theme for the sample home screen, you must copy the XAML project to a new folder, edit the XAML by using Expression Blend, and then add the updated XAML project to the OS design.

You can implement a development process with a UI designer in which the UI designer edits the XAML project and sends updated versions of the XAML UI at different stages of the development process. Then, you can add the updated XAML UI to the run-time image and test functionality and graphics performance. This process is sometimes referred to as the designer/developer workflow.

To copy the theme project to a working folder

Locate the project for your chosen theme, in the %_WINCEROOT\PUBLIC\SHELL\OAK\XRSHELL\Assets folder. For example, if you created an OS design for a medium screen size and chose Theme 3, the corresponding project is in the %_WINCEROOT\PUBLIC\SHELL\OAK\XRSHELL\Assets\Medium_Theme3 folder.
Create a backup of the original project files. You can back up the project files by adding the folder to a source control system or by storing a copy of the files. You will be replacing the files in the %_WINCEROOT\PUBLIC\SHELL\OAK\XRSHELL\Assets location with your customized files, so it is important to create a backup version.
Copy the project folder to a working folder, for example, to the C:\Users\<user_name>\Documents\Expression folder.

To prepare to edit the XAML project for a preliminary theme

Open Microsoft Expression Blend 3.
On the File menu, click Open Project/Solution.
Browse to the project file (.csproj) for the XAML project that you copied to your working folder.
Click Open.
If you get a warning about the font, Segoe UI, not being a built-in font, you can ignore the warning. The Segoe UI font is available while you edit your project in Expression Blend, and the font is also included in your OS design, so you do not need to embed it in your application. If you want, you can close the Results window where the warnings are displayed.
On the Projects tab, double-click a XAML file to edit.
Edit the XAML for the file by using the Expression Blend development environment. For tutorials on editing XAML, see Learn Expression Blend.
On the File menu, click Save All.
Press F5 to test the project in a browser window. The startup page is configured in the project files, so you do not need to specify a startup page in Expression Blend. Note that because the project was created for Windows Embedded Compact, it might not perform well in the browser window, but you will be able to view most of your XAML changes in the browser window.

You are now ready to customize the application launcher project in Expression Blend. You can use the procedures in this section for ideas, or you can modify the project on your own.

Warning

Elements that have x:Name attribute values prefixed with an underscore (_) might have C++ code-behind attached to them. If you modify the x:Name attribute value or delete the element, the sample home screen might generate a run-time exception unless you modify the C++ source code in %_WINCEROOT%\Public\Shell\Oak\XRShell. For information about editing a XAML project in Expression Blend, see Editing XAML on MSDN.

Next Steps

After you complete your customizations, you can use the procedures in Build and Run the Application Launcher to rebuild the theme DLL by using the Command Prompt window in Visual Studio before you rebuild your run-time image.