仿windows8 开始菜单 实现HubTileBase 以及仿鲜果联播实现 PulsingTile（脉冲磁贴）

http://blog.csdn.net/wangrenzhu2011/article/details/8750820 （转）

本文章将以如何实现 开始菜单上的tile 为主。

该控件代码经过测试可直接使用。

tile 在我的思路中分为了 3层。

基于ContentControl实现HeaderedContentControl 用于增加Tile种的内容标题

在HeaderedContentControl 的基础上 实现 3d变换 根据触点方向触发不同动画。

实现HubTileBase

在HubTileBase 下我们可以实现多种磁贴

如liveTile（实时反馈）  MosaicTile（仿wp8 风格） PulsingTile（脉冲）等等。。

以下将以PulsingTile 代码为主 来介绍

1. public class HeaderedContentControl : ContentControl
2. {
3. public static readonly DependencyProperty HeaderProperty =
4. DependencyProperty.Register("Header", typeof(object), typeof(HeaderedContentControl), new PropertyMetadata(null));
5. public static readonly DependencyProperty HeaderStyleProperty =
6. DependencyProperty.Register("HeaderStyle", typeof(Style), typeof(HeaderedContentControl), new PropertyMetadata(null));
7. public static readonly DependencyProperty HeaderTemplateProperty =
8. DependencyProperty.Register("HeaderTemplate", typeof(DataTemplate), typeof(HeaderedContentControl), new PropertyMetadata(null));
9. public static readonly DependencyProperty HeaderTemplateSelectorProperty =
10. DependencyProperty.Register("HeaderTemplateSelector", typeof(DataTemplateSelector), typeof(HeaderedContentControl), new PropertyMetadata(null));
11. public HeaderedContentControl()
12. {
13. this.DefaultStyleKey = typeof(HeaderedContentControl);
14. }
15. public object Header
16. {
17. get
18. {
19. return base.GetValue(HeaderProperty);
20. }
21. set
22. {
23. base.SetValue(HeaderProperty, value);
24. }
25. }
26. public Style HeaderStyle
27. {
28. get
29. {
30. return (Style)base.GetValue(HeaderStyleProperty);
31. }
32. set
33. {
34. base.SetValue(HeaderStyleProperty, value);
35. }
36. }
37. public DataTemplate HeaderTemplate
38. {
39. get
40. {
41. return (DataTemplate)base.GetValue(HeaderTemplateProperty);
42. }
43. set
44. {
45. base.SetValue(HeaderTemplateProperty, value);
46. }
47. }
48. public DataTemplateSelector HeaderTemplateSelector
49. {
50. get
51. {
52. return (DataTemplateSelector)base.GetValue(HeaderTemplateSelectorProperty);
53. }
54. set
55. {
56. base.SetValue(HeaderTemplateSelectorProperty, value);
57. }
58. }
59. }

