Providing Touch Feedback with the TiltEffect

In an environment whose primary input method is touch, providing feedback when a user interacts with UI elements helps to engage the user and improves the perceived responsiveness of the UI. On the desktop, a pointer indicates the location of the mouse, and hover events are used to provide different states for interactive controls. On the phone, however, there is no mouse, and no way of knowing when a user’s finger is above an element if screen contact is not made. The TiltEffect component provides feedback to the user when she taps and holds an element. It is simple to set up and has out-of-the-box support for many of the built-in controls (see Figure 9.21).

FIGURE 9.21 With the tilt effect enabled, a button tilts when it is tapped and held.

To use TiltEffect on your page, set the IsTiltEnabled attached property of the TiltEffect class to true within the PhoneApplicationPage element, like so:

Click here to view code image

<phone:PhoneApplicationPage
    ...
    toolkit:TiltEffect.IsTiltEnabled="True">

To prevent the tilt effect from being applied to a particular element on your page, set the TiltEffect.SuppressTilt attached property to True, as shown:

Click here to view code image

<Button Content="without tilt effect"
        toolkit:TiltEffect.SuppressTilt="True" />

Out of the box, TiltEffect supports two base control types: ButtonBase and ListBoxItem. The tilt effect is automatically applied to any classes deriving from ButtonBase or ListBoxItem, or indeed ListBoxItem itself.