Designer and Developer Workflow in XAML for Windows Embedded (Compact 2013)

  • Article

10/26/2015

XAML for Windows Embedded gives designers and developers the functionality they need to create exciting and visually compelling user interfaces for embedded devices. The design and development approaches that you use to develop these user interfaces are very different from the Win32-based approaches that most designers and developers are familiar with.

This section describes how to go from a prototype user interface design to a working XAML for Windows Embedded project. The key benefit of this approach is that after the project implementation starts, the designers and developers can work in parallel with minimal interaction.There are two primary roles in the XAML for Windows Embedded implementation process:

  • The designer, whose tools include graphics editors for making visual assets and Blend for Visual Studio for creating the XAML that defines the layouts and animations in the device user interface (UI).
  • The developer, whose tools include Microsoft Visual Studio 2013 or Microsoft Visual Studio 2015, and Platform Builder.

For designers and developers to work efficiently together, it is very important that the designer can work on the visual aspects of the project at the same time that the developer works on the underlying business programming logic. To facilitate this, the designer and developer work together to create a designer/developer contract that defines the relationship between the UI layer and the business logic layer.

This contract and prototype are used to create a skeleton project in Expression Blend for the designer and a set of headers and implementation files for the developer. To guide the designer in transforming a prototype into an Expression Blend project, there are several design patterns available. The developer then uses the Expression Blend project to create a corresponding set of C++ header and implementation files.

After the prototype is created, the designer and developer can work independently of each other on their individual parts of the project. If they both follow the contract, they can assemble the XAML from the Expression Blend project and the C++ files at any time and view the current state of the UI.

The contract will probably have to be refined during the lifecycle of a project as the designer improves the prototype. In such situations, the designer and developer simply make the necessary changes to the contract, reflect those changes in the Expression Blend project and C++ files, and then continue with their independent implementation efforts.

The key to the approach for the UI implementation described in this section is that the two parties in the process, the designer and the developer, have a clear division of responsibilities. Designers work on their part of the project by using the tools they prefer and the developers work on their part of the project by using the tools they prefer. They both can work without worrying about whether their work will break what the other party is doing.

Throughout this section, the two parties are referred to as the designer and the developer. In almost all projects, there will be more than one designer or more than one developer, but for simplicity, the collection of designers are referred to as the designer and the collection of developers are referred to as the developer.

The designer’s first responsibility is to create the initial UI prototype. Then the designer works with the developer to write the contract, based on this prototype. Once the contract is complete, the designer creates an Expression Blend project that is a skeleton of the prototype, at the minimum covering everything detailed in the contract. Finally, the designer works in Expression Blend to refine the design.

The developer’s first responsibility is to work with the designers to write the contract. Depending on the background of the designer, the developer may need to help create the initial Expression Blend project. Then the developer uses the contract to create the C++ files that connect with the XAML files.

The following table provides a list of responsibilities for each of the key roles in application development with XAML for Windows Embedded.

Role

Responsibilities

The Designer
  • Initial UI prototyping
  • Coauthors the contract
  • Creates visual elements
  • Uses Expression Blend to author XAML
  • Can demonstrate one or many designs to their team by pressing F5 in Expression Blend to run the project in a browser

The Developer
  • Coauthors the contract
  • Uses Visual Studio to write the underlying business programming logic
  • Uses Visual Studio to write the code that connects the business programming logic to the XAML
  • Takes the XAML from the designer and builds the end-to-end project

In This Section

See Also

Concepts

XAML for Windows Embedded Application Development
Expression Blend and XAML for Windows Embedded