Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Tilt effect on HubTile and Other Controls on Windows Phone

DZone's Guide to

Tilt effect on HubTile and Other Controls on Windows Phone

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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.

 

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}