How to use the control tilt effect for Windows Phone 8

  • Article

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

 

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 8 before reviewing this topic.

This topic contains the following sections.

 

Creating the base tilt effect app

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.

To create the base tilt effect app

  1. Launch Visual Studio from the Start menu.

  2. Create a new project by selecting the File | New Project menu command.

  3. The New Project window will be displayed. Expand the Visual C# templates, and then select the Windows Phone templates.

  4. Select the **Windows Phone App ** template. Fill in the project Name as desired.

  5. Click OK. A new project will be created and MainPage.xaml will be opened in the Visual Studio designer window.

  6. 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

  1. Locate the TiltEffect.cs file in the downloaded solution.

  2. Import the TiltEffect.cs file into your project.

  3. Right-click the project in Solution Explorer, click Add, and select Existing Item. Browse for the TiltEffect.cs file and click Add.

  4. 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.

Adding tiltable controls

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.

![](images/Ff941108.AP_CoreCont_Tilt(en-us,VS.105).png)

Applying the tilt effect dependency properties

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

  1. In MainPage.xaml, add the following namespace declaration to the top of the page. For [Namespace], enter the app namespace.

    xmlns:local="clr-namespace:[Namespace]"

  2. In MainPage.xaml, add and enable the dependency property IsTiltEnabled at the top of the page:

    local:TiltEffect.IsTiltEnabled="True"

    This code references the IsTiltEnabled dependency property from the TiltEffect.cs file and enables the tilt effect feature globally on the page.

  3. 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"/>

    The only adjustment made to the above code is adding the SuppressTilt dependency property and setting it to True.

  4. 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.

See Also

Other Resources

Control tilt effect for Windows Phone 8