How to: Use the Control Tilt Effect for Windows Phone
March 22, 2012
This topic will show you how to apply the tilt effect to controls within an application. You should read the Tilt Effect Overview for Windows Phone before reviewing this topic. This topic illustrates the following steps:
Create a base Windows Phone application and add the TiltEffect class file.
Note:The TiltEffect.cs file defines the dependency properties that enable or suppress the tilt feature. It also provides the code necessary to create the visual “tilt” effect on the controls.
Add an assortment of controls to be tilted.
Apply the IsTiltEnabled dependency property globally to provide tilt functionality for all specified controls.
Apply the SuppressTilt dependency property on a single control to suppress the tilt effect.
In this section, you will create the base tilt effect application and import the TiltEffect.cs file.
To create the base tilt effect application
-
Launch Visual Studio 2010 Express for Windows Phone from the Start menu.
-
Create a new project by selecting the File | New Project menu command.
-
The New Project window will be displayed. Expand the Visual C# templates, and then select the Silverlight for Windows Phone templates.
-
Select the Windows Phone Application template. Fill in the project Name as desired.
-
Click OK. A new project will be created and MainPage.xaml will be opened in the Visual Studio designer window.
-
Right-click the project in Solution Explorer, click Add, and click New Item. Select Class and rename the file to TiltEffect.cs, then click Add at the bottom of the page.
The code necessary for this file is not supplied in this topic. You must download the ControlTiltEffect sample at this location: Control Tilt Effect Sample. Once you have downloaded the solution, you must perform the following steps.
To import the TiltEffect.cs file
-
Locate the TiltEffect.cs file in the downloaded solution.
-
Import the TiltEffect.cs file into your project.
-
Right-click the project in Solution Explorer, click Add, and select Existing Item. Browse for the TiltEffect.cs file and click Add.
-
Change the namespace in your TiltEffect.cs file to your project namespace name. For example, once you have copied the code into this file, the namespace will be ControlTiltEffect:
namespace ControlTiltEffect
Change the namespace to the namespace of your project.
In this section, you will add an assortment of controls via the XAML code to either enable or suppress the tilt effect.
To add tiltable controls
-
In MainPage.xaml, add the following code to the XAML code under the Content Panel section toward the bottom of the page. The comment in the front of the section is “<!--ContentPanel - place additional content here-->.” Remove the opening and closing Grid tags that already populate that section.
<!--An assortment of controls that will support the tilt effect.--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Button Width="186" Height="185" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="9,20,0,0" /> <Button Content="Button (Suppressed)" Height="150" HorizontalAlignment="Left" Margin="37,0,0,161" VerticalAlignment="Bottom" Width="380"/> <CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="235,25,0,0" Name="checkBox1" VerticalAlignment="Top" /> <RadioButton Content="RadioButton" Height="72" HorizontalAlignment="Left" Margin="235,103,0,0" Name="radioButton1" VerticalAlignment="Top" /> <HyperlinkButton Content="HyperlinkButton" Height="30" HorizontalAlignment="Left" Margin="25,211,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="409" /> <ListBox Height="110" HorizontalAlignment="Left" Margin="6,472,0,0" Name="listBox1" VerticalAlignment="Top" Width="460" ItemsSource="{Binding}" > <ListBoxItem Content="First ListBoxItem" ></ListBoxItem> <ListBoxItem Content="Second ListBoxItem" ></ListBoxItem> <ListBoxItem Content="Third ListBoxItem" ></ListBoxItem> <ListBoxItem Content="Fourth ListBoxItem" ></ListBoxItem> </ListBox> </Grid>Note:You can also drag and drop these controls to your page and position accordingly from the ToolBox. The following illustration is a general representation of how the page should look.
In this section, you will add and enable the IsTiltEnabled dependency property on the page. The property will be added to the root of the page so that the tilt effect is propagated to all the controls you have created. You can set the tilt effect to either apply globally or apply to a single control. Also, you will suppress the tilt effect on a single control using the SuppressTilt dependency property.
To apply the tilt effect dependency properties
-
In MainPage.xaml, add the following namespace declaration to the top of the page:
xmlns:local="clr-namespace:[Namespace]"
Note:For [Namespace], enter the application namespace.
-
In MainPage.xaml, add and enable the dependency property IsTiltEnabled at the top of the page:
local:TiltEffect.IsTiltEnabled="True"
Note:This code references the IsTiltEnabled dependency property from the TiltEffect.cs file and enables the tilt effect feature globally on the page.
-
On the page, find the Button control with the Content property set to Button (Suppressed) in the XAML code. Modify the code to the following:
<Button Content="Button (Suppressed)" Height="150" HorizontalAlignment="Left" Margin="37,0,0,161" VerticalAlignment="Bottom" Width="380" local:TiltEffect.SuppressTilt="True"/>
Note:The only adjustment made to the above code is adding the SuppressTilt dependency property and setting it to True.
-
Run the application by selecting the Debug | Start Debugging menu command. This will open the emulator window and launch the application, or deploy to a device based on your selection. Once the application is running, you should see that all controls have the tilt effect applied. The only exception is the button that has the suppressed tilt dependency property enabled.
