Expression Design Export as a build task

When I made the Minesweeper app a while back I had the original graphics in an Expression Design document and was doing all of the graphics work inside of Design. I got pretty tired of manually bringing the graphics from Design into Blend and decided to take a bit of a diversion to automate the process.

I decided that the workflow that I really wanted to have was to have my Expression Design file in my project system and have a custom build task automatically convert it into XAML for the final project. Design has a great feature called Slices which let you slice and dice the original artwork export those slices and save all of the export settings in the .design file.

I figured out that with a build task and some trickery I could automatically extract all of the slices, generate some additional helper code and make the slices act just like custom controls in the project.

The great part about the workflow is that all you need to do to modify any graphics in your WPF or Silverlight project is:

1. Make your changes to the .design file in Expression Design
2. Save the .design file
3. Build & Run from either Visual Studio or Expression Blend

 

In addition there are some other cool benefits:

1. All of the generated controls automatically appear in intellisense in Visual Studio and in Blend's Asset Library
2. Any images from the export (from images in the original project or rasterized effects) automatically get added to the compile project as well.
3. All changes to the .design file automatically migrate into the project but there are no intermediate files anywhere in the project. The exported XAML and generated code are purely intermediate files which get cleaned up by a clean build. This means there's no getting out of sync between your .design and .xaml files.
4. Exporting is only done when the .design file changes, so incremental build times remain zippy.

 

The steps to make this work in your own project (works for both WPF & Silverlight):

• A licensed version of Expression Design 2 installed into your Program Files directory
• Add a DesignExport folder to your project and copy DesignExport.targets and DesignExport.exe to this folder. These are the build tasks for converting the .design file to xaml.
• Add your .design file to your project by using the Add Existing Item command in Visual Studio or Blend.
• Open the .csproj file for your project in Notepad and make the following changes:
  • Add a reference to the DesignExport.targets file which was copied over in step #2, usually I do this just below the import statement for the CSharp.targets file

        <Import Project="DesignExport\DesignExport.targets" />

• Change the build action for your .design file from 'None' to 'Design'

        <Design Include="Minesweeper.design" />

Please note that this relies on unsupported functionality within Expression Design, it can (and most likely will) break in any future release.

Source code:

• A sample WPF application
• A sample Silverlight application
• The original Minesweeper project built using the DesignExport build tasks
• Source code for the build tasks