Issue with Blend SketchFlow templates for Windows when duplicating screens

I previously blogged briefly about the availability of SketchFlow templates for Windows Phone design and prototyping work. Since I found out about these templates, I've been using them for a couple of phone projects pretty successfully.

However, there's one thing I've noticed when working with these templates in Microsoft Expression Blend 4. When you have a screen that you would like to duplicate, you would go to the screen view, right-click the screen icon you want to create a copy of, and then choose the Duplicate command from the popup menu. Then, Blend would duplicate the screen and ask for a new name for it.

But, if you try to build, run or package your project after this, you will find that it does not build. The erro message you get is similar to the following:

Partial declatations of ‘MyProject.My_Screen' must not
specify different base classes.

Why does this happen? The reason is that Blend create a copy of the original screen, but fails to honor the specific base class used by the Windows Phone SketchFlow templates. Also, a C# using clause is missing, so that you must also add that manually.

Thus, it's time for a manual fix. Open the .CS source code file in Blend's build-in code editor (you might need to use the Project tab in Blend to see this file). Another alternative would be to double-click the error message in the Results pane.

With the code file open, note how the class decends from UserControl. This would be fine for regular projects, but not for Windows Phone projects. To correct the error, change the ancestor class to be "WindowsPhoneChrome". This class is not part of the regular .NET libraries, so you need to add the following using clause, too:

using Microsoft.Expression.Prototyping.WindowsPhone.Mockups;

This should so the trick. Now rebuild your project, and error messages should disappear.