Telerik UI for Windows Phone by Progress


The InteractionEffectManager and its accompanying classes allow for defining and applying interaction effects to visual elements. An interaction effect is applyed when the end-user manipulates a given visual element by using the touch-screen of their phone. By using the InteractionEffectManager you can allow or disable an interaction effect for a given type of visual elements. You can also enable interaction effects for a group of visual elements in a given container.

The IsInteractionEnabled attached property

The InteractionEffectManager defines the IsInteractionEnabled attached property which is used to enable an interaction effect on a given visual element. When this property is set to true on a given element and its type is added to the AllowedTypes collection of the InteractionEffectManager, the default interaction effect is applied to this element. By default a TiltInteractionEffect is used.

The Interaction attached property

The Interaction attached property allows for specifying an interaction effect to a given element. By default, the TiltInteractionEffect is used when the IsInteractionEffect property is set on a visual element. You can, however, override this behavior if you have defined your own interaction effect by explicitly setting the Interaction property on the target element. The next paragraph explains what is an interaction effect and how you can define a custom one.

The InteractionEffectBase class and defining custom interaction effects

The base for all interaction effects is the InteractionEffectBase class. TiltInteractionEffect inherits from this class and overrides its methods to implement the tilt effect. The InteractionEffectBase class may be viewed as the connection between the InteractionEffectManager and your custom interaction effect.

What is an interaction effect?

An interaction effect, in its general implementation, is a visual effect (transformation, projection etc.) which is applied to an element from the visual tree when the end-user of your application manipulates it by using the touch-screen of the phone. For this effect to be applied, the InteractionEffectManager processes the ManipulationStarted event of the target element and transfers it to the defined interaction for this element. It is actually the interaction that defines what will happen after this point.

How to define a custom interaction effect?

To do this you need to inherit from the InteractionEffectBase class. This class exposes two virtual and one abstract methods which can be overriden in order to implement the interaction effect:

  • CanStartEffect - can be overriden to define whether an interaction effect can be started for a given element.
  • CancelEffect - can be overriden to implement a specific logic that will be executed when the effect is canceled by the InteractionEffectManager. This can a logic that resets all visual transformations.
  • OnStartEffect - this is an abstract method which must be overriden. This method is the entry point for the interaction effect. Here you should implement the logic that will apply the effect to the target visual element.

For instance, the TiltInteractionEffect subscribes for the ManipulationDelta and ManipulationCompleted events in the OnStartEffect method to apply and, at the end, reset the tilt effect to the target element.