file360

MetroInMotion.cs (17077B)

---

 using System;
 using System.Net;
 using System.Linq;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Documents;
 using System.Windows.Ink;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Animation;
 using System.Windows.Shapes;
 using Microsoft.Phone.Controls;
 using LinqToVisualTree;
 using System.Diagnostics;
 using System.Collections.Generic;
 using System.Windows.Controls.Primitives;
 using System.Windows.Media.Imaging;
 
 namespace MetroInMotionUtils
 {
   public static class MetroInMotion
   {
     #region AnimationLevel
 
     public static int GetAnimationLevel(DependencyObject obj)
     {
       return (int)obj.GetValue(AnimationLevelProperty);
     }
 
     public static void SetAnimationLevel(DependencyObject obj, int value)
     {
       obj.SetValue(AnimationLevelProperty, value);
     }
 
 
     public static readonly DependencyProperty AnimationLevelProperty =
         DependencyProperty.RegisterAttached("AnimationLevel", typeof(int),
         typeof(MetroInMotion), new PropertyMetadata(-1));
 
     #endregion
 
     #region Tilt
 
     public static double GetTilt(DependencyObject obj)
     {
       return (double)obj.GetValue(TiltProperty);
     }
 
     public static void SetTilt(DependencyObject obj, double value)
     {
       obj.SetValue(TiltProperty, value);
     }
 
 
     public static readonly DependencyProperty TiltProperty =
         DependencyProperty.RegisterAttached("Tilt", typeof(double),
         typeof(MetroInMotion), new PropertyMetadata(2.0, OnTiltChanged));
 
     /// <summary>
     /// The extent of the tilt action, the larger the number, the bigger the tilt
     /// </summary>
     private static double TiltAngleFactor = 4;
 
     /// <summary>
     /// The extent of the scaling action, the smaller the number, the greater the scaling.
     /// </summary>
     private static double ScaleFactor = 100;
 
     private static void OnTiltChanged(DependencyObject d,
       DependencyPropertyChangedEventArgs args)
     {
       FrameworkElement targetElement = d as FrameworkElement;
       
       double tiltFactor = GetTilt(d);
 
       // create the required transformations
       var projection = new PlaneProjection();
       var scale = new ScaleTransform();
       var translate = new TranslateTransform();
 
       var transGroup = new TransformGroup();
       transGroup.Children.Add(scale);
       transGroup.Children.Add(translate);
 
       // associate with the target element
       targetElement.Projection = projection;
       targetElement.RenderTransform = transGroup;
       targetElement.RenderTransformOrigin = new Point(0.5, 0.5);
 
       targetElement.MouseLeftButtonDown += (s, e) =>
         {
           var clickPosition = e.GetPosition(targetElement);
 
           // find the maximum of width / height
           double maxDimension = Math.Max(targetElement.ActualWidth, targetElement.ActualHeight);
 
           // compute the normalised horizontal distance from the centre
           double distanceFromCenterX = targetElement.ActualWidth / 2 - clickPosition.X;
           double normalisedDistanceX = 2 * distanceFromCenterX / maxDimension; 
 
           // rotate around the Y axis 
           projection.RotationY = normalisedDistanceX * TiltAngleFactor * tiltFactor;
 
           // compute the normalised vertical distance from the centre
           double distanceFromCenterY = targetElement.ActualHeight / 2 - clickPosition.Y;
           double normalisedDistanceY = 2 * distanceFromCenterY / maxDimension;
 
           // rotate around the X axis, 
           projection.RotationX = -normalisedDistanceY * TiltAngleFactor * tiltFactor;
 
           // find the distance to centre
           double distanceToCentre = Math.Sqrt(normalisedDistanceX * normalisedDistanceX
             + normalisedDistanceY * normalisedDistanceY);
 
           // scale accordingly
           double scaleVal = tiltFactor * (1 - distanceToCentre) / ScaleFactor;
           scale.ScaleX = 1 - scaleVal;
           scale.ScaleY = 1 - scaleVal;
 
           // offset the plane transform
           var rootElement = Application.Current.RootVisual as FrameworkElement;
           var relativeToCentre = (targetElement.GetRelativePosition(rootElement).Y - rootElement.ActualHeight / 2) / 2;
           translate.Y = -relativeToCentre;
           projection.LocalOffsetY = +relativeToCentre;
 
         };
 
       targetElement.ManipulationCompleted += (s, e) =>
         {
           var sb = new Storyboard();
           sb.Children.Add(CreateAnimation(null, 0, 0.1, "RotationY", projection));
           sb.Children.Add(CreateAnimation(null, 0, 0.1, "RotationX", projection));
           sb.Children.Add(CreateAnimation(null, 1, 0.1, "ScaleX", scale));
           sb.Children.Add(CreateAnimation(null, 1, 0.1, "ScaleY", scale));
           sb.Begin();
 
           translate.Y = 0;
           projection.LocalOffsetY = 0;
         };
 
     }
 
 
     #endregion
 
     #region IsPivotAnimated
 
     public static bool GetIsPivotAnimated(DependencyObject obj)
     {
       return (bool)obj.GetValue(IsPivotAnimatedProperty);
     }
 
     public static void SetIsPivotAnimated(DependencyObject obj, bool value)
     {
       obj.SetValue(IsPivotAnimatedProperty, value);
     }
 
     public static readonly DependencyProperty IsPivotAnimatedProperty =
         DependencyProperty.RegisterAttached("IsPivotAnimated", typeof(bool),
         typeof(MetroInMotion), new PropertyMetadata(false, OnIsPivotAnimatedChanged));
 
     private static void OnIsPivotAnimatedChanged(DependencyObject d, DependencyPropertyChangedEventArgs args)
     {
       ItemsControl list = d as ItemsControl;
 
       list.Loaded += (s2, e2) =>
         {
           // locate the pivot control that this list is within
           Pivot pivot = list.Ancestors<Pivot>().Single() as Pivot;
 
           // and its index within the pivot
           int pivotIndex = pivot.Items.IndexOf(list.Ancestors<PivotItem>().Single());
 
           bool selectionChanged = false;
 
           pivot.SelectionChanged += (s3, e3) =>
             {
               selectionChanged = true;
             };
 
           // handle manipulation events which occur when the user
           // moves between pivot items
           pivot.ManipulationCompleted += (s, e) =>
             {
               if (!selectionChanged)
                 return;
 
               selectionChanged = false;
 
               if (pivotIndex != pivot.SelectedIndex)
                 return;
               
               // determine which direction this tab will be scrolling in from
               bool fromRight = e.TotalManipulation.Translation.X <= 0;
 
                             
               // iterate over each of the items in view
               var items = list.GetItemsInView().ToList();
               for (int index = 0; index < items.Count; index++ )
               {
                 var lbi = items[index];
 
                 list.Dispatcher.BeginInvoke(() =>
                 {
                   var animationTargets = lbi.Descendants()
                                          .Where(p => MetroInMotion.GetAnimationLevel(p) > -1);
                   foreach (FrameworkElement target in animationTargets)
                   {
                     // trigger the required animation
                     GetSlideAnimation(target, fromRight).Begin();
                   }
                 });
               };
              
             };
         };
     }
 
 
     #endregion
 
     /// <summary>
     /// Animates each element in order, creating a 'peel' effect. The supplied action
     /// is invoked when the animation ends.
     /// </summary>
     public static void Peel(this IEnumerable<FrameworkElement> elements, Action endAction)
     {
       var elementList = elements.ToList();
       var lastElement = elementList.Last();
 
       // iterate over all the elements, animating each of them
       double delay = 0;
       foreach (FrameworkElement element in elementList)
       {
         var sb = GetPeelAnimation(element, delay);
 
         // add a Completed event handler to the last element
         if (element.Equals(lastElement))
         {
           sb.Completed += (s, e) =>
             {
               endAction();
             };
         }
 
         sb.Begin();
         delay += 50;
       }
     }
 
 
     /// <summary>
     /// Enumerates all the items that are currently visible in am ItemsControl. This implementation assumes
     /// that a VirtualizingStackPanel is being used as the ItemsPanel.
     /// </summary>
     public static IEnumerable<FrameworkElement> GetItemsInView(this ItemsControl itemsControl)
     {
        // locate the stack panel that hosts the items
       VirtualizingStackPanel vsp = itemsControl.Descendants<VirtualizingStackPanel>().First() as VirtualizingStackPanel;
 
       // iterate over each of the items in view
       int firstVisibleItem = (int)vsp.VerticalOffset;
       int visibleItemCount = (int)vsp.ViewportHeight;
       for (int index = firstVisibleItem; index <= firstVisibleItem + visibleItemCount + 1; index++)
       {
         var item = itemsControl.ItemContainerGenerator.ContainerFromIndex(index) as FrameworkElement;
         if (item == null)
           continue;
 
         yield return item;
       }
     }
 
     /// <summary>
     /// Creates a PlaneProjection and associates it with the given element, returning
     /// a Storyboard which will animate the PlaneProjection to 'peel' the item
     /// from the screen.
     /// </summary>
     private static Storyboard GetPeelAnimation(FrameworkElement element, double delay)
     {
       Storyboard sb;
 
       var projection = new PlaneProjection()
       {
         CenterOfRotationX = -0.1
       };
       element.Projection = projection;
 
       // compute the angle of rotation required to make this element appear
       // at a 90 degree angle at the edge of the screen.
       var width = element.ActualWidth;
       var targetAngle = Math.Atan(1000 / (width / 2));
       targetAngle = targetAngle * 180 / Math.PI;
 
       // animate the projection
       sb = new Storyboard();
       sb.BeginTime = TimeSpan.FromMilliseconds(delay);      
       sb.Children.Add(CreateAnimation(0, -(180 - targetAngle), 0.3, "RotationY", projection));
       sb.Children.Add(CreateAnimation(0, 23, 0.3, "RotationZ", projection));
       sb.Children.Add(CreateAnimation(0, -23, 0.3, "GlobalOffsetZ", projection));      
       return sb;
     }
 
     private static DoubleAnimation CreateAnimation(double? from, double? to, double duration,
       string targetProperty, DependencyObject target)
     {
       var db = new DoubleAnimation();
       db.To = to;
       db.From = from;
       db.EasingFunction = new SineEase();
       db.Duration = TimeSpan.FromSeconds(duration);
       Storyboard.SetTarget(db, target);
       Storyboard.SetTargetProperty(db, new PropertyPath(targetProperty));
       return db;
     }
 
     /// <summary>
     /// Creates a TranslateTransform and associates it with the given element, returning
     /// a Storyboard which will animate the TranslateTransform with a SineEase function
     /// </summary>
     private static Storyboard  GetSlideAnimation(FrameworkElement element, bool fromRight)
     {
       double from = fromRight ? 80 : -80;
       
       Storyboard sb;
       double delay = (MetroInMotion.GetAnimationLevel(element)) * 0.1 + 0.1;
 
       TranslateTransform trans = new TranslateTransform() { X = from };
       element.RenderTransform = trans;
 
       sb = new Storyboard();
       sb.BeginTime = TimeSpan.FromSeconds(delay);
       sb.Children.Add(CreateAnimation(from, 0, 0.8, "X", trans));      
       return sb;
     }
 
   }
 
   public static class ExtensionMethods
   {
     public static Point GetRelativePosition(this UIElement element, UIElement other)
     {
       return element.TransformToVisual(other)
         .Transform(new Point(0, 0));
     }
   }
 
   /// <summary>
   /// Animates an element so that it flies out and flies in!
   /// </summary>
   public class ItemFlyInAndOutAnimations
   {
     private Popup _popup;
 
     private Canvas _popupCanvas;
 
     private FrameworkElement _targetElement;
 
     private Point _targetElementPosition;
 
     private Image _targetElementClone;
 
     private Rectangle _backgroundMask;
 
     private static TimeSpan _flyInSpeed = TimeSpan.FromMilliseconds(200);
 
     private static TimeSpan _flyOutSpeed = TimeSpan.FromMilliseconds(300);
 
     public ItemFlyInAndOutAnimations()
     {
       // construct a popup, with a Canvas as its child
       _popup = new Popup();
       _popupCanvas = new Canvas();
       _popup.Child = _popupCanvas;
     }
 
     public static void TitleFlyIn(FrameworkElement title)
     {
       TranslateTransform trans = new TranslateTransform();
       trans.X = 300;
       trans.Y = -50;
       title.RenderTransform = trans;      
 
       var sb = new Storyboard();
 
       // animate the X position
       var db = CreateDoubleAnimation(300, 0,
           new SineEase(), trans, TranslateTransform.XProperty, _flyInSpeed);
       sb.Children.Add(db);
 
       // animate the Y position
       db = CreateDoubleAnimation(-100, 0,
           new SineEase(), trans, TranslateTransform.YProperty, _flyInSpeed);
       sb.Children.Add(db);
 
       sb.Begin();
     }
 
     /// <summary>
     /// Animate the previously 'flown-out' element back to its original location.
     /// </summary>
     public void ItemFlyIn()
     {
       if (_popupCanvas.Children.Count != 2)
         return;
 
       _popup.IsOpen = true;
       _backgroundMask.Opacity = 0.0;
 
       Image animatedImage = _popupCanvas.Children[1] as Image;
 
       var sb = new Storyboard();
 
       // animate the X position
       var db = CreateDoubleAnimation(_targetElementPosition.X - 100, _targetElementPosition.X,
           new SineEase(),
           _targetElementClone, Canvas.LeftProperty, _flyInSpeed);
       sb.Children.Add(db);
 
       // animate the Y position
       db = CreateDoubleAnimation(_targetElementPosition.Y - 50, _targetElementPosition.Y,
           new SineEase(),
           _targetElementClone, Canvas.TopProperty, _flyInSpeed);
       sb.Children.Add(db);
 
       sb.Completed += (s, e) =>
         {
           // when the animation has finished, hide the popup once more
           _popup.IsOpen = false;
 
           // restore the element we have animated
           _targetElement.Opacity = 1.0;
 
           // and get rid of our clone
           _popupCanvas.Children.Clear();
         };
 
       sb.Begin();
     }
 
 
     /// <summary>
     /// Animate the given element so that it flies off screen, fading 
     /// everything else that is on screen.
     /// </summary>
     public void ItemFlyOut(FrameworkElement element, Action action)
     {
       _targetElement = element;
       var rootElement = Application.Current.RootVisual as FrameworkElement;
 
       _backgroundMask = new Rectangle()
       {
         Fill = new SolidColorBrush(Colors.Black),
         Opacity = 0.0,
         Width = rootElement.ActualWidth,
         Height = rootElement.ActualHeight
       };
       _popupCanvas.Children.Add(_backgroundMask);
 
       _targetElementClone = new Image()
       {
         Source = new WriteableBitmap(element, null)
       };
       _popupCanvas.Children.Add(_targetElementClone);
 
       _targetElementPosition = element.GetRelativePosition(rootElement);
       Canvas.SetTop(_targetElementClone, _targetElementPosition.Y);
       Canvas.SetLeft(_targetElementClone, _targetElementPosition.X);
 
       var sb = new Storyboard();
 
       // animate the X position
       var db = CreateDoubleAnimation(_targetElementPosition.X, _targetElementPosition.X + 500,
           new SineEase() { EasingMode = EasingMode.EaseIn },
           _targetElementClone, Canvas.LeftProperty, _flyOutSpeed);
       sb.Children.Add(db);
 
       // animate the Y position
       db = CreateDoubleAnimation(_targetElementPosition.Y, _targetElementPosition.Y + 50,
           new SineEase() { EasingMode = EasingMode.EaseOut },
           _targetElementClone, Canvas.TopProperty, _flyOutSpeed);
       sb.Children.Add(db);     
       
       // fade out the other elements
       db = CreateDoubleAnimation(0, 1,
           null, _backgroundMask, UIElement.OpacityProperty, _flyOutSpeed);
       sb.Children.Add(db);
 
       sb.Completed += (s, e2) =>
         {
           action();
 
           // hide the popup, by placing a task on the dispatcher queue, this
           // should be executed after the navigation has occurred
           element.Dispatcher.BeginInvoke(() =>
           {
             _popup.IsOpen = false;
           });
         };
 
       // hide the element we have 'cloned' into the popup
       element.Opacity = 0.0;
 
       // open the popup
       _popup.IsOpen = true;
 
       // begin the animation
       sb.Begin();
     }
 
     public static DoubleAnimation CreateDoubleAnimation(double from, double to, IEasingFunction easing,
       DependencyObject target, object propertyPath, TimeSpan duration)
     {
       var db = new DoubleAnimation();
       db.To = to;
       db.From = from;
       db.EasingFunction = easing;
       db.Duration = duration;
       Storyboard.SetTarget(db, target);
       Storyboard.SetTargetProperty(db, new PropertyPath(propertyPath));
       return db;
     }
   }
 }