Adding Tap animation to the HubTile

by CameronM 1. October 2011 10:18

In the previous post we looked at how you can use the HubTile control from the Windows Phone Toolkit to perform various navigation tasks. 

One thing you may have noticed is that when you tap the HubTile, it doesn't move like the Live Tiles on the Windows Phone Start Screen. The easy fix for this is to add a TiltEffect, a component of the same Toolkit to the HubTile. The TiltEffect is an easy way to add that slight 'wiggle' you expect when pressing items in the ListView, so it seems like the perfect candidate. 

There are a number of ways to add TiltEffect to the HubTile, but by far the easiest is to add it directly to control, such as in the example below;

<toolkit:HubTile 
        toolkit:TiltEffect.IsTiltEnabled="True"
        Title="Sam" 
        Message="Yosemite Sam" 
        Source="/Assets/Images/Yosemite-Sam.jpg" 
        Background="{StaticResource PhoneAccentBrush}"
        Tap="HubTile_Tap"/>

If you run the page and test the HubTile you'll notice that the animation does not appear to work. That's because for some reason, the HubTile is not included in the list of items that TiltEffect applies to. Thankfully, the solution is easy. In your code-behind you can manually add the HubTile to the TiltableItems list.

public MainPage()
{
    InitializeComponent();
 
    TiltEffect.TiltableItems.Add(typeof(HubTile));
 
}

Tags: , , ,

Windows Phone 7 | WP7