Adding Tilt Effect to Windows Phone Apps

You can use the Tilt Effect in your Windows Phone apps to give the user additional visual feedback that a control has been pressed. The easiest way to start using it is to download the Microsoft Phone Controls Toolkit  and then enable it for each page in your application. You can also enable only certain controls, or suppress it for selected controls.

Note: the Tilt Effect is now integrated into the Silverlight for Windows Phone Toolkit (Feb 2011 release).

1. Download the Silverlight for Windows Phone Toolkit from CodePlex. Or, use NuGet to add the package to your Visual Studio project.
2. Add a reference to your Visual Studio project (NuGet does this for you automatically):
   Microsoft.Phone.Controls.Toolkit
3.  Add the following to the .xaml file for each Page in your app:

   xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
   toolkit:TiltEffect.IsTiltEnabled="True"
   

That’s it!

Note: by default, the tilt effect only works with general ButtonBase and ListBoxItem controls. However, you can apply this effect to other controls by adding them to the TiltableItems list:

TiltEffect.TiltableItems.Add(typeof("MyCustomControl"))

References:

• MSDN Library, Tilt Effect Overview for Windows Phone
• WindowsPhone Geek, Silverlight for WP7 Toolkit TiltEffect in depth

Silverlight: Page Transitions

The following is a high-level overview of how to add page transitions to your Windows Phone Silverlight application. If you need more step-by-step directions, see this article.

1. Download the Silverlight Toolkit for Windows Phone from Codeplex (here) or use NuGet to add the package to your Visual Studio project.
2. Add a reference to Microsoft.Phone.Controls to your project.
3. Edit the App.xaml.cs file, and modify the InitializePhoneApplication() method so that RootFrame is of type TransitionFrame:

       RootFrame = new TransitionFrame();
       //RootFrame = new PhoneApplicationFrame();
   

4. Add the following to all XAML files:

   xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
   

5.  Add the following definition to the Application.Resources element in your App.xaml file. You can then reuse this style on each of your target pages. This example defines a turnstile page transition. See belowfor other transition options.

   <Application.Resources>
               <Style x:Key="TransitionPageStyle" TargetType="phone:PhoneApplicationPage">
                   <Setter Property="toolkit:TransitionService.NavigationInTransition">
                       <Setter.Value>
                           <toolkit:NavigationInTransition>
                           <toolkit:NavigationInTransition.Backward>
                               <toolkit:TurnstileTransition Mode="BackwardIn"/>
                           </toolkit:NavigationInTransition.Backward>
                           <toolkit:NavigationInTransition.Forward>
                               <toolkit:TurnstileTransition Mode="ForwardIn"/>
                           </toolkit:NavigationInTransition.Forward>
                       </toolkit:NavigationInTransition>
                   </Setter.Value>
                   </Setter>
                   <Setter Property="toolkit:TransitionService.NavigationOutTransition">
                       <Setter.Value>
                           <toolkit:NavigationOutTransition>
                           <toolkit:NavigationOutTransition.Backward>
                               <toolkit:TurnstileTransition Mode="BackwardOut"/>
                           </toolkit:NavigationOutTransition.Backward>
                           <toolkit:NavigationOutTransition.Forward>
                               <toolkit:TurnstileTransition Mode="ForwardOut"/>
                           </toolkit:NavigationOutTransition.Forward>
                       </toolkit:NavigationOutTransition>
                   </Setter.Value>
                   </Setter>
               </Style>
   </Application.Resources>
   

   NOTE: if you want some pages to have different page transitions, you can define multiple styles in the App.xaml. Or you can define the transition on each XAML page rather than defining a style in App.xaml.

In each of your XAML files (phone application pages), add the following style declaration:

<phone:PhoneApplicationPage
x:Class="MyTransitionsProject.MainPage"
...
Style="{StaticResource TransitionPageStyle}">

Transition Options

Swivel	Slide	Rotate	Turnstile
FullScreenIn FullScreenOut ForwardIn ForwardOut BackwardIn BackwardOut	SlideUpFadeOut SlideDownFadeIn SlideDownFadeOut SlideLeftFadeIn SlideLeftFadeOut SlideRightFadeIn SlideRightFadeOut	In90Clockwise In90Counterclockwise In180Clockwise In180Counterclockwise Out90Clockwise Out90Counterclockwise Out180Clockwise Out180Counterclockwise	ForwardIn ForwardOut BackwardIn BackwardOut

References:

Complete Step-by-Step Guide

sample with all options listed

Silverlight: Sound Effects

The following procedure can be used to add sound effects to Windows Phone 7 (WP7) apps developed with Silverlight/C#.

