WP7 and using the Tilt Effect

Windows Phone and Metro Design gives us a new intuitive and userfriendly UI, to increase this UX even more we can use a Tilt Effect on controls. By using a Tilt Effect the users get much clearer feedback that he or she has actually successfully pressed for example a button. The tilt effect provides you with additional visual effects/feedback for control interactions by using motions during state changes. You get a tilting like response when the control is touched.

To get access to the Tilt Effect, you can either download the Control Tilt Effect Sample, and add the TiltEffect.cs file to you project or simply add a reference to WP7 toolkit. In most WP7 projects I have built I have used more than the tilt effect from the toolkit so I usually end up adding a reference to the toolkit.

Namespace declaration
Add a namespace declaration to access the tilt effect. Either locally or to the toolkit

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

or

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Enable Tilt Effect
You can then enable tilt effect for a single control or several at the same time by setting TiltEffect.IsTiltEnabled=”True”.

  • Single control
    <Button Content="Click me" toolkit:TiltEffect.IsTiltEnabled="True" />
    
  • Multiple controls
                        <StackPanel toolkit:TiltEffect.IsTiltEnabled="True">
                            <Button Content="settings" Click="OnSettings"  />
                            <Button Content="feedback" Click="OnFeedback"  />
                            <Button Content="about" Click="OnAbout" />
                        </StackPanel>
    

You can even put it at page level to have all controls in your page tilt enabled.

Suppress Effect
If you have enabled tilt effect for multiple controls, then you might need to Suppress the effect for one or more controls. Fortunately this is also very easy, all you have to do is to set TiltEffect.SuppressTilt=”True” on all controls that should not be tilt enabled.

toolkit:TiltEffect.SuppressTilt="True"

Example where last button is not tilt enabled

                    <StackPanel toolkit:TiltEffect.IsTiltEnabled="True">
                        <Button Content="settings" Click="OnSettings"  />
                        <Button Content="feedback" Click="OnFeedback"  />
                        <Button Content="about" Click="OnAbout" toolkit:TiltEffect.SuppressTilt="True" />
                    </StackPanel>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: