Tilt effect for controls on pressed/tapped

Question

On the Start Screen the tiles tilt when you interact with them.  Is this effect supported in the controls we devs use, and if so, how do you implement it.

---

http://www.mdtadesign.co.uk/

Answer 1

You could port the TiltEffect from the WinPhone toolkit: http://silverlight.codeplex.com/SourceControl/changeset/view/71382#1510301

Here's my quick'n'dirty port: http://pastebin.com/aDj3RwQk (could probably use some tweaks and cleanup, but it seems to work fairly well)

Answer 2

Which UI environment are you using (HTML? Xaml/C#? Xaml/C++?) so we can get this into the right forum. You can get this effect for your own controls in the Consumer Preview, but the details will depend on which language you are using.

--Rob

Answer 3

I think its important for this information to be put out there for all languages, but I plan to develop UI in XAML, with C# (same as Windows Phone)

---

http://www.mdtadesign.co.uk/

Answer 4

Made this into a blogpost as well: http://www.sharpgis.net/post/2012/03/02/TiltEffect-for-Windows-8-Metro-XAML.aspx

Answer 5

Thanks Morten,

Mdtadesign, also take a look at the documentation 3-D effects for Metro style apps using XAML for an overview of the pieces used to build the effect.

--Rob

Answer 6

Well thank you for all your advice and help.

Turns out there is an in built way to achieve this.  I was exploring through the ListView templates to figure out why the ListBox did not have the pressed/tapped affect.  On the "Pressed" visual state, a Theme animation is defined, and this matches the rest of the OS.

<TapDownThemeAnimation TargetName="ContentPresenter"/>

And this can be placed in the Visual State Storyboard.

<VisualState x:Name="Pressed">
    <Storyboard>
        <TapDownThemeAnimation TargetName="ContentPresenter"/>
    </Storyboard>
</VisualState>

---

http://www.mdtadesign.co.uk/

Answer 7

Awesome find! I totally missed that. I should probably update my blogpost.

Answer 8

I have built an extension that allows you to easily apply these same transitions without having to edit visual states. All you have to do is add:

Controls:TapBehaviourExtension.TapBehavour="On"

to your object.

Full details, and a sample are on my blog:

http://www.olsonsoft.com/blogs/stefanolson/post/WinRT-Tapped-Behaviour.aspx

...Stefan

Answer 9

TapDownThemeAnimation has been renamed to PointerDownThemeAnimation in the Release Preview (according to this post).

Just sayin' for future reference =).

---

Joakim Rosendahl Consultant at OnTrax AB, Sweden.