1. public class HubTileBase : HeaderedContentControl
2. {
3. public static readonly DependencyProperty AccentBrushProperty = DependencyProperty.Register("AccentBrush", typeof(Brush), typeof(HubTileBase), new PropertyMetadata(null));
4. public static readonly DependencyProperty GroupNameProperty = DependencyProperty.Register("GroupName", typeof(string), typeof(HubTileBase), new PropertyMetadata(string.Empty));
5. public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(Windows.UI.Xaml.Media.ImageSource), typeof(HubTileBase), new PropertyMetadata(null));
6. public static readonly DependencyProperty IsFrozenProperty = DependencyProperty.Register("IsFrozen", typeof(bool), typeof(HubTileBase), new PropertyMetadata((bool)false, OnIsFrozenChanged));
7. public static readonly DependencyProperty OverrideDefaultStatesProperty = DependencyProperty.Register("OverrideDefaultStates", typeof(bool), typeof(HubTileBase), new PropertyMetadata((bool)false));
8. private PointerDirection pointerdirection;
9. private bool pointerover;
10. private bool pointerpressed;
11. public static readonly DependencyProperty RotationDepthProperty = DependencyProperty.Register("RotationDepth", typeof(double), typeof(HubTileBase), new PropertyMetadata((double)20.0));
12. public static readonly DependencyProperty ScaleDepthProperty = DependencyProperty.Register("ScaleDepth", typeof(double), typeof(HubTileBase), new PropertyMetadata((double)0.9));
13. private Storyboard storyboard;
14. public static readonly DependencyProperty TilePressDurationProperty = DependencyProperty.Register("TilePressDuration", typeof(TimeSpan), typeof(HubTileBase), new PropertyMetadata(TimeSpan.FromSeconds((double)0.1)));
15. public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(object), typeof(HubTileBase), new PropertyMetadata(null));
16. public static readonly DependencyProperty TitleStyleProperty = DependencyProperty.Register("TitleStyle", typeof(Style), typeof(HubTileBase), new PropertyMetadata(null));
17. private Timeline BuildAnimation(PointerDirection direction)
18. {
19. DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
20. Storyboard.SetTarget(frames, this);
21. if (direction != PointerDirection.Center)
22. {
23. PlaneProjection projection2 = new PlaneProjection();
24. projection2.CenterOfRotationZ = 0.0;
25. PlaneProjection projection = projection2;
26. EasingDoubleKeyFrame frame3 = new EasingDoubleKeyFrame();
27. frame3.KeyTime = ((KeyTime)TimeSpan.FromSeconds((double)0.0));
28. frame3.Value = 0.0;
29. EasingDoubleKeyFrame frame = frame3;
30. EasingDoubleKeyFrame frame4 = new EasingDoubleKeyFrame();
31. frame4.KeyTime = ((KeyTime)this.TilePressDuration);
32. EasingDoubleKeyFrame frame2 = frame4;
33. frames.KeyFrames.Add(frame);
34. frames.KeyFrames.Add(frame2);
35. if ((direction == PointerDirection.Left) || (direction == PointerDirection.Bottom))
36. {
37. frame2.Value = this.RotationDepth;
38. }
39. else if ((direction == PointerDirection.Top) || (direction == PointerDirection.Right))
40. {
41. frame2.Value = -this.RotationDepth;
42. }
43. if ((direction == PointerDirection.Top) || (direction == PointerDirection.Bottom))
44. {
45. Storyboard.SetTargetProperty(frames, "(UIElement.Projection).(PlaneProjection.RotationX)");
46. }
47. else if ((direction == PointerDirection.Left) || (direction == PointerDirection.Right))
48. {
49. Storyboard.SetTargetProperty(frames, "(UIElement.Projection).(PlaneProjection.RotationY)");
50. }
51. if (direction == PointerDirection.Bottom)
52. {
53. projection.CenterOfRotationX = 0.5;
54. projection.CenterOfRotationY = 0.0;
55. }
56. else if (direction == PointerDirection.Top)
57. {
58. projection.CenterOfRotationX = (0.5);
59. projection.CenterOfRotationY = (1.0);
60. }
61. else if (direction == PointerDirection.Left)
62. {
63. projection.CenterOfRotationX = (1.0);
64. projection.CenterOfRotationY = (0.5);
65. }
66. else if (direction == PointerDirection.Right)
67. {
68. projection.CenterOfRotationX = (0.0);
69. projection.CenterOfRotationY = (0.5);
70. }
71. base.Projection = (projection);
72. }
73. return frames;
74. }
75. private Timeline BuildScaleXAnimation()
76. {
77. DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
78. Storyboard.SetTarget(frames, this);
79. Storyboard.SetTargetProperty(frames, "(UIElement.RenderTransform).(CompositeTransform.ScaleX)");
80. EasingDoubleKeyFrame frame3 = new EasingDoubleKeyFrame();
81. frame3.KeyTime = ((KeyTime)TimeSpan.FromSeconds((double)0.0));
82. frame3.Value = (1.0);
83. EasingDoubleKeyFrame frame = frame3;
84. EasingDoubleKeyFrame frame4 = new EasingDoubleKeyFrame();
85. frame4.KeyTime = ((KeyTime)this.TilePressDuration);
86. frame4.Value = (this.ScaleDepth);
87. EasingDoubleKeyFrame frame2 = frame4;
88. frames.KeyFrames.Add(frame);
89. frames.KeyFrames.Add(frame2);
90. CompositeTransform transform = new CompositeTransform();
91. base.RenderTransformOrigin = (new Point(0.5, 0.5));
92. base.RenderTransform = (transform);
93. return frames;
94. }
95. private Timeline BuildScaleYAnimation()
96. {
97. DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
98. Storyboard.SetTarget(frames, this);
99. Storyboard.SetTargetProperty(frames, "(UIElement.RenderTransform).(CompositeTransform.ScaleY)");
100. EasingDoubleKeyFrame frame3 = new EasingDoubleKeyFrame();
101. frame3.KeyTime = ((KeyTime)TimeSpan.FromSeconds((double)0.0));
102. frame3.Value = (1.0);
103. EasingDoubleKeyFrame frame = frame3;
104. EasingDoubleKeyFrame frame4 = new EasingDoubleKeyFrame();
105. frame4.KeyTime = ((KeyTime)this.TilePressDuration);
106. frame4.Value = (this.ScaleDepth);
107. EasingDoubleKeyFrame frame2 = frame4;
108. frames.KeyFrames.Add(frame);
109. frames.KeyFrames.Add(frame2);
110. CompositeTransform transform = new CompositeTransform();
111. base.RenderTransform = (transform);
112. base.RenderTransformOrigin = (new Point(0.5, 0.5));
113. return frames;
114. }
115. private void ExecutePointerReleased()
116. {
117. if (this.pointerpressed)
118. {
119. if (this.OverrideDefaultStates)
120. {
121. if (this.pointerover)
122. {
123. VisualStateManager.GoToState(this, "PointerOver", true);
124. }
125. else
126. {
127. VisualStateManager.GoToState(this, "Normal", true);
128. }
129. }
130. else if (this.storyboard != null)
131. {
132. if (this.pointerdirection != PointerDirection.Center)
133. {
134. DoubleAnimationUsingKeyFrames frames = this.storyboard.Children[0] as DoubleAnimationUsingKeyFrames;
135. if (frames != null)
136. {
137. EasingDoubleKeyFrame frame = frames.KeyFrames[0] as EasingDoubleKeyFrame;
138. EasingDoubleKeyFrame frame2 = frames.KeyFrames[1] as EasingDoubleKeyFrame;
139. frame.Value = (frame2.Value);
140. frame2.Value = (0.0);
141. }
142. }
143. else
144. {
145. DoubleAnimationUsingKeyFrames frames2 = this.storyboard.Children[0] as DoubleAnimationUsingKeyFrames;
146. DoubleAnimationUsingKeyFrames frames3 = this.storyboard.Children[1] as DoubleAnimationUsingKeyFrames;
147. if (frames2 != null)
148. {
149. EasingDoubleKeyFrame frame3 = frames2.KeyFrames[0] as EasingDoubleKeyFrame;
150. EasingDoubleKeyFrame frame4 = frames2.KeyFrames[1] as EasingDoubleKeyFrame;
151. frame3.Value = (frame4.Value);
152. frame4.Value = (1.0);
153. }
154. if (frames3 != null)
155. {
156. EasingDoubleKeyFrame frame5 = frames3.KeyFrames[0] as EasingDoubleKeyFrame;
157. EasingDoubleKeyFrame frame6 = frames3.KeyFrames[1] as EasingDoubleKeyFrame;
158. frame5.Value = (frame6.Value);
159. frame6.Value = (1.0);
160. }
161. }
162. this.storyboard.Begin();
163. }
164. }
165. this.pointerpressed = false;
166. }
167. protected virtual void OnIsFrozenChanged(DependencyPropertyChangedEventArgs e)
168. {
169. }
170. private static void OnIsFrozenChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
171. {
172. HubTileBase base2 = sender as HubTileBase;
173. if (base2 != null)
174. {
175. base2.OnIsFrozenChanged(e);
176. }
177. }
178. protected override void OnPointerEntered(PointerRoutedEventArgs e)
179. {
180. this.pointerover = true;
181. VisualStateManager.GoToState(this, "PointerOver", true);
182. base.OnPointerEntered(e);
183. }
184. protected override void OnPointerExited(PointerRoutedEventArgs e)
185. {
186. if (this.pointerpressed)
187. {
188. this.ExecutePointerReleased();
189. }
190. this.pointerover = false;
191. VisualStateManager.GoToState(this, "Normal", true);
192. base.OnPointerExited(e);
193. }
194. protected override void OnPointerPressed(PointerRoutedEventArgs e)
195. {
196. this.pointerpressed = true;
197. if (this.OverrideDefaultStates)
198. {
199. VisualStateManager.GoToState(this, "PointerPressed", true);
200. }
201. else
202. {
203. PointerPoint currentpoint = e.GetCurrentPoint(this);
204. var point = currentpoint.Position;
205. double num = base.ActualWidth / 3.0;
206. double num2 = base.ActualHeight / 3.0;
207. Dictionary<PointerDirection, Rect> pieces = new Dictionary<PointerDirection, Rect>();
208. pieces.Add(PointerDirection.TopLeft, new Rect(0.0, 0.0, num, num2));
209. pieces.Add(PointerDirection.Top, new Rect(num, 0.0, num, num2));
210. pieces.Add(PointerDirection.TopRight, new Rect(num * 2.0, 0.0, num, num2));
211. pieces.Add(PointerDirection.Left, new Rect(0.0, num2, num, num2));
212. pieces.Add(PointerDirection.Center, new Rect(num, num2, num, num2));
213. pieces.Add(PointerDirection.Right, new Rect(num * 2.0, num2, num, num2));
214. pieces.Add(PointerDirection.BottomLeft, new Rect(0.0, num2 * 2.0, num, num2));
215. pieces.Add(PointerDirection.Bottom, new Rect(num, num2 * 2.0, num, num2));
216. pieces.Add(PointerDirection.BottomRight, new Rect(num * 2.0, num2 * 2.0, num, num2));
217. this.pointerdirection =
218. (from _direction in pieces.Keys
219. where pieces[_direction].Contains(point)
220. select _direction).FirstOrDefault();
221. this.storyboard = new Storyboard();
222. if (this.pointerdirection <= PointerDirection.Center)
223. {
224. if (this.pointerdirection == PointerDirection.Center)
225. {
226. Timeline timeline = this.BuildScaleXAnimation();
227. Timeline timeline2 = this.BuildScaleYAnimation();
228. this.storyboard.Children.Add(timeline);
229. this.storyboard.Children.Add(timeline2);
230. this.storyboard.Begin();
231. }
232. else
233. {
234. Timeline timeline3 = this.BuildAnimation(this.pointerdirection);
235. this.storyboard.Children.Add(timeline3);
236. this.storyboard.Begin();
237. }
238. }
239. else if (this.pointerdirection == PointerDirection.TopLeft)
240. {
241. if (currentpoint.Position.X > currentpoint.Position.Y)
242. {
243. Timeline timeline4 = this.BuildAnimation(PointerDirection.Top);
244. this.storyboard.Children.Add(timeline4);
245. this.storyboard.Begin();
246. }
247. else
248. {
249. Timeline timeline5 = this.BuildAnimation(PointerDirection.Left);
250. this.storyboard.Children.Add(timeline5);
251. this.storyboard.Begin();
252. }
253. }
254. else if (this.pointerdirection == PointerDirection.TopRight)
255. {
256. if (currentpoint.Position.Y > (num2 - (currentpoint.Position.X - (num * 2.0))))
257. {
258. Timeline timeline6 = this.BuildAnimation(PointerDirection.Right);
259. this.storyboard.Children.Add(timeline6);
260. this.storyboard.Begin();
261. }
262. else
263. {
264. Timeline timeline7 = this.BuildAnimation(PointerDirection.Top);
265. this.storyboard.Children.Add(timeline7);
266. this.storyboard.Begin();
267. }
268. }
269. else if (this.pointerdirection == PointerDirection.BottomLeft)
270. {
271. if ((currentpoint.Position.Y - (num2 * 2.0)) > (num2 - currentpoint.Position.X))
272. {
273. Timeline timeline8 = this.BuildAnimation(PointerDirection.Bottom);
274. this.storyboard.Children.Add(timeline8);
275. this.storyboard.Begin();
276. }
277. else
278. {
279. Timeline timeline9 = this.BuildAnimation(PointerDirection.Left);
280. this.storyboard.Children.Add(timeline9);
281. this.storyboard.Begin();
282. }
283. }
284. else if (currentpoint.Position.X > currentpoint.Position.Y)
285. {
286. Timeline timeline10 = this.BuildAnimation(PointerDirection.Right);
287. this.storyboard.Children.Add(timeline10);
288. this.storyboard.Begin();
289. }
290. else
291. {
292. Timeline timeline11 = this.BuildAnimation(PointerDirection.Bottom);
293. this.storyboard.Children.Add(timeline11);
294. this.storyboard.Begin();
295. }
296. }
297. base.OnPointerPressed(e);
298. }
299. protected override void OnPointerReleased(PointerRoutedEventArgs e)
300. {
301. this.ExecutePointerReleased();
302. base.OnPointerReleased(e);
303. }
304. public Brush AccentBrush
305. {
306. get
307. {
308. return (Brush)base.GetValue(AccentBrushProperty);
309. }
310. set
311. {
312. base.SetValue(AccentBrushProperty, value);
313. }
314. }
315. public string GroupName
316. {
317. get
318. {
319. return (string)((string)base.GetValue(GroupNameProperty));
320. }
321. set
322. {
323. base.SetValue(GroupNameProperty, value);
324. }
325. }
326. public Windows.UI.Xaml.Media.ImageSource ImageSource
327. {
328. get
329. {
330. return (Windows.UI.Xaml.Media.ImageSource)base.GetValue(ImageSourceProperty);
331. }
332. set
333. {
334. base.SetValue(ImageSourceProperty, value);
335. }
336. }
337. public bool IsFrozen
338. {
339. get
340. {
341. return (bool)((bool)base.GetValue(IsFrozenProperty));
342. }
343. set
344. {
345. base.SetValue(IsFrozenProperty, (bool)value);
346. }
347. }
348. public bool OverrideDefaultStates
349. {
350. get
351. {
352. return (bool)((bool)base.GetValue(OverrideDefaultStatesProperty));
353. }
354. set
355. {
356. base.SetValue(OverrideDefaultStatesProperty, (bool)value);
357. }
358. }
359. public double RotationDepth
360. {
361. get
362. {
363. return (double)((double)base.GetValue(RotationDepthProperty));
364. }
365. set
366. {
367. base.SetValue(RotationDepthProperty, (double)value);
368. }
369. }
370. public double ScaleDepth
371. {
372. get
373. {
374. return (double)((double)base.GetValue(ScaleDepthProperty));
375. }
376. set
377. {
378. base.SetValue(ScaleDepthProperty, (double)value);
379. }
380. }
381. public TimeSpan TilePressDuration
382. {
383. get
384. {
385. return (TimeSpan)base.GetValue(TilePressDurationProperty);
386. }
387. set
388. {
389. base.SetValue(TilePressDurationProperty, value);
390. }
391. }
392. public object Title
393. {
394. get
395. {
396. return base.GetValue(TitleProperty);
397. }
398. set
399. {
400. base.SetValue(TitleProperty, value);
401. }
402. }
403. public Style TitleStyle
404. {
405. get
406. {
407. return (Style)base.GetValue(TitleStyleProperty);
408. }
409. set
410. {
411. base.SetValue(TitleStyleProperty, value);
412. }
413. }
414. }

