http://blog.csdn.net/wangrenzhu2011/article/details/8750820 (转)
本文章将以如何实现 开始菜单上的tile 为主。
该控件代码经过测试可直接使用。
tile 在我的思路中分为了 3层。
基于ContentControl实现HeaderedContentControl 用于增加Tile种的内容标题
在HeaderedContentControl 的基础上 实现 3d变换 根据触点方向触发不同动画。
实现HubTileBase
在HubTileBase 下我们可以实现多种磁贴
如liveTile(实时反馈) MosaicTile(仿wp8 风格) PulsingTile(脉冲)等等。。
以下将以PulsingTile 代码为主 来介绍
- public class HeaderedContentControl : ContentControl
- {
- public static readonly DependencyProperty HeaderProperty =
- DependencyProperty.Register("Header", typeof(object), typeof(HeaderedContentControl), new PropertyMetadata(null));
- public static readonly DependencyProperty HeaderStyleProperty =
- DependencyProperty.Register("HeaderStyle", typeof(Style), typeof(HeaderedContentControl), new PropertyMetadata(null));
- public static readonly DependencyProperty HeaderTemplateProperty =
- DependencyProperty.Register("HeaderTemplate", typeof(DataTemplate), typeof(HeaderedContentControl), new PropertyMetadata(null));
- public static readonly DependencyProperty HeaderTemplateSelectorProperty =
- DependencyProperty.Register("HeaderTemplateSelector", typeof(DataTemplateSelector), typeof(HeaderedContentControl), new PropertyMetadata(null));
- public HeaderedContentControl()
- {
- this.DefaultStyleKey = typeof(HeaderedContentControl);
- }
- public object Header
- {
- get
- {
- return base.GetValue(HeaderProperty);
- }
- set
- {
- base.SetValue(HeaderProperty, value);
- }
- }
- public Style HeaderStyle
- {
- get
- {
- return (Style)base.GetValue(HeaderStyleProperty);
- }
- set
- {
- base.SetValue(HeaderStyleProperty, value);
- }
- }
- public DataTemplate HeaderTemplate
- {
- get
- {
- return (DataTemplate)base.GetValue(HeaderTemplateProperty);
- }
- set
- {
- base.SetValue(HeaderTemplateProperty, value);
- }
- }
- public DataTemplateSelector HeaderTemplateSelector
- {
- get
- {
- return (DataTemplateSelector)base.GetValue(HeaderTemplateSelectorProperty);
- }
- set
- {
- base.SetValue(HeaderTemplateSelectorProperty, value);
- }
- }
- }
- public class HubTileBase : HeaderedContentControl
- {
- public static readonly DependencyProperty AccentBrushProperty = DependencyProperty.Register("AccentBrush", typeof(Brush), typeof(HubTileBase), new PropertyMetadata(null));
- public static readonly DependencyProperty GroupNameProperty = DependencyProperty.Register("GroupName", typeof(string), typeof(HubTileBase), new PropertyMetadata(string.Empty));
- public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(Windows.UI.Xaml.Media.ImageSource), typeof(HubTileBase), new PropertyMetadata(null));
- public static readonly DependencyProperty IsFrozenProperty = DependencyProperty.Register("IsFrozen", typeof(bool), typeof(HubTileBase), new PropertyMetadata((bool)false, OnIsFrozenChanged));
- public static readonly DependencyProperty OverrideDefaultStatesProperty = DependencyProperty.Register("OverrideDefaultStates", typeof(bool), typeof(HubTileBase), new PropertyMetadata((bool)false));
- private PointerDirection pointerdirection;
- private bool pointerover;
- private bool pointerpressed;
- public static readonly DependencyProperty RotationDepthProperty = DependencyProperty.Register("RotationDepth", typeof(double), typeof(HubTileBase), new PropertyMetadata((double)20.0));
- public static readonly DependencyProperty ScaleDepthProperty = DependencyProperty.Register("ScaleDepth", typeof(double), typeof(HubTileBase), new PropertyMetadata((double)0.9));
- private Storyboard storyboard;
- public static readonly DependencyProperty TilePressDurationProperty = DependencyProperty.Register("TilePressDuration", typeof(TimeSpan), typeof(HubTileBase), new PropertyMetadata(TimeSpan.FromSeconds((double)0.1)));
- public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(object), typeof(HubTileBase), new PropertyMetadata(null));
- public static readonly DependencyProperty TitleStyleProperty = DependencyProperty.Register("TitleStyle", typeof(Style), typeof(HubTileBase), new PropertyMetadata(null));
- private Timeline BuildAnimation(PointerDirection direction)
- {
- DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
- Storyboard.SetTarget(frames, this);
- if (direction != PointerDirection.Center)
- {
- PlaneProjection projection2 = new PlaneProjection();
- projection2.CenterOfRotationZ = 0.0;
- PlaneProjection projection = projection2;
- EasingDoubleKeyFrame frame3 = new EasingDoubleKeyFrame();
- frame3.KeyTime = ((KeyTime)TimeSpan.FromSeconds((double)0.0));
- frame3.Value = 0.0;
- EasingDoubleKeyFrame frame = frame3;
- EasingDoubleKeyFrame frame4 = new EasingDoubleKeyFrame();
- frame4.KeyTime = ((KeyTime)this.TilePressDuration);
- EasingDoubleKeyFrame frame2 = frame4;
- frames.KeyFrames.Add(frame);
- frames.KeyFrames.Add(frame2);
- if ((direction == PointerDirection.Left) || (direction == PointerDirection.Bottom))
- {
- frame2.Value = this.RotationDepth;
- }
- else if ((direction == PointerDirection.Top) || (direction == PointerDirection.Right))
- {
- frame2.Value = -this.RotationDepth;
- }
- if ((direction == PointerDirection.Top) || (direction == PointerDirection.Bottom))
- {
- Storyboard.SetTargetProperty(frames, "(UIElement.Projection).(PlaneProjection.RotationX)");
- }
- else if ((direction == PointerDirection.Left) || (direction == PointerDirection.Right))
- {
- Storyboard.SetTargetProperty(frames, "(UIElement.Projection).(PlaneProjection.RotationY)");
- }
- if (direction == PointerDirection.Bottom)
- {
- projection.CenterOfRotationX = 0.5;
- projection.CenterOfRotationY = 0.0;
- }
- else if (direction == PointerDirection.Top)
- {
- projection.CenterOfRotationX = (0.5);
- projection.CenterOfRotationY = (1.0);
- }
- else if (direction == PointerDirection.Left)
- {
- projection.CenterOfRotationX = (1.0);
- projection.CenterOfRotationY = (0.5);
- }
- else if (direction == PointerDirection.Right)
- {
- projection.CenterOfRotationX = (0.0);
- projection.CenterOfRotationY = (0.5);
- }
- base.Projection = (projection);
- }
- return frames;
- }
- private Timeline BuildScaleXAnimation()
- {
- DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
- Storyboard.SetTarget(frames, this);
- Storyboard.SetTargetProperty(frames, "(UIElement.RenderTransform).(CompositeTransform.ScaleX)");
- EasingDoubleKeyFrame frame3 = new EasingDoubleKeyFrame();
- frame3.KeyTime = ((KeyTime)TimeSpan.FromSeconds((double)0.0));
- frame3.Value = (1.0);
- EasingDoubleKeyFrame frame = frame3;
- EasingDoubleKeyFrame frame4 = new EasingDoubleKeyFrame();
- frame4.KeyTime = ((KeyTime)this.TilePressDuration);
- frame4.Value = (this.ScaleDepth);
- EasingDoubleKeyFrame frame2 = frame4;
- frames.KeyFrames.Add(frame);
- frames.KeyFrames.Add(frame2);
- CompositeTransform transform = new CompositeTransform();
- base.RenderTransformOrigin = (new Point(0.5, 0.5));
- base.RenderTransform = (transform);
- return frames;
- }
- private Timeline BuildScaleYAnimation()
- {
- DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
- Storyboard.SetTarget(frames, this);
- Storyboard.SetTargetProperty(frames, "(UIElement.RenderTransform).(CompositeTransform.ScaleY)");
- EasingDoubleKeyFrame frame3 = new EasingDoubleKeyFrame();
- frame3.KeyTime = ((KeyTime)TimeSpan.FromSeconds((double)0.0));
- frame3.Value = (1.0);
- EasingDoubleKeyFrame frame = frame3;
- EasingDoubleKeyFrame frame4 = new EasingDoubleKeyFrame();
- frame4.KeyTime = ((KeyTime)this.TilePressDuration);
- frame4.Value = (this.ScaleDepth);
- EasingDoubleKeyFrame frame2 = frame4;
- frames.KeyFrames.Add(frame);
- frames.KeyFrames.Add(frame2);
- CompositeTransform transform = new CompositeTransform();
- base.RenderTransform = (transform);
- base.RenderTransformOrigin = (new Point(0.5, 0.5));
- return frames;
- }
- private void ExecutePointerReleased()
- {
- if (this.pointerpressed)
- {
- if (this.OverrideDefaultStates)
- {
- if (this.pointerover)
- {
- VisualStateManager.GoToState(this, "PointerOver", true);
- }
- else
- {
- VisualStateManager.GoToState(this, "Normal", true);
- }
- }
- else if (this.storyboard != null)
- {
- if (this.pointerdirection != PointerDirection.Center)
- {
- DoubleAnimationUsingKeyFrames frames = this.storyboard.Children[0] as DoubleAnimationUsingKeyFrames;
- if (frames != null)
- {
- EasingDoubleKeyFrame frame = frames.KeyFrames[0] as EasingDoubleKeyFrame;
- EasingDoubleKeyFrame frame2 = frames.KeyFrames[1] as EasingDoubleKeyFrame;
- frame.Value = (frame2.Value);
- frame2.Value = (0.0);
- }
- }
- else
- {
- DoubleAnimationUsingKeyFrames frames2 = this.storyboard.Children[0] as DoubleAnimationUsingKeyFrames;
- DoubleAnimationUsingKeyFrames frames3 = this.storyboard.Children[1] as DoubleAnimationUsingKeyFrames;
- if (frames2 != null)
- {
- EasingDoubleKeyFrame frame3 = frames2.KeyFrames[0] as EasingDoubleKeyFrame;
- EasingDoubleKeyFrame frame4 = frames2.KeyFrames[1] as EasingDoubleKeyFrame;
- frame3.Value = (frame4.Value);
- frame4.Value = (1.0);
- }
- if (frames3 != null)
- {
- EasingDoubleKeyFrame frame5 = frames3.KeyFrames[0] as EasingDoubleKeyFrame;
- EasingDoubleKeyFrame frame6 = frames3.KeyFrames[1] as EasingDoubleKeyFrame;
- frame5.Value = (frame6.Value);
- frame6.Value = (1.0);
- }
- }
- this.storyboard.Begin();
- }
- }
- this.pointerpressed = false;
- }
- protected virtual void OnIsFrozenChanged(DependencyPropertyChangedEventArgs e)
- {
- }
- private static void OnIsFrozenChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
- {
- HubTileBase base2 = sender as HubTileBase;
- if (base2 != null)
- {
- base2.OnIsFrozenChanged(e);
- }
- }
- protected override void OnPointerEntered(PointerRoutedEventArgs e)
- {
- this.pointerover = true;
- VisualStateManager.GoToState(this, "PointerOver", true);
- base.OnPointerEntered(e);
- }
- protected override void OnPointerExited(PointerRoutedEventArgs e)
- {
- if (this.pointerpressed)
- {
- this.ExecutePointerReleased();
- }
- this.pointerover = false;
- VisualStateManager.GoToState(this, "Normal", true);
- base.OnPointerExited(e);
- }
- protected override void OnPointerPressed(PointerRoutedEventArgs e)
- {
- this.pointerpressed = true;
- if (this.OverrideDefaultStates)
- {
- VisualStateManager.GoToState(this, "PointerPressed", true);
- }
- else
- {
- PointerPoint currentpoint = e.GetCurrentPoint(this);
- var point = currentpoint.Position;
- double num = base.ActualWidth / 3.0;
- double num2 = base.ActualHeight / 3.0;
- Dictionary<PointerDirection, Rect> pieces = new Dictionary<PointerDirection, Rect>();
- pieces.Add(PointerDirection.TopLeft, new Rect(0.0, 0.0, num, num2));
- pieces.Add(PointerDirection.Top, new Rect(num, 0.0, num, num2));
- pieces.Add(PointerDirection.TopRight, new Rect(num * 2.0, 0.0, num, num2));
- pieces.Add(PointerDirection.Left, new Rect(0.0, num2, num, num2));
- pieces.Add(PointerDirection.Center, new Rect(num, num2, num, num2));
- pieces.Add(PointerDirection.Right, new Rect(num * 2.0, num2, num, num2));
- pieces.Add(PointerDirection.BottomLeft, new Rect(0.0, num2 * 2.0, num, num2));
- pieces.Add(PointerDirection.Bottom, new Rect(num, num2 * 2.0, num, num2));
- pieces.Add(PointerDirection.BottomRight, new Rect(num * 2.0, num2 * 2.0, num, num2));
- this.pointerdirection =
- (from _direction in pieces.Keys
- where pieces[_direction].Contains(point)
- select _direction).FirstOrDefault();
- this.storyboard = new Storyboard();
- if (this.pointerdirection <= PointerDirection.Center)
- {
- if (this.pointerdirection == PointerDirection.Center)
- {
- Timeline timeline = this.BuildScaleXAnimation();
- Timeline timeline2 = this.BuildScaleYAnimation();
- this.storyboard.Children.Add(timeline);
- this.storyboard.Children.Add(timeline2);
- this.storyboard.Begin();
- }
- else
- {
- Timeline timeline3 = this.BuildAnimation(this.pointerdirection);
- this.storyboard.Children.Add(timeline3);
- this.storyboard.Begin();
- }
- }
- else if (this.pointerdirection == PointerDirection.TopLeft)
- {
- if (currentpoint.Position.X > currentpoint.Position.Y)
- {
- Timeline timeline4 = this.BuildAnimation(PointerDirection.Top);
- this.storyboard.Children.Add(timeline4);
- this.storyboard.Begin();
- }
- else
- {
- Timeline timeline5 = this.BuildAnimation(PointerDirection.Left);
- this.storyboard.Children.Add(timeline5);
- this.storyboard.Begin();
- }
- }
- else if (this.pointerdirection == PointerDirection.TopRight)
- {
- if (currentpoint.Position.Y > (num2 - (currentpoint.Position.X - (num * 2.0))))
- {
- Timeline timeline6 = this.BuildAnimation(PointerDirection.Right);
- this.storyboard.Children.Add(timeline6);
- this.storyboard.Begin();
- }
- else
- {
- Timeline timeline7 = this.BuildAnimation(PointerDirection.Top);
- this.storyboard.Children.Add(timeline7);
- this.storyboard.Begin();
- }
- }
- else if (this.pointerdirection == PointerDirection.BottomLeft)
- {
- if ((currentpoint.Position.Y - (num2 * 2.0)) > (num2 - currentpoint.Position.X))
- {
- Timeline timeline8 = this.BuildAnimation(PointerDirection.Bottom);
- this.storyboard.Children.Add(timeline8);
- this.storyboard.Begin();
- }
- else
- {
- Timeline timeline9 = this.BuildAnimation(PointerDirection.Left);
- this.storyboard.Children.Add(timeline9);
- this.storyboard.Begin();
- }
- }
- else if (currentpoint.Position.X > currentpoint.Position.Y)
- {
- Timeline timeline10 = this.BuildAnimation(PointerDirection.Right);
- this.storyboard.Children.Add(timeline10);
- this.storyboard.Begin();
- }
- else
- {
- Timeline timeline11 = this.BuildAnimation(PointerDirection.Bottom);
- this.storyboard.Children.Add(timeline11);
- this.storyboard.Begin();
- }
- }
- base.OnPointerPressed(e);
- }
- protected override void OnPointerReleased(PointerRoutedEventArgs e)
- {
- this.ExecutePointerReleased();
- base.OnPointerReleased(e);
- }
- public Brush AccentBrush
- {
- get
- {
- return (Brush)base.GetValue(AccentBrushProperty);
- }
- set
- {
- base.SetValue(AccentBrushProperty, value);
- }
- }
- public string GroupName
- {
- get
- {
- return (string)((string)base.GetValue(GroupNameProperty));
- }
- set
- {
- base.SetValue(GroupNameProperty, value);
- }
- }
- public Windows.UI.Xaml.Media.ImageSource ImageSource
- {
- get
- {
- return (Windows.UI.Xaml.Media.ImageSource)base.GetValue(ImageSourceProperty);
- }
- set
- {
- base.SetValue(ImageSourceProperty, value);
- }
- }
- public bool IsFrozen
- {
- get
- {
- return (bool)((bool)base.GetValue(IsFrozenProperty));
- }
- set
- {
- base.SetValue(IsFrozenProperty, (bool)value);
- }
- }
- public bool OverrideDefaultStates
- {
- get
- {
- return (bool)((bool)base.GetValue(OverrideDefaultStatesProperty));
- }
- set
- {
- base.SetValue(OverrideDefaultStatesProperty, (bool)value);
- }
- }
- public double RotationDepth
- {
- get
- {
- return (double)((double)base.GetValue(RotationDepthProperty));
- }
- set
- {
- base.SetValue(RotationDepthProperty, (double)value);
- }
- }
- public double ScaleDepth
- {
- get
- {
- return (double)((double)base.GetValue(ScaleDepthProperty));
- }
- set
- {
- base.SetValue(ScaleDepthProperty, (double)value);
- }
- }
- public TimeSpan TilePressDuration
- {
- get
- {
- return (TimeSpan)base.GetValue(TilePressDurationProperty);
- }
- set
- {
- base.SetValue(TilePressDurationProperty, value);
- }
- }
- public object Title
- {
- get
- {
- return base.GetValue(TitleProperty);
- }
- set
- {
- base.SetValue(TitleProperty, value);
- }
- }
- public Style TitleStyle
- {
- get
- {
- return (Style)base.GetValue(TitleStyleProperty);
- }
- set
- {
- base.SetValue(TitleStyleProperty, value);
- }
- }
- }
- public static class HubTileService
- {
- private static List<WeakReference> Tiles = new List<WeakReference>();
- internal static void Dequeue(HubTileBase tile)
- {
- foreach (WeakReference reference in Tiles)
- {
- if (reference.Target == tile)
- {
- Tiles.Remove(reference);
- break;
- }
- }
- }
- internal static void Enqueue(HubTileBase tile)
- {
- WeakReference reference = new WeakReference(tile, false);
- Tiles.Add(reference);
- }
- public static void Freeze(HubTileBase tile)
- {
- foreach (WeakReference reference in Tiles)
- {
- if (reference.Target == tile)
- {
- HubTileBase base2 = reference.Target as HubTileBase;
- base2.IsFrozen = true;
- break;
- }
- }
- }
- public static void Freeze(string groupname)
- {
- using (List<WeakReference>.Enumerator enumerator = Tiles.GetEnumerator())
- {
- while (enumerator.MoveNext())
- {
- HubTileBase base2 = enumerator.Current.Target as HubTileBase;
- if ((base2 != null) && (base2.GroupName == groupname))
- {
- base2.IsFrozen = false;
- }
- }
- }
- }
- public static void UnFreeze(HubTileBase tile)
- {
- foreach (WeakReference reference in Tiles)
- {
- if (reference.Target == tile)
- {
- HubTileBase base2 = reference.Target as HubTileBase;
- base2.IsFrozen = false;
- break;
- }
- }
- }
- public static void UnFreeze(string groupname)
- {
- using (List<WeakReference>.Enumerator enumerator = Tiles.GetEnumerator())
- {
- while (enumerator.MoveNext())
- {
- HubTileBase base2 = enumerator.Current.Target as HubTileBase;
- if ((base2 != null) && (base2.GroupName == groupname))
- {
- base2.IsFrozen = false;
- }
- }
- }
- }
- }
- public enum PointerDirection
- {
- Left,
- Top,
- Right,
- Bottom,
- Center,
- TopLeft,
- TopRight,
- BottomLeft,
- BottomRight
- }
- public class PulsingTile : HubTileBase
- {
- protected ContentPresenter PART_Content;
- public static readonly DependencyProperty PulseDurationProperty = DependencyProperty.Register("PulseDuration", typeof(TimeSpan), typeof(PulsingTile), new PropertyMetadata(TimeSpan.FromSeconds((double)4.0), new PropertyChangedCallback(OnValueChanged)));
- public static readonly DependencyProperty PulseScaleProperty = DependencyProperty.Register("PulseScale", typeof(double), typeof(PulsingTile), new PropertyMetadata((double)1.0, new PropertyChangedCallback(OnValueChanged)));
- private Storyboard pulseStroyboard;
- public static readonly DependencyProperty RadiusXProperty = DependencyProperty.Register("RadiusX", typeof(double), typeof(PulsingTile), new PropertyMetadata((double)0.0, new PropertyChangedCallback(OnValueChanged)));
- public static readonly DependencyProperty RadiusYProperty = DependencyProperty.Register("RadiusY", typeof(double), typeof(PulsingTile), new PropertyMetadata((double)0.0, new PropertyChangedCallback(OnValueChanged)));
- private Storyboard roatationStroyboard;
- public static readonly DependencyProperty TranslateDurationProperty = DependencyProperty.Register("TranslateDuration", typeof(TimeSpan), typeof(PulsingTile), new PropertyMetadata(TimeSpan.FromSeconds((double)4.0), new PropertyChangedCallback(OnValueChanged)));
- public PulsingTile()
- {
- base.DefaultStyleKey = (typeof(PulsingTile));
- PulsingTile tile = this;
- this.Loaded += this.OnLoaded;
- }
- private void AnimateContent()
- {
- if (this.PART_Content != null)
- {
- RectangleGeometry geometry = new RectangleGeometry();
- geometry.Rect = (new Rect(0.0, 0.0, base.ActualWidth, base.ActualHeight));
- base.Clip = (geometry);
- this.PART_Content.RenderTransform = (new CompositeTransform());
- this.PART_Content.RenderTransformOrigin = (new Point(0.5, 0.5));
- this.PART_Content.Visibility = Windows.UI.Xaml.Visibility.Visible;
- DoubleAnimationUsingKeyFrames frames = this.BuildXTimeLine(this.RadiusX, this.RadiusY);
- DoubleAnimationUsingKeyFrames frames2 = this.BuildYTimeLine(this.RadiusX, this.RadiusY);
- this.roatationStroyboard = new Storyboard();
- RepeatBehavior behavior = new RepeatBehavior();
- behavior.Type = (RepeatBehaviorType.Forever);
- this.roatationStroyboard.RepeatBehavior = (behavior);
- this.roatationStroyboard.Children.Add(frames);
- this.roatationStroyboard.Children.Add(frames2);
- Storyboard.SetTarget(frames, this.PART_Content);
- Storyboard.SetTarget(frames2, this.PART_Content);
- Storyboard.SetTargetProperty(frames, "(UIElement.RenderTransform).(CompositeTransform.TranslateX)");
- Storyboard.SetTargetProperty(frames2, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
- DoubleAnimationUsingKeyFrames frames3 = this.BuildPulseXTimeLine(this.PulseScale);
- DoubleAnimationUsingKeyFrames frames4 = this.BuildPulseYTimeLine(this.PulseScale);
- this.pulseStroyboard = new Storyboard();
- this.pulseStroyboard.AutoReverse = (true);
- this.pulseStroyboard.SpeedRatio = (0.4);
- RepeatBehavior behavior2 = new RepeatBehavior();
- behavior2.Type = (RepeatBehaviorType.Forever);
- this.pulseStroyboard.RepeatBehavior = (behavior2);
- this.pulseStroyboard.Children.Add(frames3);
- this.pulseStroyboard.Children.Add(frames4);
- Storyboard.SetTarget(frames3, this.PART_Content);
- Storyboard.SetTarget(frames4, this.PART_Content);
- Storyboard.SetTargetProperty(frames3, "(UIElement.RenderTransform).(CompositeTransform.ScaleX)");
- Storyboard.SetTargetProperty(frames4, "(UIElement.RenderTransform).(CompositeTransform.ScaleY)");
- this.pulseStroyboard.Begin();
- this.roatationStroyboard.Begin();
- }
- }
- private DoubleAnimationUsingKeyFrames BuildPulseXTimeLine(double pulseScale)
- {
- TimeSpan pulseDuration = this.PulseDuration;
- SplineDoubleKeyFrame frame = new SplineDoubleKeyFrame();
- frame.Value = (1.0);
- frame.KeyTime = ((KeyTime)TimeSpan.FromSeconds((double)0.0));
- EasingDoubleKeyFrame frame2 = new EasingDoubleKeyFrame();
- frame2.Value = (pulseScale);
- frame2.KeyTime = (KeyTime.FromTimeSpan(this.PulseDuration));
- SineEase ease = new SineEase();
- ease.EasingMode = EasingMode.EaseOut;
- frame2.EasingFunction = (ease);
- DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
- frames.KeyFrames.Add(frame);
- frames.KeyFrames.Add(frame2);
- return frames;
- }
- private DoubleAnimationUsingKeyFrames BuildPulseYTimeLine(double pulseScale)
- {
- TimeSpan pulseDuration = this.PulseDuration;
- SplineDoubleKeyFrame frame = new SplineDoubleKeyFrame();
- frame.Value = (1.0);
- frame.KeyTime = ((KeyTime)TimeSpan.FromSeconds((double)0.0));
- EasingDoubleKeyFrame frame2 = new EasingDoubleKeyFrame();
- frame2.Value = (pulseScale);
- frame2.KeyTime = (KeyTime.FromTimeSpan(this.PulseDuration));
- SineEase ease = new SineEase();
- ease.EasingMode = EasingMode.EaseOut;
- frame2.EasingFunction = (ease);
- DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
- frames.KeyFrames.Add(frame);
- frames.KeyFrames.Add(frame2);
- return frames;
- }
- private DoubleAnimationUsingKeyFrames BuildXTimeLine(double radiusx, double radiusy)
- {
- TimeSpan translateDuration = this.TranslateDuration;
- DiscreteDoubleKeyFrame frame = new DiscreteDoubleKeyFrame();
- frame.Value = (0.0);
- frame.KeyTime = ((KeyTime)TimeSpan.FromSeconds((double)0.0));
- EasingDoubleKeyFrame frame2 = new EasingDoubleKeyFrame();
- frame2.Value = (radiusx);
- frame2.KeyTime = (KeyTime.FromTimeSpan(TimeSpan.FromSeconds((double)(translateDuration.TotalSeconds / 4.0))));
- SineEase ease = new SineEase();
- ease.EasingMode = EasingMode.EaseIn;
- frame2.EasingFunction = (ease);
- EasingDoubleKeyFrame frame3 = new EasingDoubleKeyFrame();
- frame3.Value = (0.0);
- frame3.KeyTime = (KeyTime.FromTimeSpan(TimeSpan.FromSeconds((double)(translateDuration.TotalSeconds / 2.0))));
- SineEase ease2 = new SineEase();
- ease2.EasingMode = EasingMode.EaseInOut;
- frame3.EasingFunction = ease2;
- EasingDoubleKeyFrame frame4 = new EasingDoubleKeyFrame();
- frame4.Value = (-radiusx);
- frame4.KeyTime = (KeyTime.FromTimeSpan(TimeSpan.FromSeconds((double)((translateDuration.TotalSeconds * 3.0) / 4.0))));
- SineEase ease3 = new SineEase();
- ease3.EasingMode = EasingMode.EaseIn;
- frame4.EasingFunction = (ease3);
- EasingDoubleKeyFrame frame5 = new EasingDoubleKeyFrame();
- frame5.Value = (0.0);
- frame5.KeyTime = (KeyTime.FromTimeSpan(translateDuration));
- SineEase ease4 = new SineEase();
- ease4.EasingMode = EasingMode.EaseInOut;
- frame5.EasingFunction = (ease4);
- DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
- frames.KeyFrames.Add(frame);
- frames.KeyFrames.Add(frame2);
- frames.KeyFrames.Add(frame3);
- frames.KeyFrames.Add(frame4);
- frames.KeyFrames.Add(frame5);
- return frames;
- }
- private DoubleAnimationUsingKeyFrames BuildYTimeLine(double radiusx, double radiusy)
- {
- TimeSpan translateDuration = this.TranslateDuration;
- DiscreteDoubleKeyFrame frame = new DiscreteDoubleKeyFrame();
- frame.Value = (0.0);
- frame.KeyTime = ((KeyTime)TimeSpan.FromSeconds((double)0.0));
- EasingDoubleKeyFrame frame2 = new EasingDoubleKeyFrame();
- frame2.Value = (this.RadiusY);
- frame2.KeyTime = (KeyTime.FromTimeSpan(TimeSpan.FromSeconds((double)(translateDuration.TotalSeconds / 4.0))));
- SineEase ease = new SineEase();
- ease.EasingMode = EasingMode.EaseIn;
- frame2.EasingFunction = (ease);
- EasingDoubleKeyFrame frame3 = new EasingDoubleKeyFrame();
- frame3.Value = (2.0 * this.RadiusY);
- frame3.KeyTime = (KeyTime.FromTimeSpan(TimeSpan.FromSeconds((double)(translateDuration.TotalSeconds / 2.0))));
- SineEase ease2 = new SineEase();
- ease2.EasingMode = EasingMode.EaseIn;
- frame3.EasingFunction = (ease2);
- EasingDoubleKeyFrame frame4 = new EasingDoubleKeyFrame();
- frame4.Value = (radiusy);
- frame4.KeyTime = (KeyTime.FromTimeSpan(TimeSpan.FromSeconds((double)((translateDuration.TotalSeconds * 3.0) / 4.0))));
- SineEase ease3 = new SineEase();
- ease3.EasingMode = EasingMode.EaseInOut;
- frame4.EasingFunction = (ease3);
- EasingDoubleKeyFrame frame5 = new EasingDoubleKeyFrame();
- frame5.Value = (0.0);
- frame5.KeyTime = (KeyTime.FromTimeSpan(translateDuration));
- SineEase ease4 = new SineEase();
- ease4.EasingMode = EasingMode.EaseIn;
- frame5.EasingFunction = (ease4);
- DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
- frames.KeyFrames.Add(frame);
- frames.KeyFrames.Add(frame2);
- frames.KeyFrames.Add(frame3);
- frames.KeyFrames.Add(frame4);
- frames.KeyFrames.Add(frame5);
- return frames;
- }
- protected override void OnApplyTemplate()
- {
- base.OnApplyTemplate();
- this.PART_Content = base.GetTemplateChild("PART_Content") as ContentPresenter;
- }
- protected override void OnIsFrozenChanged(DependencyPropertyChangedEventArgs e)
- {
- if (base.IsFrozen)
- {
- if (this.pulseStroyboard != null)
- {
- this.pulseStroyboard.Stop();
- }
- if (this.roatationStroyboard != null)
- {
- this.roatationStroyboard.Stop();
- }
- }
- else
- {
- if (this.pulseStroyboard != null)
- {
- this.pulseStroyboard.Begin();
- }
- if (this.roatationStroyboard != null)
- {
- this.roatationStroyboard.Begin();
- }
- }
- }
- private void OnLoaded(object sender, RoutedEventArgs e)
- {
- HubTileService.Enqueue(this);
- PulsingTile tile = this;
- this.Loaded += PulsingTile_Unloaded;
- this.StartAnimation();
- }
- private static void OnValueChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
- {
- PulsingTile tile = sender as PulsingTile;
- if (tile != null)
- {
- tile.StopAnimation();
- tile.StartAnimation();
- }
- }
- private void PulsingTile_Unloaded(object sender, RoutedEventArgs e)
- {
- HubTileService.Dequeue(this);
- this.Unloaded -= PulsingTile_Unloaded;
- }
- private void StartAnimation()
- {
- this.AnimateContent();
- }
- private void StopAnimation()
- {
- if (this.pulseStroyboard != null)
- {
- this.pulseStroyboard.Stop();
- }
- if (this.roatationStroyboard != null)
- {
- this.roatationStroyboard.Stop();
- }
- }
- public TimeSpan PulseDuration
- {
- get
- {
- return (TimeSpan)base.GetValue(PulseDurationProperty);
- }
- set
- {
- base.SetValue(PulseDurationProperty, value);
- }
- }
- public double PulseScale
- {
- get
- {
- return (double)((double)base.GetValue(PulseScaleProperty));
- }
- set
- {
- base.SetValue(PulseScaleProperty, (double)value);
- }
- }
- public double RadiusX
- {
- get
- {
- return (double)((double)base.GetValue(RadiusXProperty));
- }
- set
- {
- base.SetValue(RadiusXProperty, (double)value);
- }
- }
- public double RadiusY
- {
- get
- {
- return (double)((double)base.GetValue(RadiusYProperty));
- }
- set
- {
- base.SetValue(RadiusYProperty, (double)value);
- }
- }
- public TimeSpan TranslateDuration
- {
- get
- {
- return (TimeSpan)base.GetValue(TranslateDurationProperty);
- }
- set
- {
- base.SetValue(TranslateDurationProperty, value);
- }
- }
- }
- <ResourceDictionary
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:PulsingTile="using:WinRTXamlToolkit.Controls">
- <SolidColorBrush x:Key="AccentBrush" Color="#FF1FAEFF" />
- <DataTemplate x:Key="ImageTileContentTemplate">
- <Grid>
- <Rectangle Fill="{Binding Background}"/>
- <Rectangle Fill="White" Opacity="{Binding Opacity}"/>
- <Image Source="{Binding Image}" Width="{Binding ImageWidth}" Height="{Binding ImageHeight}"
- HorizontalAlignment="{Binding HorizontalImageAlignment}"
- VerticalAlignment="{Binding VerticalImageAlignment}" Stretch="UniformToFill"/>
- </Grid>
- </DataTemplate>
- <Style TargetType="ContentControl" x:Key="DefaultHeaderStyle">
- <Setter Property="HorizontalAlignment" Value="Left"/>
- <Setter Property="VerticalAlignment" Value="Bottom"/>
- <Setter Property="Margin" Value="10 5"/>
- <Setter Property="FontSize" Value="18"/>
- </Style>
- <Style TargetType="ContentControl" x:Key="DefaultTitleStyle">
- <Setter Property="HorizontalAlignment" Value="Stretch"/>
- <Setter Property="VerticalAlignment" Value="Top"/>
- <Setter Property="Margin" Value="5"/>
- <Setter Property="FontSize" Value="10"/>
- </Style>
- <Style TargetType="PulsingTile:PulsingTile" >
- <Setter Property="Padding" Value="3"/>
- <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
- <Setter Property="VerticalContentAlignment" Value="Stretch"/>
- <Setter Property="HeaderStyle" Value="{StaticResource DefaultHeaderStyle}"/>
- <Setter Property="TitleStyle" Value="{StaticResource DefaultTitleStyle}"/>
- <Setter Property="Template">
- <Setter.Value>
- <ControlTemplate TargetType="PulsingTile:PulsingTile">
- <Grid x:Name="PART_Layout">
- <VisualStateManager.VisualStateGroups>
- <VisualStateGroup x:Name="CommonStates">
- <VisualState x:Name="Normal"/>
- <VisualState x:Name="PointerOver">
- <Storyboard>
- <DoubleAnimation Duration="0" To="0.28"
- Storyboard.TargetProperty="Opacity"
- Storyboard.TargetName="PointerOveRect"/>
- </Storyboard>
- </VisualState>
- <VisualState x:Name="PointerPressed">
- </VisualState>
- </VisualStateGroup>
- </VisualStateManager.VisualStateGroups>
- <Rectangle x:Name="PointerOveRect"
- Fill="{StaticResource ApplicationForegroundThemeBrush}"
- Opacity="0" Margin="-2"/>
- <Border BorderBrush="{TemplateBinding BorderBrush}"
- BorderThickness="{TemplateBinding BorderThickness}"
- Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}"
- x:Name="PART_Border">
- <Grid Margin="{TemplateBinding Padding}" >
- <ContentPresenter
- x:Name="PART_Content"
- HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
- VerticalAlignment="{TemplateBinding VerticalAlignment}" />
- <ContentControl Content="{TemplateBinding Title}"
- Style="{TemplateBinding TitleStyle}"/>
- <ContentControl Content="{TemplateBinding Header}"
- Style="{TemplateBinding HeaderStyle}"
- ContentTemplate="{TemplateBinding HeaderTemplate}"
- ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
- />
- </Grid>
- </Border>
- </Grid>
- </ControlTemplate>
- </Setter.Value>
- </Setter>
- </Style>
- </ResourceDictionary>
以上是主体代码。可以将其复制到项目中编译后可用。
使用方式:
- <tools:PulsingTile
- HorizontalAlignment="Stretch"
- Width="423423"
- Height="43423"
- d:DesignWidth="200"
- d:DesignHeight="200"
- Foreground="White"
- RadiusX="0"
- RadiusY="0"
- Title="123123123123"
- PulseDuration="0:0:5"
- PulseScale="2"
- VerticalAlignment="Stretch">
- <Image Source="XXXXXXXXXXXXXXXXX"></Image>
- </tools:PulsingTile>
最终效果: 该磁贴会根据 时间 放大倍数 等参数 定时脉冲缩放
仿windows8 开始菜单 实现HubTileBase 以及仿鲜果联播实现 PulsingTile(脉冲磁贴),布布扣,bubuko.com