Add Tilt Effect to any control in windows phone app

In this post I will explain you how to apply tilt effect on any Windows Phone control like Grid, StackPannel, Rectangle, Image etc. or any other third party control like Telerik control.

Before starting further you all should know What Tilt effect is.

 

What is Tilt Effect?

The tilt effect for Windows Phone controls provides you with the ability to add additional visual feedback for control interaction. Instead of having standard pressed or un-pressed states, controls with the tilt effect provide motion during manipulation. The result is a “tilt”-like response when the control is touched.

 

By default in windows phone app you can apply tilt effect only to a button control using Windows Phone toolkit.

But I have found an easier way of adding tilt effect to any control including the button control.

 

How to apply Tilt Effect?

 

You need to follow the certain steps given below.

1. Create a new Blank Project Tilteffect.

 


 

2. Add the following two classes given below to your project TiltEffect.

 
MetroInMotion.cs

LinqToVisualTree.cs
 


 


 

3. After adding the given classes to your project. Add the following namespace to the MainPage.xaml.

xmlns:local=”clr-namespace:MetroInMotionUtils”

 


 

4. Now just add the control on which you want to apply tile effect. Suppose I want to add the tile effect on an Image control and Rectangle. Add the controls to the MainPage.xaml.

 

5. After adding the controls to the MainPage.xaml. Add the following Property to both the controls.

local:MetroInMotion.Tilt=”6″

The value of Tilt is in range from 1 to 10(low to high) more the value of this property high will be the suppressing effect.

You should usually set it in the range from 4-6.

 


 

6. Now run the application and click on the following controls to observe the effect. You will get an additional visual feedback from the control.

 


 

7. You can follow the same procedure to apply Tilt effect on any control in Windows phone app.

 

8. I hope this post will be helpful to you. You can download the full Project source file from the link given below.

 
Download Full Project file Tilteffect.zip