SharpGIS

#GIS from a .NET developer's perspective

TiltEffect for Windows 8 Metro XAML

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)

Comments (7) -

  • Filip Skakun

    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

    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

    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

    3/4/2012 6:44:52 PM |

    @Morten

    Is that FlipView in the demo above?

    - Milan

  • Morten

    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

    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

    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