Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Tilt Effect for Windows Phone

From Wiki
Jump to: navigation, search

This article demonstrates how to create "Tilt Effect" for Windows Phone. This effect makes UI components appear as though they have been slightly depressed on one side or tilted.

WP Metro Icon UI.png
WP Metro Icon Tools.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): Nokia Lumia 820, Lumia 920, Lumia 800
Compatibility
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Article
Keywords: Tilt Effect
Created: somnathbanik (15 Oct 2011)
Updated: vinayppatil (26 Jan 2013)
Last edited: vinayppatil (29 Jan 2014)

Contents

Introduction

Windows Phone provides a visual effect called Tilt Effect which has the ability to add additional visual feedback for control interaction. Controls with the tilt effect provides motion during interaction. Developers can add tilt effect on controls like Button with custom dependency property called IsTiltEnabled.

Installation

To use TiltEffect in the application first install Windows Phone Toolkit. For that you need to

After you are done with installing Windows Phone Toolkit, you should be able to see Microsoft.Phone.Controls.Toolkit added to the application references.

Usage

Adding TiltEffect to application controls is a simple two step process:

  • Add namespace declaration on the PhoneApplicationPage.
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
  • Enable IsTiltEnabled property on the whole page or some specific controls as per your requirements.
    <Button Content="Tilt Enabled Button" toolkit:TiltEffect.IsTiltEnabled="True" />

And that is it! You are ready to run your application and see TiltEffect in action.

Below are the different options for working with TiltEffect.

Implementation Options

TiltEffect Key Properties

The key properties associated with TiltEffect are

TiltableItems
This is a static property of type List<Type> that represents default list of items that are tiltable.
IsTiltEnabled
This is a static dependency property of type bool that determines whether the tilt effect is enabled on a container (and all its children).
SuppressTilt
This is a static dependency property of type bool that suppresses the tilt effect on a single control that would otherwise be tilted.

Enable TiltEffect globally

You can enable TiltEffect globally for all controls inside a particular page. For that just set toolkit:TiltEffect.IsTiltEnabled="True" on the PhoneApplicationPage.

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

Supress TiltEffect

To suppress TiltEffect for a chosen control on the page, set SuppressTilt dependency property to True.

<Button Content="Tilt Enabled Button" toolkit:TiltEffect.SuppressTilt="True" />

Enable TiltEffect on chosen controls

To enable TiltEffect only for a few selected controls on the page, set IsTiltEnabled dependency property to True specifically on those controls rather than on the PhoneApplicationPage.

<Button Content="Tilt Enabled Button" toolkit:TiltEffect.IsTiltEnabled="True" />
<Button Content="Tilt Disabled Button" />

TiltEffects for custom controls

The TiltEffect will work only for controls present in TiltableItems list. By default, the general ButtonBase class and ListBoxItem controls are specified as tiltable items. If a control type is not present in TiltableItems, the tilt effect would not be applied to those controls even if the IsTiltEnabled dependency property is attached and set to True.

Enable TiltEffect on a custom control by adding it to TiltableItems list.

public MainPage()
{
InitializeComponent();
TiltEffect.TiltableItems.Add(typeof(MyCutomControl));
}
 
<mycontrols:MyCustomControl toolkit:TiltEffect.IsTiltEnabled="True" />

Source Code

The full source code of the example is available here: File:TiltEffect.zip

This page was last modified on 29 January 2014, at 07:39.
572 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×