Tilt Effect for HubTile - windows-phone-7.1

Question

I added the TiltEffect.IsTiltEnabled property to my HubTile:
<toolkit:HubTile toolkit:TiltEffect.IsTiltEnabled="True" Title="title" Message="This is message" x:Name="name" DisplayNotification="False" Source="pB.png" Tap="tap" />
I also added the HubTile type to the TiltableItems collection in the page's constructor, per the :
public HubPage()
{
TiltEffect.TiltableItems.Add(typeof(HubtTile));
}
but the HubTile don't have tilt effect....
Thanks!

Answer 1

Try adding your HubTile as Content of HyperLinkButton or Button which supports TiltEffect
Add a Style to PhoneApplicationPage.Resources which works for Button and HyperLinkButton that adds support for other controls as Content
<phone:PhoneApplicationPage.Resources>
<Style x:Key="EmptyButtonStyle" TargetType="primitives:ButtonBase">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="primitives:ButtonBase">
<Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
Also add the primitives namespace to the page
xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows"
Then use your HubTile as HyperLinkButtons's (or Button) Content like this
<HyperlinkButton Style="{StaticResource EmptyButtonStyle}">
<toolkit:HubTile toolkit:TiltEffect.IsTiltEnabled="True" Title="title" Message="This is message" x:Name="name" DisplayNotification="False" Source="pB.png" Tap="tap" />
</HyperlinkButton>
This will finally support TiltEffect and HubTile

Answer 2

Get TiltEffect from Updated Tilt Effect - Peter Torr's Blog
OR download the Silverlight Toolkit Source from Silverlight Toolkit - Downloads
and then add the HubTile class to the list of 'tiltableItems' in TiltEffect.cs:
/// <summary>
/// Default list of items that are tiltable
/// </summary>
static List<Type> tiltableItems = new List<Type>() { typeof(ListBoxItem) , typeof(HyperlinkButton) , typeof(HubTile) };
If you decide to modify the Toolkit, be sure to build the project on Release, and target the .dll you create inside your own application.

Answer 3

I've found other simple solution that works great when HubTile is used as ListBox.ItemTemplate.
Simply set TiltEffect.IsTiltEnabled="True" on ListBox and IsHitTestVisible="False" on HubTile and voila - it works :) You can still respond to HubTile clicks through ListBox.SelectionChanged event and HubTile has working tilt effect.

Answer 4

Hubtile by default is not added to TiltableItems List and needs to be added manullay...
Add the following code to codebehind
public MainPage()
{
InitializeComponent();
TiltEffect.TiltableItems.Add(typeof(HubTile));
// Sample code to localize the ApplicationBar
//BuildLocalizedApplicationBar();
}
and add the following line to your hubtile or grid containing the hub tile
<phone:PanoramaItem CacheMode="{x:Null}" Header="item3" toolkit:TiltEffect.IsTiltEnabled="True">