Over a million developers have joined DZone.

Tilt effect on HubTile and Other Controls on Windows Phone

· Mobile Zone

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.

 

Topics:

Published at DZone with permission of Sumit Dutta, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}