1. Add a reference to Microsoft.Xna.Framework to your project
2. Add the .wav files to your project and specify type=Content
3. Add the following statements to your C# code:

   using Microsoft.Xna.Framework;
   using Microsoft.Xna.Framework.Audio;
   using System.Windows.Resources;
   using System.Windows.Threading;
   

4. Add variables for your SoundEffects:

   private SoundEffect mySound;
   

5. Add the following code to the page (class) constructor:

   
   LoadSound("Sounds/mySound.wav", out mySound);
   // Timer to simulate the XNA game loop (SoundEffect classes are from the XNA Framework)
   DispatcherTimer XnaDispatchTimer = new DispatcherTimer();
   XnaDispatchTimer.Interval = TimeSpan.FromMilliseconds(50);
   
   // Call FrameworkDispatcher.Update to update the XNA Framework internals.
   XnaDispatchTimer.Tick += delegate { try { FrameworkDispatcher.Update(); } catch { } };
   // Start the DispatchTimer running.
   XnaDispatchTimer.Start();
   
   

6. Add the following LoadSound method:

           private void LoadSound(String SoundFilePath, out SoundEffect Sound)
           {
               // For error checking, assume we'll fail to load the file.
               Sound = null;            try
               {
                   // Holds informations about a file stream.
                   StreamResourceInfo SoundFileInfo = App.GetResourceStream(new Uri(SoundFilePath,
                           UriKind.Relative));                // Create the SoundEffect from the Stream
                   Sound = SoundEffect.FromStream(SoundFileInfo.Stream);
               }
               catch (NullReferenceException)
               {
                   // Display an error message
                   MessageBox.Show("Couldn't load sound " + SoundFilePath);
               }
           }
   

7. Add the following code to play the sound effect:

               try
               {
                   mySound.Play();
               }
               catch (NullReferenceException)
               {
                  MessageBox.Show("Can't play, cardSound is null.");
               }
   

   Simpler Example: No timer

   If the only XNA framework functionality used inside a Silverlight application is one or more instance of type SoundEffect, and only one single SoundEffect is played at any given time, you don’t need to set up a timer. Instead, you can just call FrameworkDispatcher.Update() before calling the Play() method.

   For example:

   
   try
   {
   FrameworkDispatcher.Update();
   mySound.Play();
   }
   catch (NullReferenceException)
   {
   MessageBox.Show("Can't play, cardSound is null.");
   }
   

   Complete Example

   The following example puts all the bits of code together. It assumes the app has the single page, MainPage.xaml, with a button that uses the Button_Click callback method. It also assumes there is a sound file named “UI_Misc15.wav” that is stored in a project subdirectory “Sounds”.

   using System;
   using System.Windows;
   using Microsoft.Phone.Controls;
   using Microsoft.Xna.Framework;
   using Microsoft.Xna.Framework.Audio;
   using System.Windows.Resources;
   using System.Windows.Threading;
   
   namespace SoundDemo
   {
       public partial class MainPage : PhoneApplicationPage
       {
           private SoundEffect mySound;
   
           // Constructor
           public MainPage()
           {
               InitializeComponent();
   
               LoadSound("Sounds/UI_Misc15.wav", out mySound);
   
               // Timer to simulate the XNA game loop (SoundEffect classes are from the XNA Framework)
               DispatcherTimer XnaDispatchTimer = new DispatcherTimer();
               XnaDispatchTimer.Interval = TimeSpan.FromMilliseconds(50);
   
               // Call FrameworkDispatcher.Update to update the XNA Framework internals.
               XnaDispatchTimer.Tick += delegate { try { FrameworkDispatcher.Update(); } catch { } };
   
               // Start the DispatchTimer running.    
               XnaDispatchTimer.Start();
   
           }
   
           private void LoadSound(String SoundFilePath, out SoundEffect Sound)
           {
               // For error checking, assume we'll fail to load the file.
               Sound = null;
   
               try
               {
                   // Holds informations about a file stream.
                   StreamResourceInfo SoundFileInfo = App.GetResourceStream(new Uri(SoundFilePath,
                           UriKind.Relative));
   
                   // Create the SoundEffect from the Stream
                   Sound = SoundEffect.FromStream(SoundFileInfo.Stream);
               }
               catch (NullReferenceException)
               {
                   // Display an error message
                   MessageBox.Show("Couldn't load sound " + SoundFilePath);
               }
           }
   
   
           private void Button_Click(object sender, RoutedEventArgs e)
           {
               try
               {
                   mySound.Play();
               }
               catch (NullReferenceException)
               {
                   MessageBox.Show("Can't play, cardSound is null.");
               }
   
           }
       }
   }