Windows Phone 7 : Working with Controls and Themes - Adding Transition Effects

To spice up your application, you can add what is called a "tilt" effect to the visual elements. The tilt effect provides visual feedback to the user of the Windows Phone 7 application during manipulation of visual elements within the application. So, instead of just "pressed" and "unpressed" states, elements can also have "being pressed" and "being unpressed" states. The integration of tilt is pretty straightforward, and in the end it will certainly be completely up to you whether you would like to use it within your application. But if you do decide to give this effect a try, follow this walkthrough.

1. Creating a User Interface

The user interface for the test application will be composed of four controls within the page: ListBox, Button, Hyperlink, and a Checkbox.

1. Launch Visual Studio 2010 Express and select the Windows Phone Application template. Change the Project Name to "TiltableTest," select OK, and Visual Studio will set up a new project.

2. Open MainPage.xaml in design mode, and add a ListBox with four items, a Button, a Hyperlink, and a Checkbox to the page, with the end goal of creating a user interface like the one shown in Figure 1.

   Figure 1. TiltableTest UI layout

   

3. You can also paste the following XAML code to get the same interface depicted in Figure 9-7:

   <!--ContentPanel - place additional content here-->
           <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   
               <ListBox Height="110" HorizontalAlignment="Left" Margin="6,47,0,0" Name="listBox1"
   VerticalAlignment="Top" Width="460" ItemsSource="{Binding}" >
                   <ListBoxItem Content="ListBoxItem 1" ></ListBoxItem>
                   <ListBoxItem Content="ListBoxItem 2" ></ListBoxItem>
                   <ListBoxItem Content="ListBoxItem 3" ></ListBoxItem>
                   <ListBoxItem Content="ListBoxItem 4" ></ListBoxItem>
               </ListBox>
               <HyperlinkButton Content="HyperlinkButton" Height="30" HorizontalAlignment="Left"
   Margin="-109,185,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="409" />
   
               <Button Width="186" Height="85" Content="Button" HorizontalAlignment="Left"
   VerticalAlignment="Top" Margin="9,234,0,0" />
   
   					  

   
   

   <CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left"
   Margin="12,325,0,0" Name="checkBox1" VerticalAlignment="Top" />
   
           </Grid>

   
   

Now that you've added controls to the MainPage, in the next section, you will be adding Tilt effects to the controls you added.

2. Downloading TiltEffect.cs and Applying Dependency Properties

To integrate the Tilt effect into your application, you will need to download TiltEffect.cs and properly integrate it into your project.

1. Download the Tilt Effect Control Sample from http://go.microsoft.com/fwlink/?LinkId=200720, and extract the contents of the zip file to a known location.

2. From within the TiltableTest project you created previously, right-click the Add => Existing Item, navigate to the location from Step 1, and find the TiltEffect.cs file.

3. With TitlEffect.cs now a part of your project, double-click that file to open it. Change the following statement as shown here.

   namespace ControlTiltEffect

   
   

   to

   namespace TiltableTest

   
   

Essentially, you just changed the namespace of this file so that it now belongs to your application.

4. Now you need to add the IsTiltEnabled dependency property to the MainPage.xaml page. Open MainPage.xaml in a XAML view and, at the very top of the page, right below the xmlnss:mc=... add the following statement:

   xmlns:local="clr-namespace:TiltableTest"

   
   

5. You are almost done—at the top of the page, beneath the statement

   shell:System Tray.IsVisible="True"

   
   

   add

   local:TiltEffect.IsTiltEnabled="True">

   
   

6. Right-click the project and select Build. After the project builds, you are ready to run the application.

Press F5 to run the application. Now when you click the button or the items in the ListBox, you should see an animation in which these items first contract and then expand. That's another element of interactivity that you can add to your application if you desire.

NOTE

You can suppress the Tilt effect on any control by adding the local:TiltEffect.SuppressTilt="True" attribute to that control.