Tuesday, 25 September 2012

Detecting Design Mode in Blend

The project I’m currently working on is an app in WinJS. One of the issues we faced is displaying design time data in Blend, in order to enable the designer-developer workflow. The app in question gets its data from the file system, and in most circumstances for HTML5 apps Blend can automatically get data from the file system without any additional effort from the developer. However, there were a couple of lines of code that were stopping Blend displaying design time data.

Visual designers like Visual Studio and Blend enable you to build UI for Windows Store apps by editing activated instances of your custom types. Design tools create an instance of your app in a special authoring mode, known as design mode. When your app runs in design mode, it can execute special logic that enables coordination with the visual designer. Specifically, the DesignMode class enables you to detect whether your app is in design mode in a visual designer. Therefore, the solution was to check for design mode, and place the problematic code inside a conditional.

if (!Windows.ApplicationModel.DesignMode.designModeEnabled) {
    // Code that shouldn't run in design mode goes here
}

Note that the DesignModeEnabled property is only available in the presence of a developer certificate.

The result is an app, that when loaded into Blend,  displays data from the file system in order to enable to designer-developer workflow.

No comments:

Post a Comment