1. public static class HubTileService
2. {
3. private static List<WeakReference> Tiles = new List<WeakReference>();
4. internal static void Dequeue(HubTileBase tile)
5. {
6. foreach (WeakReference reference in Tiles)
7. {
8. if (reference.Target == tile)
9. {
10. Tiles.Remove(reference);
11. break;
12. }
13. }
14. }
15. internal static void Enqueue(HubTileBase tile)
16. {
17. WeakReference reference = new WeakReference(tile, false);
18. Tiles.Add(reference);
19. }
20. public static void Freeze(HubTileBase tile)
21. {
22. foreach (WeakReference reference in Tiles)
23. {
24. if (reference.Target == tile)
25. {
26. HubTileBase base2 = reference.Target as HubTileBase;
27. base2.IsFrozen = true;
28. break;
29. }
30. }
31. }
32. public static void Freeze(string groupname)
33. {
34. using (List<WeakReference>.Enumerator enumerator = Tiles.GetEnumerator())
35. {
36. while (enumerator.MoveNext())
37. {
38. HubTileBase base2 = enumerator.Current.Target as HubTileBase;
39. if ((base2 != null) && (base2.GroupName == groupname))
40. {
41. base2.IsFrozen = false;
42. }
43. }
44. }
45. }
46. public static void UnFreeze(HubTileBase tile)
47. {
48. foreach (WeakReference reference in Tiles)
49. {
50. if (reference.Target == tile)
51. {
52. HubTileBase base2 = reference.Target as HubTileBase;
53. base2.IsFrozen = false;
54. break;
55. }
56. }
57. }
58. public static void UnFreeze(string groupname)
59. {
60. using (List<WeakReference>.Enumerator enumerator = Tiles.GetEnumerator())
61. {
62. while (enumerator.MoveNext())
63. {
64. HubTileBase base2 = enumerator.Current.Target as HubTileBase;
65. if ((base2 != null) && (base2.GroupName == groupname))
66. {
67. base2.IsFrozen = false;
68. }
69. }
70. }
71. }
72. }

