Responding to user interactions in a Blend+Silverlight application
In this article, you will learn how to capture user interactions in a Silverlight application with Expression Blend.
Expression Blend 2 is a design tool that allows you to create fantastic
user interfaces for Silverlight applications. Although Expression Blend
does not support direct event handling, it allows you to trap user
interactions and respond to them through the use of the Interaction
window and visual states.
Let's see how you can do this:
InBlend, you can change the appearance of controls in different states
depending on user interaction. For example, if you want that a pale
yellow colored button should appear pale purple on the click of a mouse
or on mouse hover, Blend allows you to do this.
"MouseClick" and "MouseOver"" are some states of a button.
Itis possible to customize the appearance of different states of controlsusing this feature of Blend. The biggest advantage here is that you
don't need to write a single line of code for this. Everything can be
done using menus and various panes.
First, you will need to
create a reusable template for the control. A reusable template is a
copy of the default template which can be modified as per requirements.
The default template itself cannot be modified in any way.
Let usassume that you have created a Shopping Store application and want to
customize the appearance of the Submit button depending on user
Click the Object menu and select Edit Control Parts (Template) as shown in Figure 1.
Select Edit a Copy. This will open the Create Style Resource dialog box as shown in Figure 2.
Adefault name is specified for the style resource. Once this template
has been created, you can edit or modify it as desired and also specify
the states in which this template has certain appearances.
To open the Interaction pane, click the Window menu and select Interaction.
The Interaction pane shows several elements- States, Common States, Objects and Timeline. The Statesgroup element shows the states of a control. For system controls such
as buttons, default state groups and states are already present; you
cannot add new state groups or add states. However for some other
controls such as user controls you can create your own custom state
The States pane displays the default appearance ofthe objects. After you start recording various states, whenever you
want to exit the state-recording mode, you have to select Base.
Select MouseOver in the CommonStates group. In the Object and Timelines group, select contentPresenter.The red circle that appears at the top of the artboard indicates that
state recording is on. As long as state recording is on, any property
changes that you make will be recorded for that selected state. The red
circles around the expander buttons indicate the parts of the template
that have changed properties as compared to when Base is selected.
To render the button as skewed in the MouseOver state, click [Grid] under Objects and Timeline. In the Properties panel, under Transform, specify the coordinates. To end the state recording, select Base.
Buildand test the application. When the application opens in a browser
window, move your mouse pointer over the button and you can see it
Conclusion: Thus, you learnt how to capture user interactions in a Silverlight application with Expression Blend.