W8 Simplest TiltEffect

Thanks to the W8 excellence team now we can add the tilt effect with very little code, and I suppose that will we available in WP8 too, so here is the snippet:

 

public class TiltEffect : DependencyObject
    {
        private TiltEffect() {}

        static TiltEffect() { }

        public static readonly DependencyProperty IsTiltEnabledProperty = DependencyProperty.RegisterAttached(
         "IsTiltEnabled", typeof(bool), typeof(TiltEffect), new PropertyMetadata(false, OnIsTiltEnabledChanged));
        public static bool GetIsTiltEnabled(DependencyObject source) { return (bool)source.GetValue(IsTiltEnabledProperty); }
        public static void SetIsTiltEnabled(DependencyObject source, bool value) { source.SetValue(IsTiltEnabledProperty, value); }

        static void OnIsTiltEnabledChanged(DependencyObject target, DependencyPropertyChangedEventArgs args)
        {
            if (target is FrameworkElement)
            {
                if ((bool)args.NewValue == true)
                    (target as FrameworkElement).Tapped +=TiltEffect_Tapped;
                else
                    (target as FrameworkElement).Tapped -= TiltEffect_Tapped;
            }
        }

        static void TiltEffect_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
        {
            double time = 100;
            FrameworkElement current = sender as FrameworkElement;

            Point p0 = e.GetPosition(current);
            p0.X = p0.X - current.Width / 2;
            p0.Y = p0.Y - current.Height / 2;

            Point p1 = new Point(p0.Y / 2, p0.X / -2);

            (current.Projection as PlaneProjection).RotationY = 0;
            (current.Projection as PlaneProjection).RotationX = 0;

            Storyboard sb = new Storyboard();

            DoubleAnimationUsingKeyFrames duk0 = new DoubleAnimationUsingKeyFrames();
            Storyboard.SetTargetProperty(duk0, "(UIElement.Projection).(PlaneProjection.RotationX)");
            Storyboard.SetTarget(duk0, current);
            duk0.KeyFrames.Add(new EasingDoubleKeyFrame() { KeyTime = TimeSpan.Zero, Value = 0 });
            duk0.KeyFrames.Add(new EasingDoubleKeyFrame() { KeyTime = TimeSpan.FromMilliseconds(time), Value = p1.X });
            sb.Children.Add(duk0);

            DoubleAnimationUsingKeyFrames duk1 = new DoubleAnimationUsingKeyFrames();
            Storyboard.SetTargetProperty(duk1, "(UIElement.Projection).(PlaneProjection.RotationY)");
            Storyboard.SetTarget(duk1, current);
            duk1.KeyFrames.Add(new EasingDoubleKeyFrame() { KeyTime = TimeSpan.Zero, Value = 0 });
            duk1.KeyFrames.Add(new EasingDoubleKeyFrame() { KeyTime = TimeSpan.FromMilliseconds(time), Value = p1.Y });
            sb.Children.Add(duk1);

            sb.AutoReverse = true;
            sb.Begin();
        }
    }

I have not a touch device so might be instead of tap, another event is better, who knows. Let’s continue migrating WP7.

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