TiltEffect for Windows 8 Metro XAML

by Morten 2. March 2012 19:17

The tiles on the new Windows 8 Start Menu “tilts” when you press them, tilting toward the direction you click/touch them. This effect is also well known from the Windows Phone tiles. Unfortunately there is no out-of-the-box way of accomplishing this in either of the platforms. However for Windows Phone, a TiltEffect class is in the Silverlight Toolkit, so I figured I could just port that. Turns out it wasn’t that hard – all I pretty much had to do was change the manipulation events to use the new Pointer events instead, and will work with both mouse and touch.

To use it, first download the updated tilt effect class and add it to your project.

Next add a xmlns to register the namespace for use in XAML:

     xmlns:sg="using:SharpGIS.Metro.Controls"

And lastly add the tilt effect to your control exactly like  you would on the phone:

    <Rectangle Width="200" Height="200" Fill="Blue"
        sg:TiltEffect.IsTiltEnabled="True" />

Here’s what this look like on a couple of animated panels:

It’s worth noting that the tilt effect is not EXACTLY the same as the Windows 8 start menu, but it’s fairly close (and a bit cooler if you ask me Smile)

Tags:

Windows Runtime | XAML

Comments (7) -

Filip Skakun
Filip Skakun United States
3/4/2012 1:52:04 PM #

It seems to work with rectangles for you, but have you tried it with Buttons with actual content? I also tried porting the Windows Phone version and I got it to kind of work with Manipulations (you have to set ManipulationMode on a control to make it work with Manipulations - which does not allow TiltEffect to work the same way as on Windows Phone where you can enable the effect globally), but my buttons would not tilt until I dragged the finger or mouse cursor a couple pixels - seems like a limitation of the current implementation of manipulations. I tried using the pointer events, but they would not fire on the Image contents of my buttons - seems like the button implementation might prevent bubbling of these events.

I might try your implementation later on.

Filip Skakun
Filip Skakun United States
3/4/2012 1:54:09 PM #

BTW, isn't it annoying how touch is handled differently in all XAML platforms - WPF, WPF/Surface, Silverlight, Windows Phone & WinRT? It would be nice if Microsoft came up with a universal solution, or maybe someone might create a portable library that would work with all these platforms...

Milan
Milan United States
3/4/2012 6:42:52 PM #

@Filip

It's button supressing bubbling, try hooking events with AddHandler() and setting handledEventsToo as true.

- Milan

Milan
Milan United States
3/4/2012 6:44:52 PM #

@Morten

Is that FlipView in the demo above?

- Milan

Morten
Morten United States
3/5/2012 5:12:07 PM #

Filip: Yes it sucks, and part of the feedback I've sent to Microsoft numerous times.
Milan: No it's not FlipView. It's a custom control I built for fun.

Bhavik
Bhavik United States
3/27/2012 1:54:02 PM #

Basically if I used it for a button, it seems to be eating up my Click handler.

Bhavik
Bhavik United States
3/27/2012 1:54:38 PM #

Also, Can you share the code for your custom control, pretty interesting.

Pingbacks and trackbacks (2)+

Comments are closed

About the author

Morten Nielsen

Silverlight MVP

Morten Nielsen
<--That's me
E-mail me Send mail

Twitter @dotMorten 

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

© Copyright 2005-2011

Month List

Recent Comments

Comment RSS