Start a Project that Involves Designers and Developers (Compact 2013)

Article
11/09/2017

3/26/2014

One common problem that UI designers make is starting to write the implementation too early. It is very important, especially when you design the UI for a new product, to spend sufficient time prototyping for the following reasons:

Prototypes enable designers to quickly test many possible designs and focus in on their favorites.
Some level of usability testing can be performed on prototypes and the cost of fixing usability issues during prototyping is much less than during the project implementation phase. Usability testing often leads to new design ideas that might not otherwise have been found.
Prototypes give a development team a tangible example to strive for.
The less mature a project concept is before writing the initial designer/developer contract, the more likely that it will have to be extensively refined during application development.

Prototyping Tools

There are many prototyping tools available to a designer and many excellent blogs, papers, and books describing how to use them. Designers should use the prototyping tools they are most comfortable with. Common tools include pencil and paper, Microsoft Office PowerPoint, or a graphics editor.

Blend for Visual Studio is a visual design tool that can be used to quickly create a functional prototype by laying out interactive controls and other design elements on a page. The advantage of using Expression Blend to create your prototype project is that if you use the XAML for Windows Embedded Application template, your project can be easily converted into a XAML for Windows Embedded application.

For more information about how to obtain the XAML for Windows Embedded Application project template for Expression Blend and the Windows Embedded XAML Tools for converting projects in Visual Studio, see Install the Windows Embedded XAMLTools. For information about XAML for Windows Embedded support in Expression Blend, see Expression Blend and XAML for Windows Embedded.

The Designer/Developer Contract

Once the designer is satisfied with the structure of the prototype for the application, the designer and the developer have to work together to define how the UI layer and the underlying business programming logic (also called the code-behind) fit together. This is referred to as the designer/developer contract (referred to as the contract). This contract has to cover the following items:

UI Controls. Any buttons, text boxes, edit boxes, check boxes, radio buttons, list boxes, or other controls that have to be accessed in the code-behind must have agreed-upon names. This allows the code-behind to access the state of these items and take appropriate actions. A useful convention is to prefix the names of these controls with an underscore. For example, a control that contains a list of the user’s contacts could be named "_contacts".
User Controls. In Expression Blend, designers can encapsulate multiple UI controls into an entity called a user control (UserControl in Expression Blend, IXRUserControl in XAML for Windows Embedded). These can cover concepts as simple as a set of strings making up a contact card, or as complex as a screen in the UI. The code-behind defines the functionality for each of these user controls as a C++ class and so the contract must specify the class name of this user control.
Storyboards or Visual States. Expression Blend provides rich support for defining animations of various items in the UI. Storyboards and Visual States (in the Visual State Manager) can be used to provide transitions between states in the design, as well as just moving things around the screen. In the code-behind, Storyboards and Visual States are referred to by name and so the names of these animations must be specified in the contract.
Event Handlers. User actions in the UI are reported back to the code-behind as events. For example, when the user clicks on a button, a callback function associated with that button is called in the code-behind, allowing the application to take the appropriate action. Depending on how the developer attaches these callback functions to the UI controls, the actual name of these callback functions may be important. However, it is very important that the contract enumerates all of the events that have to be handled in the UI.

The contract can be implicit in the structure of the Expression Blend project, but it is often helpful to write a document that explicitly states the control names, user controls, Storyboard names, Visual States, and event handlers that are covered in the contract.

It may be somewhat intimidating at the start to go from a rough prototype to the structure and rigor of the designer/developer contract. The following guidelines are intended to help you create a contract:

Screens in the UI should correspond to user controls. This way the designer can easily see the layout of each screen in Expression Blend. If many screens share the same layout, it may make sense to have all these screens correspond to a single user control. For example, if the project has multiple menu screens, they are likely to share a single layout.
Groups of UI items that function as a single entity, especially if they appear in multiple locations throughout the UI, correspond to user controls. For example, in a music playback application albums are likely to be displayed in lists in a particular way (for example, the album cover art on the left and the artist name and album name stacked on the right). Because this configuration will appear many times, it should be encapsulated in a user control.
Simple UI items like text, buttons, and check boxes that do not have complex interactions with other UI items should correspond to the appropriate built-in controls, such as TextBlock (IXRTextBlock in XAML for Windows Embedded), Button (IXRButton in XAML for Windows Embedded), and CheckBox (IXRCheckBox in XAML for Windows Embedded).
Graphic assets, even if they are only placeholders, should be added to the initial Expression Blend projects. It is easy to change them later.
If a user control has multiple modes that are visually distinct, these modes can be represented as states in the Visual State Manager. In addition to obvious examples like button click states, the screens making up a wizard can be represented as Visual States, allowing visually rich transitions between the screens.
For UI visual transitions that do not naturally map to Visual States, Storyboards can be used to capture the transitions.
Add event handlers for each type of event for any UI item that responds to user input like mouse clicks, mouse drags, or text entry.

