Branding the SketchFlow Player

After you have created a prototype using Blend for Visual Studio 2012 + SketchFlow, you can distribute the files so that stakeholders can view the project by using the SketchFlow Player. By default, the SketchFlow Player includes a branding area that displays the text "Microsoft SketchFlow Prototype." You can customize this branding area to suit your needs. For example, you can replace the default text with your company name or a custom project name. By using special tags, you can further customize the text, and even include a custom image, such as your company logo.

Default branding

Custom branding

Branding tags

SketchFlow project settings are applied on a project-by-project basis, meaning that any changes that you make will apply only to the project in which you are currently working.

To modify the branding area, on the Project menu, click SketchFlow Project Settings. In the SketchFlow Project Settings dialog box, in the Branding text box, type the text that you want to have appear in the area. For example, include the project name, the client name, or your company name. You can also use the following tags to further modify the branding text:

• {br}   Inserts a line break.

• {nm}   Inserts the prototype file name.

• {vr}   Inserts a custom version number. For more information, see "Display the version number," later in this topic.

• {pr}   Inserts the prototype revision number, which is automatically incremented each time a prototype is published for review by using either Publish to Sharepoint or Package SketchFlow Project (available on the File menu).

• {fg=#XXXXXXXX}   Changes the text color. Use 16-bit hexadecimal color codes with the alpha component. For more information and a list of color codes, see Color Object.

• {logo=namespace.classname}   Displays a SketchFlow screen or a UserControl in the branding area.

You can include up to four lines of text in the branding area.

Display a logo

You can display a SketchFlow screen or UserControl in the branding area. For example, if you have included your logo as a SketchFlow screen or UserControl in the project, you can type {logo=namespace.classname} in the Branding text box to include that screen or UserControl in the branding area. Just replace namespace.classname with the reference to the UserControl that you want to include. To locate the namespace.classname, open the screen or UserControl that you want to include in Split view. Locate the code that begins with x:Class. The code that follows is the code that you want to include to replace namespace.classname in {logo=namespace.classname}, for example, SilverlightPrototype1Screens.Screen_5.

[!NOTA]

The branding area is 64 pixels high and 208 pixels wide. Screens or user controls that exceed those dimensions may not be displayed correctly.

Display the version number

You can include the prototype version number in the Branding text box by using {vr}. The version number has to be changed in the code, but it will appear in the branding area of the SketchFlow Player. By default, the version number is 1.0.0.0.

To change the version number, in the Project panel, locate the Screens project (SilverlightPrototype1Screens, for example). In the Properties folder, open Version.cs and locate the following code.

// Version information for an assembly consists of the following four values:
//
// Major Version
// Minor Version
// Build Number
// Revision
//
// You can specify all the values or you can default to the Build and Revision Numbers
// by using the ‘*’ as shown below:
// [assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]

In the uncommented [assembly: AssemblyVersion("1.0.0.0")], change the value to the value that you want. The next time that you build the project and start the SketchFlow Player, the new version number will appear in the branding box.