Export (0) Print
Expand All

Add or remove a trigger

This page applies to WPF projects only

You can use triggers to start and stop animation timelines, or change properties on 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 in the Try it! section of 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 in the Try it! section of Simple styles.

For more information, see Triggers overview.

Cc295196.alert_note(en-us,Expression.10).gifNote:

Triggers are added in the same scope as the animation timeline that they manipulate. For example, you cannot set a trigger in the editing scope of your main document 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.

  1. Under Objects and Timeline, 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 Control Parts (Template), and then click Edit a Copy.

    The Create Style Resource dialog appears.

    Cc295196.alert_note(en-us,Expression.10).gifNote:

    For information about styles and templates, and a table that compares them, see the Styles and templates section of the Controls overview.

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

    Cc295196.alert_note(en-us,Expression.10).gifNote:

    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 of the Controls overview. For information about the options in the Create Style Resource dialog, see Create a style resource and Create or edit a control template.

  4. Under Triggers, 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 the Add property trigger Cc295196.9871399d-14aa-4955-9934-04f33700f273(en-us,Expression.10).png button.

    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 check box 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.

    Cc295196.alert_note(en-us,Expression.10).gifNote:

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

  6. To cause a property to change when your trigger is activated, simply select an object under Objects and Timeline 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 the Add new action Cc295196.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(en-us,Expression.10).png button next to Actions when activating.

    • If there is no existing animation timeline to choose from, the Timeline Needed dialog 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 the Scope up Cc295196.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.10).png button. Press F5 to run your application so that you can test your new trigger.

Cc295196.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif Back to top

  1. Under Objects and Timeline, 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 mouse pointer moves over a text box, select the text box.

  2. Under Triggers, click the Add event trigger Cc295196.671c69bb-32e9-4ef9-9837-29403524abd0(en-us,Expression.10).png button.

    • 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 mouse pointer moves over a text box, change When Window.Loaded is raised to When textBox.MouseMove is raised.

    Cc295196.alert_note(en-us,Expression.10).gifNote:

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

  4. To control an animation timeline when your trigger is activated, click the Add new action Cc295196.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(en-us,Expression.10).png button next to When checkBox.MouseMove is raised.

    • If there is no existing animation timeline to choose from, the Timeline Needed dialog 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.

Cc295196.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif Back to top

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

    Cc295196.alert_note(en-us,Expression.10).gifNote:

    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 the Delete trigger Cc295196.d31907a6-867b-4e16-b860-f07c9531fbd7(en-us,Expression.10).png button.

  3. The trigger is removed from the list.

Cc295196.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif Back to top

Community Additions

ADD
Show:
© 2014 Microsoft