仿windows8 开始菜单 实现HubTileBase 以及仿鲜果联播实现 PulsingTile（脉冲磁贴）
本文章将以如何实现 开始菜单上的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>
最终效果：
该磁贴会根据 时间 放大倍数 等参数 定时脉冲缩放