The following image shows an example of a designer/developer contract for part of a music application.

Figure 1: An Example of the Contract Details for a Simple Prototype Screen

Example designer/developer contract for a UI

	The four buttons for the different ways of browsing the library are represented as button controls (Button in Expression Blend, IXRButton in XAML for Windows Embedded). The XAML element names for the buttons will be _Artists, _Albums, _Songs, and _Playlists. The buttons respond to Click events.
	The album view screen is a user control that will be named AlbumViewScreen in XAML.
	The list that holds all of the album names is a list box control (ListBox in Expression Blend, IXRListBox in XAML for Windows Embedded). The list box will be named _AlbumList in XAML.
	The common view for each album is a user control that will be named AlbumView in XAML. The albums respond to Click events.
	Most albums are expected to have album art included in their metadata. Those that do not will display a default album image. The album art or image will display in an image control (Image in Expression Blend, IXRImage in XAML for Windows Embedded).

Create the Initial Expression Blend Project

With the contract complete, the designer and developer can begin implementing the project.

To get started on the design side, the designer needs an initial Expression Blend project that contains all of the relevant details of the project. If the designer has a reasonable familiarity with software development, it may be feasible for the designer to create the Expression Blend project. Otherwise, we recommend that the designer and developer to work together to create the Expression Blend project.

To create the initial Expression Blend project

In Expression Blend, create a new Project using the XAML for Windows Embedded Application template.
For each UserControl that is a part of the project, select New Item on the File menu and add a UserControl with the desired name.

In the example in Figure 1, there are two user controls to be added: AlbumViewScreen and AlbumView.

For projects with more than a handful of user controls, you should add folders to the project and put the user controls in the appropriate folders, so that they can be easily found. The file hierarchy has to be agreed upon by both the designer and the developer.
For each UserControl, add the UI items that are specified in the contract.

In the example in Figure 1, the UserControl named AlbumViewScreen needs five items: the Button objects (_Artists, _Albums, _Songs, and _Playlists) and the ListBox object (_AlbumList).
For the user controls that have visual states associated with them, add each of the named states for the UserControl. Similarly, add Storyboards for all other visual transitions needed for the UserControl. The actual animations are added later.
For each UI item that responds to events, add event handlers in the Events pane.

In the example in Figure 1, the Button objects respond to Click events.

You can use the following topics in Expression Blend Help to do some of the steps in the previous procedure.

One helpful way that a developer can ensure that the contract is maintained is to write a C# code-behind for the application that provides some functionality and touches each item called out in the contract. This code-behind can also be used to populate user controls with values that allow the designer to see how they will appear.

Create the Initial C++ Project

Once the initial Expression Blend project is complete, the developer uses the contract to create the C++ files that will connect with the XAML files from the designer. Each user controls in the Expression Blend project requires a corresponding pair of C++ header and implementation files.

The header file includes the class definition for the user controls, member variables for each UI item called out in the contract, and any event handlers called out in the contract.
The source code file includes code stubs for instantiating the user controls and for each event handler called out in the contract.

The developer can start writing the code for these source files before the Expression Blend project is available. However, the best practice is to convert the initial Expression Blend project into a XAML for Windows Embedded project by using the Windows Embedded XAML Tools. The designer would not have to be finished with the appearance and behavior of the Expression Blend project before it is converted for the first time, but the designer should have all of the XAML files and named elements in place. That way, all of the pieces of the project are available to the developer. For example, all of the C++ files for the user controls and the method stubs for the events are generated automatically. After the initial conversion, the developer can add code that they know will work with future updates from the designer, as long as the designer does not change file names, element names, or method names.

The way you convert an Expression Blend project depends on whether you have Platform Builder installed. For more information, see Create a Project for a Windows Embedded Compact Application.

Tip

Before you convert a Expression Blend project, save it in a folder path that does not contain spaces.

To convert the initial Expression Blend project into a Platform Builder subproject

This procedure requires that you have Platform Builder installed, and you have access to an OS design project.

Follow the steps in Create Your Application as a Platform Builder Subproject, including the optional step 4. In step 5, select Add Existing Subproject. As you go through the wizard, there will be a page where you select the project file for your Expression Blend project.

To convert the initial Expression Blend project into a XAML for Windows Embedded project

This procedure requires that you have installed the SDK that was created from an OS design project. To test your application, you will need a device that has the matching OS image flashed to it, or a stand-alone virtual CEPC (if the SDK was created for a virtual CEPC OS design project).

Follow the steps in Create Your Application Using an SDK for an OS Image. In step 4, select the XAML for Windows Embedded Application project template. As you go through the wizard, there will be a page where you select the project file for your Expression Blend project.

Next Steps

Implement the Project and Iterate through Design Changes