Content Index Search
 

Hook up to an existing event handler method

Microsoft® Expression Blend™ was designed with team development in mind. Software teams often are made up of designers who work on the user interface (UI) and programmers who work on the code that runs behind the UI. If you are a designer, you might receive an altered code-behind file from a developer who has added various event handler methods for you to hook into from the UI. You can do this in Expression Blend.

For more information about event handlers in code, see Event handling in this User Guide. For information about creating interactivity in your Expression Blend application without using code, see Triggers in this User Guide.

To hook up to an existing event handler method that is contained in a code-behind file

  1. Make sure that you have the latest code-behind file that contains the event handler methods. You can do this by using Windows Explorer to copy the file into your project folder, or by copying the entire project.
    Warning The code-behind file must match the Extensible Application Markup Language (XAML) file in which you want to hook up event handlers. For example, the XAML file Window1.xaml matches the code-behind file Window1.xaml.cs if the x:Class name in the XAML file matches the namespace and class name of the code-behind file. For example, in the XAML file:
      x:Class="myProject.Window1"
    In the code-behind file:
      namespace myProject
  { 
      public partial class Window1
  2. Open your project in Expression Blend.
  3. Open your document (for example, Window1.xaml) by double-clicking it under Files in the Project panel.
    Your document will open for editing. Make sure you are in Design view, by clicking the Design tab on the right side of the artboard.
  4. Under Objects and Timeline in the Interaction panel, select the object that you want to hook up to an existing event handler method. For example, if you want a rectangle object to move when a button is clicked, select a button object.
    The background behind the name of the object is highlighted, to show that the object is selected.
  5. In the Properties panel, click the Events button Events button.
    A list of all available events for the selected object appears, in alphabetical order.
    Warning Events will not appear if the project is still in a temporary state. For example, a newly-created project is stored in a temporary location until you click File and Save All. After you save the project, you will be able to see and select events in the Events panel.
    Tip To see a short description of an event, move your mouse pointer over the name of the event. A tooltip will appear, with a description of the event. You can also see a list of the available events and their descriptions in the Events quick reference.
  6. Click inside the text box for the event that you want to hook up, and type in the name of the event handler method in the code-behind file. When you are done, press ENTER to move focus from the text box.
    Warning We recommend that you copy and paste the method name from the code-behind file into the Events panel. Expression Blend generates code for new event handler methods unless the method name already exists in the code-behind file. This means that if you misspell the name of an existing event handler method in the Events panel of Expression Blend, a new method will be created in the code-behind file using the misspelled name. For this reason, verify in the code-behind file that you do not have any empty event handler methods when you are done.
  7. Save your file (CTRL+S) and test your application (F5) to make sure that you see the behavior that you expect.