How to add Tilt Effect to controls in Windows Phone 8.1 RT app?

Question

I'm developing an app using Windows Phone 8.1 RT framework. There are some grid controls I would like to add tilt effect to. How do I do it?

Answer 1

In Windows Runtime there are some nice animations you can use for that purpose - reference at MSDN. There are few ways you can reach your goal:

1. The easiest one would be to put your Grid inside the Button control which has Tilt effect as default. You can also easily use custom style of your button - reference at this answer.

2. You may design your own Control and use VisualStateManager.GoToState to switch between the states. Here at MSDN is nice short example how to do this.

3. You can define Storyboard using theme animations and Begin() upon pointer pressed/released. A short example:

   In XAML:

   <Grid Name="animatedGrid" PointerPressed="animatedGrid_PointerPressed" PointerReleased="animatedGrid_PointerReleased">
     <Grid.Resources>
       <Storyboard x:Name="animateUp">
           <PointerUpThemeAnimation TargetName="animatedGrid" />
       </Storyboard>
       <Storyboard x:Name="animateDown">
           <PointerDownThemeAnimation TargetName="animatedGrid" />
       </Storyboard>
     </Grid.Resources>
     <Rectangle Fill="Tomato" Width="200" Height="200"/>
   </Grid>
   

   In code behind:

   private void animatedGrid_PointerPressed(object sender, PointerRoutedEventArgs e)
   {
       animatedGrid.Projection = new PlaneProjection();
       animateDown.Begin();            
   }
   
   private void animatedGrid_PointerReleased(object sender, PointerRoutedEventArgs e)
   {
       animateUp.Begin();
   }
   

The example above covers a little strange behaviour pointed out in this question and found workaround by Jerry Nixon - MSFT.