WindowsPhoneGeek

WPAppInfo

Login | Join (Why?)

rss rss rss
logo

Using TiltEffect in WP7

published on: 11/29/2010 | Views: N/A | Tags: Animation UI

by WindowsPhoneGeek

One of the effects that can be seen on the Windows Phone 7 is the "tilt" effect on buttons and other controls. Generally it enables you to add additional visual feedback for control interaction. Instead of having standard pressed or un-pressed states, controls with the tilt effect provide motion during manipulation. The result is a "tilt" like response when the control is touched.

tilt1

Tilt effect still isn't built-in to the Silverlight controls,however  Microsoft has provided the TiltEffect.cs class which you can download and use  in your project.

Basically  it uses a global camera effect to ensure that each object tilts not only around its own centre, but is also angled towards the middle of the screen. This effect is accomplished by first translating the object to the middle of the screen doing a normal RenderTransform (in 2D space), and then transforming it back where it came from using a Projection (in 3D space).

You can find more information about this class at the MSDN documentation. It has two attached dependency properties :

  • IsTiltEnabled - This dependency property allows you to apply the tilt effect in your application. You may apply it globally or to single controls.
  • SuppressTilt - This dependency property allows you to suppress the tilt effect on a control.

All you need to do in order to implement a TiltEffect is just to add this class to your project and enable the IsTiltEnabled attached property to your controls. When an item is tapped, this TiltEffect class will search for specified controls that have the property enabled and apply the effect. You can apply the dependency property globally so that all controls in the visual tree inherit the tilt effect, or you can apply the dependency property to only a single control. So the steps for adding tilt effect are as follows:

    1.Importing the code from the TiltEffect.cs file into your project

    2.Applying the IsTiltEnabled dependency property either globally or to selected controls in your project

    3.Optionally, applying the SuppressTilt dependency property to selected controls in your project

Apply Tilt Effect to a control

Example:

You can enable the IsTiltEffect property to a control either in XAMl or in C#. .

XAML:

xmlns:tilteffect="clr-namespace:ControlTiltEffect"
...
<ListBox x:Name="list" tilteffect:TiltEffect.IsTiltEnabled="True">
    <ListBoxItem Content="item1"/>
    <ListBoxItem Content="item2"/>
    <ListBoxItem Content="item3"/>
    <ListBoxItem Content="item4"/>
</ListBox>

 

C#:

this.list.SetValue(TiltEffect.IsTiltEnabledProperty,true);

 

Note: ControlTiltEffect is the default namespace of the TiltEffect.class.

Apply Tilt Effect globally

Another option is to enable the IsTiltEffect  at the top of the page.

Example:

<phone:PhoneApplicationPage 
...    
 tilteffect:TiltEffect.IsTiltEnabled="True" >
...
<ListBox x:Name="list" >
    <ListBoxItem Content="item1" tilteffect:TiltEffect.SuppressTilt="True"/>
    <ListBoxItem Content="item2"/>
    <ListBoxItem Content="item3" tilteffect:TiltEffect.SuppressTilt="True"/>
    <ListBoxItem Content="item4"/>
</ListBox>
...
</phone:PhoneApplicationPage>

Note that you can suppress the tilt effect by simply setting the SuppressTilt to true.

That was all about using TiltEffect in a Windows Phone 7 application. The source code is available here:

You can also follow us on Twitter @winphonegeek

Comments

AG_E_PARSER_BAD_PROPERTY_VALUE

posted by: Jeremy on 2/4/2011 5:21:44 PM

System.Windows.Markup.XamlParseException occurred Message=AGEPARSERBADPROPERTY_VALUE [Line: 17 Position: 5] LineNumber=17 LinePosition=5 StackTrace: at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator)

When I follow the instructions I get this error on loading up a new page. The location mentioned from the XAML as 'local:TiltEffect.IsTiltEnabled="False"', the Intellisense enters the line correctly. Any ideas? I'm also using the Toolkit controls in the project, but even a blank page causes the crash message when I add the tilt effect lines.

Jeremy

RE:AG_E_PARSER_BAD_PROPERTY_VALUE

posted by: winphonegeek on 2/7/2011 7:40:50 PM

Can you share some more information about your code so that we could be able to reproduce this issue?

AG_E_PARSER_BAD_PROPERTY_VALUE

posted by: Jeremy on 2/13/2011 10:15:38 PM

I retested this on a vanilla project and it works fine so I'm really not sure what has gone wrong in my main project.

I have a pretty small project. I changed the TiltEffect namespace to MyApp. My 'navigate to' page has the following:

It complains about the local:TiltEffect... line during debugging, removing it clears the problem. Any ideas are welcome?

Jeremy

AG_E_PARSER_BAD_PROPERTY_VALUE

posted by: Jeremy on 2/13/2011 10:17:42 PM

Sorry code didn't appear.

<phone:PhoneApplicationPage 
x:Class="Prayer_Book.PrayerReadingPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:local="clr-namespace:Prayer_Book" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True"
local:TiltEffect.IsTiltEnabled="True">

Jeremy

AG_E_PARSER_BAD_PROPERTY_VALUE

posted by: Jeremy on 2/13/2011 10:21:37 PM

Sorry again, the TiltEffect namespace is not MyApp it is Prayer_Book and it still isn't working.

Jeremy

RE:AG_E_PARSER_BAD_PROPERTY_VALUE

posted by: winphonegeek on 2/15/2011 3:02:57 PM

We are still not able to reproduce this issue. If it is possible you could send us some sample code at support@windowsphonegeek.com so that we could be able to reproduce and probably fix this issue.

RE: AG_E_PARSER_BAD_PROPERTY_VALUE

posted by: Jeremy on 2/16/2011 7:21:44 AM

Sample project sent to the e-mail address provided.

Jeremy

posted by: tony on 4/1/2011 5:17:59 AM

I just tried to enable the tilt on my app as well and comes up with the same error. Has anyone found a solution to this problem yet.

RE: @tony

posted by: winphonegeek on 4/10/2011 1:14:40 PM

We were unable to reproduce this issue. Can you please share some more info about the problem?

FIX: AG_E_PARSER_BAD_PROPERTY_VALUE

posted by: Joe Ginley on 4/14/2011 10:50:58 PM

Hey everyone, found a solution to this problem. Your namespace must not contain any _. Replace them with no spaces or another character. I was looking for a solution and I figured this one out myself. Hope it helps others!

Joe Ginley GINtech Systems www.gintechsystems.com

posted by: spawnkid on 5/9/2011 5:37:03 PM

This won't work if your listbox was databinded. Listitems are created dynamically in runtime.

RE:@spawnkid

posted by: winphonegeek on 5/9/2011 5:54:10 PM

You can find examples of TiltEffect and data binding in our next article: Silverlight for WP7 Toolkit TiltEffect in depth

(I posted a reply to this question there)

Add comment to 'Using TiltEffect in WP7'

Comment

Our Top Articles & Free books

Our Top Tips & Samples

Copyright © 2010-2011 www.windowsphonegeek.com . All Rights Reserved.
Home |Get Recognized |About us |Contact us |Advertise |Company Blog | RSS | Terms Of Use
This site is an independent WP7 development community not affiliated in any way with the Microsoft Corporation.