1. public enum PointerDirection
2. {
3. Left,
4. Top,
5. Right,
6. Bottom,
7. Center,
8. TopLeft,
9. TopRight,
10. BottomLeft,
11. BottomRight
12. }

1. public class PulsingTile : HubTileBase
2. {
3. protected ContentPresenter PART_Content;
4. public static readonly DependencyProperty PulseDurationProperty = DependencyProperty.Register("PulseDuration", typeof(TimeSpan), typeof(PulsingTile), new PropertyMetadata(TimeSpan.FromSeconds((double)4.0), new PropertyChangedCallback(OnValueChanged)));
5. public static readonly DependencyProperty PulseScaleProperty = DependencyProperty.Register("PulseScale", typeof(double), typeof(PulsingTile), new PropertyMetadata((double)1.0, new PropertyChangedCallback(OnValueChanged)));
6. private Storyboard pulseStroyboard;
7. public static readonly DependencyProperty RadiusXProperty = DependencyProperty.Register("RadiusX", typeof(double), typeof(PulsingTile), new PropertyMetadata((double)0.0, new PropertyChangedCallback(OnValueChanged)));
8. public static readonly DependencyProperty RadiusYProperty = DependencyProperty.Register("RadiusY", typeof(double), typeof(PulsingTile), new PropertyMetadata((double)0.0, new PropertyChangedCallback(OnValueChanged)));
9. private Storyboard roatationStroyboard;
10. public static readonly DependencyProperty TranslateDurationProperty = DependencyProperty.Register("TranslateDuration", typeof(TimeSpan), typeof(PulsingTile), new PropertyMetadata(TimeSpan.FromSeconds((double)4.0), new PropertyChangedCallback(OnValueChanged)));
11. public PulsingTile()
12. {
13. base.DefaultStyleKey = (typeof(PulsingTile));
14. PulsingTile tile = this;
15. this.Loaded += this.OnLoaded;
16. }
17. private void AnimateContent()
18. {
19. if (this.PART_Content != null)
20. {
21. RectangleGeometry geometry = new RectangleGeometry();
22. geometry.Rect = (new Rect(0.0, 0.0, base.ActualWidth, base.ActualHeight));
23. base.Clip = (geometry);
24. this.PART_Content.RenderTransform = (new CompositeTransform());
25. this.PART_Content.RenderTransformOrigin = (new Point(0.5, 0.5));
26. this.PART_Content.Visibility = Windows.UI.Xaml.Visibility.Visible;
27. DoubleAnimationUsingKeyFrames frames = this.BuildXTimeLine(this.RadiusX, this.RadiusY);
28. DoubleAnimationUsingKeyFrames frames2 = this.BuildYTimeLine(this.RadiusX, this.RadiusY);
29. this.roatationStroyboard = new Storyboard();
30. RepeatBehavior behavior = new RepeatBehavior();
31. behavior.Type = (RepeatBehaviorType.Forever);
32. this.roatationStroyboard.RepeatBehavior = (behavior);
33. this.roatationStroyboard.Children.Add(frames);
34. this.roatationStroyboard.Children.Add(frames2);
35. Storyboard.SetTarget(frames, this.PART_Content);
36. Storyboard.SetTarget(frames2, this.PART_Content);
37. Storyboard.SetTargetProperty(frames, "(UIElement.RenderTransform).(CompositeTransform.TranslateX)");
38. Storyboard.SetTargetProperty(frames2, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
39. DoubleAnimationUsingKeyFrames frames3 = this.BuildPulseXTimeLine(this.PulseScale);
40. DoubleAnimationUsingKeyFrames frames4 = this.BuildPulseYTimeLine(this.PulseScale);
41. this.pulseStroyboard = new Storyboard();
42. this.pulseStroyboard.AutoReverse = (true);
43. this.pulseStroyboard.SpeedRatio = (0.4);
44. RepeatBehavior behavior2 = new RepeatBehavior();
45. behavior2.Type = (RepeatBehaviorType.Forever);
46. this.pulseStroyboard.RepeatBehavior = (behavior2);
47. this.pulseStroyboard.Children.Add(frames3);
48. this.pulseStroyboard.Children.Add(frames4);
49. Storyboard.SetTarget(frames3, this.PART_Content);
50. Storyboard.SetTarget(frames4, this.PART_Content);
51. Storyboard.SetTargetProperty(frames3, "(UIElement.RenderTransform).(CompositeTransform.ScaleX)");
52. Storyboard.SetTargetProperty(frames4, "(UIElement.RenderTransform).(CompositeTransform.ScaleY)");
53. this.pulseStroyboard.Begin();
54. this.roatationStroyboard.Begin();
55. }
56. }
57. private DoubleAnimationUsingKeyFrames BuildPulseXTimeLine(double pulseScale)
58. {
59. TimeSpan pulseDuration = this.PulseDuration;
60. SplineDoubleKeyFrame frame = new SplineDoubleKeyFrame();
61. frame.Value = (1.0);
62. frame.KeyTime = ((KeyTime)TimeSpan.FromSeconds((double)0.0));
63. EasingDoubleKeyFrame frame2 = new EasingDoubleKeyFrame();
64. frame2.Value = (pulseScale);
65. frame2.KeyTime = (KeyTime.FromTimeSpan(this.PulseDuration));
66. SineEase ease = new SineEase();
67. ease.EasingMode = EasingMode.EaseOut;
68. frame2.EasingFunction = (ease);
69. DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
70. frames.KeyFrames.Add(frame);
71. frames.KeyFrames.Add(frame2);
72. return frames;
73. }
74. private DoubleAnimationUsingKeyFrames BuildPulseYTimeLine(double pulseScale)
75. {
76. TimeSpan pulseDuration = this.PulseDuration;
77. SplineDoubleKeyFrame frame = new SplineDoubleKeyFrame();
78. frame.Value = (1.0);
79. frame.KeyTime = ((KeyTime)TimeSpan.FromSeconds((double)0.0));
80. EasingDoubleKeyFrame frame2 = new EasingDoubleKeyFrame();
81. frame2.Value = (pulseScale);
82. frame2.KeyTime = (KeyTime.FromTimeSpan(this.PulseDuration));
83. SineEase ease = new SineEase();
84. ease.EasingMode = EasingMode.EaseOut;
85. frame2.EasingFunction = (ease);
86. DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
87. frames.KeyFrames.Add(frame);
88. frames.KeyFrames.Add(frame2);
89. return frames;
90. }
91. private DoubleAnimationUsingKeyFrames BuildXTimeLine(double radiusx, double radiusy)
92. {
93. TimeSpan translateDuration = this.TranslateDuration;
94. DiscreteDoubleKeyFrame frame = new DiscreteDoubleKeyFrame();
95. frame.Value = (0.0);
96. frame.KeyTime = ((KeyTime)TimeSpan.FromSeconds((double)0.0));
97. EasingDoubleKeyFrame frame2 = new EasingDoubleKeyFrame();
98. frame2.Value = (radiusx);
99. frame2.KeyTime = (KeyTime.FromTimeSpan(TimeSpan.FromSeconds((double)(translateDuration.TotalSeconds / 4.0))));
100. SineEase ease = new SineEase();
101. ease.EasingMode = EasingMode.EaseIn;
102. frame2.EasingFunction = (ease);
103. EasingDoubleKeyFrame frame3 = new EasingDoubleKeyFrame();
104. frame3.Value = (0.0);
105. frame3.KeyTime = (KeyTime.FromTimeSpan(TimeSpan.FromSeconds((double)(translateDuration.TotalSeconds / 2.0))));
106. SineEase ease2 = new SineEase();
107. ease2.EasingMode = EasingMode.EaseInOut;
108. frame3.EasingFunction = ease2;
109. EasingDoubleKeyFrame frame4 = new EasingDoubleKeyFrame();
110. frame4.Value = (-radiusx);
111. frame4.KeyTime = (KeyTime.FromTimeSpan(TimeSpan.FromSeconds((double)((translateDuration.TotalSeconds * 3.0) / 4.0))));
112. SineEase ease3 = new SineEase();
113. ease3.EasingMode = EasingMode.EaseIn;
114. frame4.EasingFunction = (ease3);
115. EasingDoubleKeyFrame frame5 = new EasingDoubleKeyFrame();
116. frame5.Value = (0.0);
117. frame5.KeyTime = (KeyTime.FromTimeSpan(translateDuration));
118. SineEase ease4 = new SineEase();
119. ease4.EasingMode = EasingMode.EaseInOut;
120. frame5.EasingFunction = (ease4);
121. DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
122. frames.KeyFrames.Add(frame);
123. frames.KeyFrames.Add(frame2);
124. frames.KeyFrames.Add(frame3);
125. frames.KeyFrames.Add(frame4);
126. frames.KeyFrames.Add(frame5);
127. return frames;
128. }
129. private DoubleAnimationUsingKeyFrames BuildYTimeLine(double radiusx, double radiusy)
130. {
131. TimeSpan translateDuration = this.TranslateDuration;
132. DiscreteDoubleKeyFrame frame = new DiscreteDoubleKeyFrame();
133. frame.Value = (0.0);
134. frame.KeyTime = ((KeyTime)TimeSpan.FromSeconds((double)0.0));
135. EasingDoubleKeyFrame frame2 = new EasingDoubleKeyFrame();
136. frame2.Value = (this.RadiusY);
137. frame2.KeyTime = (KeyTime.FromTimeSpan(TimeSpan.FromSeconds((double)(translateDuration.TotalSeconds / 4.0))));
138. SineEase ease = new SineEase();
139. ease.EasingMode = EasingMode.EaseIn;
140. frame2.EasingFunction = (ease);
141. EasingDoubleKeyFrame frame3 = new EasingDoubleKeyFrame();
142. frame3.Value = (2.0 * this.RadiusY);
143. frame3.KeyTime = (KeyTime.FromTimeSpan(TimeSpan.FromSeconds((double)(translateDuration.TotalSeconds / 2.0))));
144. SineEase ease2 = new SineEase();
145. ease2.EasingMode = EasingMode.EaseIn;
146. frame3.EasingFunction = (ease2);
147. EasingDoubleKeyFrame frame4 = new EasingDoubleKeyFrame();
148. frame4.Value = (radiusy);
149. frame4.KeyTime = (KeyTime.FromTimeSpan(TimeSpan.FromSeconds((double)((translateDuration.TotalSeconds * 3.0) / 4.0))));
150. SineEase ease3 = new SineEase();
151. ease3.EasingMode = EasingMode.EaseInOut;
152. frame4.EasingFunction = (ease3);
153. EasingDoubleKeyFrame frame5 = new EasingDoubleKeyFrame();
154. frame5.Value = (0.0);
155. frame5.KeyTime = (KeyTime.FromTimeSpan(translateDuration));
156. SineEase ease4 = new SineEase();
157. ease4.EasingMode = EasingMode.EaseIn;
158. frame5.EasingFunction = (ease4);
159. DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
160. frames.KeyFrames.Add(frame);
161. frames.KeyFrames.Add(frame2);
162. frames.KeyFrames.Add(frame3);
163. frames.KeyFrames.Add(frame4);
164. frames.KeyFrames.Add(frame5);
165. return frames;
166. }
167. protected override void OnApplyTemplate()
168. {
169. base.OnApplyTemplate();
170. this.PART_Content = base.GetTemplateChild("PART_Content") as ContentPresenter;
171. }
172. protected override void OnIsFrozenChanged(DependencyPropertyChangedEventArgs e)
173. {
174. if (base.IsFrozen)
175. {
176. if (this.pulseStroyboard != null)
177. {
178. this.pulseStroyboard.Stop();
179. }
180. if (this.roatationStroyboard != null)
181. {
182. this.roatationStroyboard.Stop();
183. }
184. }
185. else
186. {
187. if (this.pulseStroyboard != null)
188. {
189. this.pulseStroyboard.Begin();
190. }
191. if (this.roatationStroyboard != null)
192. {
193. this.roatationStroyboard.Begin();
194. }
195. }
196. }
197. private void OnLoaded(object sender, RoutedEventArgs e)
198. {
199. HubTileService.Enqueue(this);
200. PulsingTile tile = this;
201. this.Loaded += PulsingTile_Unloaded;
202. this.StartAnimation();
203. }
204. private static void OnValueChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
205. {
206. PulsingTile tile = sender as PulsingTile;
207. if (tile != null)
208. {
209. tile.StopAnimation();
210. tile.StartAnimation();
211. }
212. }
213. private void PulsingTile_Unloaded(object sender, RoutedEventArgs e)
214. {
215. HubTileService.Dequeue(this);
216. this.Unloaded -= PulsingTile_Unloaded;
217. }
218. private void StartAnimation()
219. {
220. this.AnimateContent();
221. }
222. private void StopAnimation()
223. {
224. if (this.pulseStroyboard != null)
225. {
226. this.pulseStroyboard.Stop();
227. }
228. if (this.roatationStroyboard != null)
229. {
230. this.roatationStroyboard.Stop();
231. }
232. }
233. public TimeSpan PulseDuration
234. {
235. get
236. {
237. return (TimeSpan)base.GetValue(PulseDurationProperty);
238. }
239. set
240. {
241. base.SetValue(PulseDurationProperty, value);
242. }
243. }
244. public double PulseScale
245. {
246. get
247. {
248. return (double)((double)base.GetValue(PulseScaleProperty));
249. }
250. set
251. {
252. base.SetValue(PulseScaleProperty, (double)value);
253. }
254. }
255. public double RadiusX
256. {
257. get
258. {
259. return (double)((double)base.GetValue(RadiusXProperty));
260. }
261. set
262. {
263. base.SetValue(RadiusXProperty, (double)value);
264. }
265. }
266. public double RadiusY
267. {
268. get
269. {
270. return (double)((double)base.GetValue(RadiusYProperty));
271. }
272. set
273. {
274. base.SetValue(RadiusYProperty, (double)value);
275. }
276. }
277. public TimeSpan TranslateDuration
278. {
279. get
280. {
281. return (TimeSpan)base.GetValue(TranslateDurationProperty);
282. }
283. set
284. {
285. base.SetValue(TranslateDurationProperty, value);
286. }
287. }
288. }

1. <ResourceDictionary
2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4. xmlns:PulsingTile="using:WinRTXamlToolkit.Controls">
5. <SolidColorBrush x:Key="AccentBrush" Color="#FF1FAEFF" />
6. <DataTemplate x:Key="ImageTileContentTemplate">
7. <Grid>
8. <Rectangle Fill="{Binding Background}"/>
9. <Rectangle Fill="White" Opacity="{Binding Opacity}"/>
10. <Image Source="{Binding Image}" Width="{Binding ImageWidth}" Height="{Binding ImageHeight}"
11. HorizontalAlignment="{Binding HorizontalImageAlignment}"
12. VerticalAlignment="{Binding VerticalImageAlignment}" Stretch="UniformToFill"/>
13. </Grid>
14. </DataTemplate>
15. <Style TargetType="ContentControl" x:Key="DefaultHeaderStyle">
16. <Setter Property="HorizontalAlignment" Value="Left"/>
17. <Setter Property="VerticalAlignment" Value="Bottom"/>
18. <Setter Property="Margin" Value="10 5"/>
19. <Setter Property="FontSize" Value="18"/>
20. </Style>
21. <Style TargetType="ContentControl" x:Key="DefaultTitleStyle">
22. <Setter Property="HorizontalAlignment" Value="Stretch"/>
23. <Setter Property="VerticalAlignment" Value="Top"/>
24. <Setter Property="Margin" Value="5"/>
25. <Setter Property="FontSize" Value="10"/>
26. </Style>
27. <Style TargetType="PulsingTile:PulsingTile" >
28. <Setter Property="Padding" Value="3"/>
29. <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
30. <Setter Property="VerticalContentAlignment" Value="Stretch"/>
31. <Setter Property="HeaderStyle" Value="{StaticResource DefaultHeaderStyle}"/>
32. <Setter Property="TitleStyle" Value="{StaticResource DefaultTitleStyle}"/>
33. <Setter Property="Template">
34. <Setter.Value>
35. <ControlTemplate TargetType="PulsingTile:PulsingTile">
36. <Grid x:Name="PART_Layout">
37. <VisualStateManager.VisualStateGroups>
38. <VisualStateGroup x:Name="CommonStates">
39. <VisualState x:Name="Normal"/>
40. <VisualState x:Name="PointerOver">
41. <Storyboard>
42. <DoubleAnimation Duration="0" To="0.28"
43. Storyboard.TargetProperty="Opacity"
44. Storyboard.TargetName="PointerOveRect"/>
45. </Storyboard>
46. </VisualState>
47. <VisualState x:Name="PointerPressed">
48. </VisualState>
49. </VisualStateGroup>
50. </VisualStateManager.VisualStateGroups>
51. <Rectangle x:Name="PointerOveRect"
52. Fill="{StaticResource ApplicationForegroundThemeBrush}"
53. Opacity="0" Margin="-2"/>
54. <Border BorderBrush="{TemplateBinding BorderBrush}"
55. BorderThickness="{TemplateBinding BorderThickness}"
56. Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}"
57. x:Name="PART_Border">
58. <Grid Margin="{TemplateBinding Padding}" >
59. <ContentPresenter
60. x:Name="PART_Content"
61. HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
62. VerticalAlignment="{TemplateBinding VerticalAlignment}" />
63. <ContentControl Content="{TemplateBinding Title}"
64. Style="{TemplateBinding TitleStyle}"/>
65. <ContentControl Content="{TemplateBinding Header}"
66. Style="{TemplateBinding HeaderStyle}"
67. ContentTemplate="{TemplateBinding HeaderTemplate}"
68. ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
69. />
70. </Grid>
71. </Border>
72. </Grid>
73. </ControlTemplate>
74. </Setter.Value>
75. </Setter>
76. </Style>
77. </ResourceDictionary>

以上是主体代码。可以将其复制到项目中编译后可用。

使用方式：

1. <tools:PulsingTile
2. HorizontalAlignment="Stretch"
3. Width="423423"
4. Height="43423"
5. d:DesignWidth="200"
6. d:DesignHeight="200"
7. Foreground="White"
8. RadiusX="0"
9. RadiusY="0"
10. Title="123123123123"
11. PulseDuration="0:0:5"
12. PulseScale="2"
13. VerticalAlignment="Stretch">
14. <Image Source="XXXXXXXXXXXXXXXXX"></Image>
15. </tools:PulsingTile>

最终效果：  该磁贴会根据 时间 放大倍数 等参数 定时脉冲缩放