Project and Item template support in Expression Blend

  • Article

Expression Blend 4 has support for authoring custom project and item templates, similar to Visual Studio. However, our support is a strict subset of what Visual Studio supports, and a few changes are necessary to the .vstemplate file to have the projects and items correctly displayed in Blend. A notable exclusion to what Blend supports, when compared to Visual Studio, is the ability to invoke custom wizards that can be used to customize a template when a new template is instantiated.

Getting started

The best way to get started on creating a new project or item template is to use an already existing Blend project or item template. When you install Blend, project templates are installed at C:\Program Files (x86)\Microsoft Expression\Blend 4\ProjectTemplates\en and item templates are installed at C:\Program Files (x86)\Microsoft Expression\Blend 4\Templates\en.

Let us walk thru the process of taking of these, and customizing it a bit. Let's pick C:\Program Files (x86)\Microsoft Expression\Blend 4\ProjectTemplates\en\CSharp\Silverlight\Application. Let's assume that we wanted to customize this template such that a new additional UserControl document is added into the project to start with.

Key changes to be made to a project template

To modify this template, unzip the contents of the zip file (Blend will support extracting templates from zip files, just like VS, but we also support templates that are supplied in an unzipped folder) to a temporary folder, say c:\Temp.

The first thing we want to do is to change the following attributes in the csSilverlightApplication.vstemplate file (you can rename this file too if you wanted):

<Description _locID="BLEND_ProjectDescription">A project for creating rich cross-platform, web-based applications.</Description>
<Icon>ProjectIcon.png</Icon>
<TemplateID>Microsoft.Blend.SilverlightApplication</TemplateID>
<NumberOfParentCategoriesToRollUp>0</NumberOfParentCategoriesToRollUp>
<TemplateGroupID>Silverlight</TemplateGroupID>
<SortOrder>40</SortOrder>

Description and Icon are self-explanatory. For TemplateID, change the string to something unique, for example Microsoft.Blend.SilverlightApplication.NewTemplateWithUserControl. If you had C# and VB versions of your templates, you will want to make sure that they share the same TemplateID to be correctly classified in the project dialog. NumberOfParentCategoriesToRollUp dictates the number of node levels the template would be visible if you did have a hierarchy of nodes in the project dialog. SortOrder is the order in which the templates are sorted at a particular level in the hierarchy. TemplateGroupID represents the hierarchy in the dialog - if you were to change this to Silverlight ; Foo, the template would end up showing under the Foo node under the Silverlight node.

The next thing to modify is to add two new entries for the additional file we want added to a new project when the template is instantiated:

<ProjectItem ReplaceParameters="true" >MainControl.xaml</ProjectItem>
<ProjectItem ReplaceParameters="true" SubType="Code">MainControl.xaml.cs</ProjectItem>

The ReplaceParameters="true" attribute will ensure that when the template is instantiated, Blend will make a pass over the contents of those files and replace any template arguments within those files (in this case, we are going to be having arguments for the default namespace that the control should belong to). If you were adding content into the template that did not have any parameters, say an Image asset, you could use ReplaceParameters="false". Also, if you wanted the item to be opened by default when a new project is created, you could use the OpenInEditor="true" attribute. The format for the TemplateContent section of the .vstemplate file is pretty much identical to the VS format, including support for creating additional assembly references, multiples projects, etc.

We need two additional steps to add the files themselves:

  • Copy and paste MainPage.xaml and MainPage.xaml.cs as MainControl.xaml and MainControl.xaml.cs respectively. If you edit MainPage.xaml, you will notice something like x:Class="$safeprojectname$.MainPage" - this should be updated to x:Class="$safeprojectname$.MainControl". When the template is instantiated, $safeprojectname$ gets replaced with whatever name the user specified when creating a project. Do the same for MainControl.xaml.cs, and update the name of the class to MainControl.
  • Edit the .csproj file, to include the MainControl.xaml, and MainControl.xaml.cs files.

Installation of templates

To install the custom template we just created, you could optionally zip the template. Then copy the folder (or the zip file if you chose to zip the contents) into C:\Users\<username>\Documents\Expression\Blend 4\ProjectTemplates.\ Restart Blend and the new template should show up in the dialog. For item templates, you can install them into C:\Users\<username>\Documents\Expression\Blend 4\ItemTemplates\.

Unfortunately, Blend does not support custom template folders that apply to all users on a machine. If you wanted this, you would need to install the template under the Blend program files folder, alongside the various other Blend templates. Also, the hierarchy of the folders does not matter - you can copy your template anywhere you like, but you should consider creating a new top level folder for your templates to avoid collisions with other templates.