Editing a Design State

Learn how to edit a design state in Storyboard Designer.

Master/State Context

Once a Design State is added to the application, a new button will appear at the bottom of the Storyboard Editor. This is the Master/State context selector. This button is responsible for determining what information is shown in the Properties View and Variables View, as well as how changes will be applied to the model.


This button also shows up in the Storyboard workbench toolbar.


Master Context and State Context can be thought of as Global and Local contexts.

  • When in Master Context, changes made in the Storyboard Editor, Properties View or Variables View will affect the global state, the regular Screen and all Design States that do not specifically override a value will inherit the change.

  • When in State Context, changes made in the Storyboard Editor, Properties View or Variables View will affect only the currently selected Design State. The exception to this is changes made to elements on the regular Screen will still be propagated to all Design States that do not specifically override the value, since changes to the regular Screen will always be global.

Storyboard Editor

Changes made to model objects in a Design State will automatically add the changes to the Design State. Changes to internal model object attributes such as x, y, width, height and hidden can be made directly through drag and drop operations as is typical when working with the Storyboard editor. The primary difference with the introduction of Design States is depening on your current Context Mode the changes will either be applied globally or locally.

Keep in mind that additions and deletions are always global operations.

Properties View

When in State Context the title at the top of the Properties View will be green and marked with a Design State icon. All properties that are changed in a Design State will be highlighted green and styled in bold text.


When in State Context, changing a property that does not have a variable bound to it will open the following dialog:


The purpose for this dialog is that Design States can only change properties that can be changed at runtime, in the case of render extensions, only properties with variables bound may be changed at runtime.

  • If the change is intended to be a global change, then the user will select Switch to Master Context.

  • If the user actually wants to remain in State Context and change the specific Design State, then creating a new variable will allow changes to be made specifically to the selected model object in the context of the current Design State.

Variables View

When in State Context, variables that are changed in a Design State will be styled in bold in the Variables View.


Manually Editing Design States

When we select a Design State from the Application View or from the Storyboard editor, the Properties View will be populated with the Design State and it's arguments.

Animation Arguments

A Design State can be made up of several arguments, any number of which may be animation arguments. Just like animations at runtime, Design State animation arguments can specify a context in which to run. To specify a context, choose the menu_button.png button of an animation argument and select Choose Animation Context, animation keys which are context specific (i.e. ${control:.. or ${layer:..) will be resolved with the specified context.

Variable Change Argument

Variable changes are simple key-value assignments. The most appropriate editor for the specified variable will be shown in the properties view such as an RGB editor for color variables or an image selector for image variables. At this time, context based keys are not supported so all keys must be fully qualified paths to variables.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request



Article is closed for comments.