Add or remove a trigger

You can use triggers to start and stop animation timelines, or change properties of objects. There are two types of triggers:

• Property trigger   The mechanism by which a change in one property (such as the IsPressed property) triggers either an instant change in another property or triggers a gradual change by means of an animated timeline. Property triggers can be set in the style or template of a control.

  For examples of setting property triggers in the simple styles of common controls, see the topics under Styling tips for WPF Simple Styles.

• Event trigger   The mechanism by which an event (such as a mouse Click event) triggers an animation timeline. Event triggers can be set on any object on the artboard, in the style or template of a control, in a user control, or in the root of your document.

  For examples of setting event triggers in the simple styles of common controls, see the topics under Styling tips for WPF Simple Styles.

For more information, see Using triggers to define the behavior of a WPF control.

Note

Triggers are added in the same scope as the animation timeline that they manipulate. For example, in the editing scope of your main document, you cannot set a trigger that will start an animation timeline in the control template for a button, even if that button is in your document. You can, however, set a trigger inside the control template that will start an animation in the same control template. The same holds true for animations that are contained in user controls that are added to your document.

To add a property trigger

1. In the Objects and Timeline panel, select the control whose style or template you want to modify.

2. On the Object menu, do one of the following:

   • To edit the style for the control, point to Edit Style, and then click Edit a Copy.

   • To edit the template for the control, point to Edit Template, and then click Edit a Copy.

   The Create Style Resource dialog box appears.

   For information about styles and templates, and a table that compares them, see the "Styles and templates" section in Choosing and using interactive controls.

3. Click OK to exit the dialog box and open the style or template for editing.

   Note

   This procedure is greatly simplified in order to focus on setting property triggers. For more information about the differences between styles and templates, see the "Styles and templates" section in Choosing and using interactive controls. For information about the options in the Create Style Resource dialog box, see Create a style and Create or modify a template.

4. In the Triggers panel, there might already be some property triggers set for control states such as IsEnabled=True. If you do not see a state that would be appropriate for your trigger, click Add property trigger.

   A default property trigger (MinWidth=0) is added to the list and is selected for editing. Also, the artboard enters recording mode for the trigger.

5. Click the drop-down arrows under Activated when in order to modify the property and value that will activate your trigger. For example, if you are modifying the template of a CheckBox control, you could select target-element.IsChecked=true so that your trigger would be activated when the check box is selected.

   You are now ready to specify what will happen when your trigger is activated.

   Note

   If you want to change the property from target-element to the name of an element in your template, you have to select the element in the Objects and Timeline panel first.

6. To cause a property to change when your trigger is activated, select an object in the Objects and Timeline panel and change a property in the Properties panel. This works because you are in the recording mode for the trigger.

   The property change appears under Properties when active.

7. To control an animation timeline when your trigger is activated, click Add new action, next to Actions when activating.

   • If there is no existing animation timeline to choose from, the Timeline Needed dialog box opens, to ask if you want to create a new timeline. Click OK, and then create your animation by setting keyframes and modifying objects.

   • If there is an existing animation timeline to choose from, a drop-down list appears that contains the timeline and an option to create a new one.

   The timeline appears under Actions when activating and is set to Begin.

8. To exit the editing scope of the style or template, click Return scope to. Press F5 to run your application so that you can test your new trigger.

To add an event trigger

1. In the Objects and Timeline panel, select an object that, when interacted with, will activate your trigger. For example, if you want your trigger to be activated when the user's pointer moves over a text box, select the text box.

2. In the Triggers panel, click Add event trigger.

   • A default trigger is added (When Window.Loaded is raised).

3. Click the drop-down arrows to modify the event that will activate your trigger. For example, if you want your trigger to be activated when the user's pointer moves over a text box, change When Window.Loaded is raised to When textBox.MouseMove is raised.

   Note

   If you want to change the event from Window to the name of an element in your template, you have to select the element in the Objects and Timeline panel first.

4. To control an animation timeline when your trigger is activated, click Add new action, next to When checkBox.MouseMove is raised.

   • If there is no existing animation timeline to choose from, the Timeline Needed dialog box opens, to ask if you want to create a new timeline. Click OK, and then create your animation by setting keyframes and modifying objects.

   • If there is an existing animation timeline to choose from, a drop-down list appears that contains the timeline and an option to create a new one.

   The timeline appears under When checkBox.MouseMove is raised and is set to Begin.

5. Press F5 to run your application so that you can test your new trigger.

To remove a trigger

1. In the Triggers panel, select the trigger that you want to remove.

   Note

   If the trigger that you want to remove is in a style or control template, make sure that you are in the editing mode of that style or template.

2. Click Delete trigger.

3. The trigger is removed from the list.