Windows Phone Tilt effect on HubTile and other Controls

In this article I will talk about creating tilt effect in different control in Windows Phone. Implementing tilt effect on controls are easy but few controls like Hubtile, textblock don't create tilt effect itself. We need to little bit work around to achieve. In this article first we will look into how to create tilt effect on normal controls then we will discuss on how to put tilt effect on hubtile, textblock.

Let's write code:

Download Silverlight Windows Phone Toolkit

Step 1: Create a silverlight for Windows Phone project.

Step 2: Add reference of Microsoft.Phone.Controls.Toolkit.dll

Step 3: Add namespace of Microsoft.Phone.Controls.Toolkit in MainPage.xaml.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Step 4: Add below line in phone:PhoneApplicationPage element.

toolkit:TiltEffect.IsTiltEnabled="True"

Step 5: Add a listbox and a button inside ContenPanel of MainPage.xaml.

<ListBox Margin="20,280,0,0" Height="80" FontSize="28" >
<ListBoxItem Content="Item1"/>
<ListBoxItem Content="Item2"/>
</ListBox>

<Button x:Name="tiltEffect" Margin="20,480,0,0" Height="80" Width="430" Content="Tilt" />

Step 5: Now run the application and on touch of listbox item and button you will notice tilt effect.

Step 6: To suppress tilt effect for a particular item of ListBox or control we can use below code.

toolkit:TiltEffect.SuppressTilt="True"

Step 7: Now replace code of Step 5 with below code and run the application, the highlighted code will suppress the tilt effect.

<ListBox Margin="20,280,0,0" Height="80" FontSize="28" >
<ListBoxItem Content="Item1" toolkit:TiltEffect.SuppressTilt="True"/>
<ListBoxItem Content="Item2"/>
</ListBox>

<Button x:Name="tiltEffect" toolkit:TiltEffect.SuppressTilt="True" Margin="20,480,0,0" Height="80" Width="430" Content="Tilt" />

Step 8: Now add a hubtile, textblock and image inside ContentPanel of MainPage.xaml.

<toolkit:HubTile Title="UnFreezed Title" Background="Maroon" x:Name="hubTile1" />

<Image Source="/TestTilt.png" Margin="0" HorizontalAlignment="Left" Height="173" Width="173" VerticalAlignment="top"/>

<TextBlock Text="Testing" Style="{StaticResource PhoneTextExtraLargeStyle}" Height="100" Margin="200,-410,12,0" />

Step 9: Now run the application again and you will notice tile effect won't work for hubtile, image and textblock.

Let's implement tilt effect for hubtile, image and textblock.

Step 10: Now create a class TiltableControl (Highlighted) which in MainPage.xaml.cs above MainPage class.

namespace Windows_Phone___Tile_Effect
{
public class TiltableControl : Grid
{
}

public partial class MainPage : PhoneApplicationPage
{

Step 11: Add TiltableControl in TiltableItems like shown below in the MainPage constructor.

TiltEffect.TiltableItems.Add(typeof(TiltableControl));

Step 12: Add namespace like below in MainPage.xaml.

xmlns:myTilt="clr-namespace:Windows_Phone___Tile_Effect"

Step 13: Now wrap the hubtile, textblock and image control created in Step 8 with TiltableControl.

<myTilt:TiltableControl>
<Image Source="/TestTilt.png" Margin="0" HorizontalAlignment="Left" Height="173" Width="173" VerticalAlignment="top"/>
</myTilt:TiltableControl>

<myTilt:TiltableControl>
<TextBlock Text="Testing" Style="{StaticResource PhoneTextExtraLargeStyle}" Height="100" Margin="200,-410,12,0" />
</myTilt:TiltableControl>

<myTilt:TiltableControl>
<toolkit:HubTile Title="UnFreezed Title" Background="Maroon" x:Name="hubTile1" />
</myTilt:TiltableControl>

Step 14: Now run the application, you will notice hubtile, image and textblock has tilteffect.

This ends the article of tilt effect in hubtile, image and other controls in Windows Phone.

Like us if you find this post useful. Thanks!