WPToolkit: TiltEffect Doesn't Seem to be Affecting Image

Question

I have an image:

<Image Height="100" Name="imagePlay" Stretch="UniformToFill" VerticalAlignment="Center" Width="100" toolkit:TiltEffect.IsTiltEnabled="True" Source="/Music%20Player%20Pro;component/Images/Play.White.png" Margin="20,0,0,0" Tap="imagePlay_Tap" />

Which doesn't seem to show any sign of the Toolkit:TiltEffect? I've tried setting it to a larger size to see if the effect was to minute to see, but still nothing seems to happen?

Does anyone know why this is? And what I can do to fix it?

Answer 1

Image control doesn't support Tilt effect. But You can put it to other tiltable controls such StackPanel, Grid, Border and so on. For instance I am putting it to StackPanel.

  <StackPanel toolkit:TiltEffect.IsTiltEnabled="True">
      <Image Height="100" Name="imagePlay" Stretch="UniformToFill" VerticalAlignment="Center" Width="100" toolkit:TiltEffect.IsTiltEnabled="True" Source="/Music%20Player%20Pro;component/Images/Play.White.png" Margin="20,0,0,0" Tap="imagePlay_Tap" />
   </StackPanel>

By default StackPanel is not tiltable and you must add StackPanel type to TiltableItems like that in the page constructor.

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

Answer 2

You need to put your Image to Grid or StackPanel or Border and add it to TiltEffect.TiltableItems collection. By default it contains only ButtonBase controls (Button, CheckBox, RadioButton) and ListBoxItems, so tilt effect is appliable for these controls.

<Grid toolkit:TiltEffect.IsTiltEnabled="True">
    <Image Source="Background.png" />
</Grid>

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

Check this article for more information: Silverlight for WP7 Toolkit TiltEffect in depth.

Also I recommend to read this article: Metro in Motion Part #4 – Tilt Effect. This TiltEffect is more customizable, and looks better for me.