This topic will show you how to apply the tilt effect to controls within an app. You should read the Control tilt effect for Windows Phone before reviewing this topic.
This topic contains the following sections.
In this section, you will create the base tilt effect app and import the TiltEffect.cs file. 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.
Launch Visual Studio 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 theWindows Phone templates.
Select the Windows Phone App 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.
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 theTiltEffect.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:
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.
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.
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.
In MainPage.xaml, add the following namespace declaration to the top of the page. For [Namespace], enter the app namespace.
In MainPage.xaml, add and enable the dependency property IsTiltEnabled at the top of the page:
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:
The only adjustment made to the above code is adding the SuppressTilt dependency property and setting it to True.
Run the app by selecting the Debug | Start Debugging menu command. This will open the emulator window and launch the app, or deploy to a device based on your selection. Once the app 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.