步骤1：添加类：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
|
/* Copyright (c) 2010 Microsoft Corporation. All rights reserved.
Use of this sample source code is subject to the terms of the Microsoft license
agreement under which you licensed this sample source code and is provided AS-IS.
If you did not accept the terms of the license agreement, you are not authorized
to use this sample source code. For the terms of the license, please see the
license agreement between you and Microsoft.
*/using
System;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Collections.Generic;
using
System.Windows.Controls.Primitives;
#if WINDOWS_PHONEusing
Microsoft.Phone.Controls;
#endifnamespace
PixelDesktopApp
{ /// <summary>
/// This code provides attached properties for adding a ‘tilt‘ effect to all controls within a container.
/// </summary>
public
class TiltEffect : DependencyObject
{
#region Constructor and Static Constructor
/// <summary>
/// This is not a constructable class, but it cannot be static because it derives from DependencyObject.
/// </summary>
private
TiltEffect()
{
}
/// <summary>
/// Initialize the static properties
/// </summary>
static
TiltEffect()
{
// The tiltable items list.
TiltableItems = new
List<Type>() { typeof(ButtonBase), typeof(ListBoxItem), };
UseLogarithmicEase = false;
}
#endregion
#region Fields and simple properties
// These constants are the same as the built-in effects
/// <summary>
/// Maximum amount of tilt, in radians
/// </summary>
const
double MaxAngle = 0.3;
/// <summary>
/// Maximum amount of depression, in pixels
/// </summary>
const
double MaxDepression = 25;
/// <summary>
/// Delay between releasing an element and the tilt release animation playing
/// </summary>
static
readonly TimeSpan TiltReturnAnimationDelay = TimeSpan.FromMilliseconds(200);
/// <summary>
/// Duration of tilt release animation
/// </summary>
static
readonly TimeSpan TiltReturnAnimationDuration = TimeSpan.FromMilliseconds(100);
/// <summary>
/// The control that is currently being tilted
/// </summary>
static
FrameworkElement currentTiltElement;
/// <summary>
/// The single instance of a storyboard used for all tilts
/// </summary>
static
Storyboard tiltReturnStoryboard;
/// <summary>
/// The single instance of an X rotation used for all tilts
/// </summary>
static
DoubleAnimation tiltReturnXAnimation;
/// <summary>
/// The single instance of a Y rotation used for all tilts
/// </summary>
static
DoubleAnimation tiltReturnYAnimation;
/// <summary>
/// The single instance of a Z depression used for all tilts
/// </summary>
static
DoubleAnimation tiltReturnZAnimation;
/// <summary>
/// The center of the tilt element
/// </summary>
static
Point currentTiltElementCenter;
/// <summary>
/// Whether the animation just completed was for a ‘pause‘ or not
/// </summary>
static
bool wasPauseAnimation = false;
/// <summary>
/// Whether to use a slightly more accurate (but slightly slower) tilt animation easing function
/// </summary>
public
static bool UseLogarithmicEase { get; set; }
/// <summary>
/// Default list of items that are tiltable
/// </summary>
public
static List<Type> TiltableItems { get; private
set; }
#endregion
#region Dependency properties
/// <summary>
/// Whether the tilt effect is enabled on a container (and all its children)
/// </summary>
public
static readonly DependencyProperty IsTiltEnabledProperty = DependencyProperty.RegisterAttached(
"IsTiltEnabled",
typeof(bool),
typeof(TiltEffect),
new
PropertyMetadata(OnIsTiltEnabledChanged)
);
/// <summary>
/// Gets the IsTiltEnabled dependency property from an object
/// </summary>
/// <param name="source">The object to get the property from</param>
/// <returns>The property‘s value</returns>
public
static bool GetIsTiltEnabled(DependencyObject source) { return
(bool)source.GetValue(IsTiltEnabledProperty); }
/// <summary>
/// Sets the IsTiltEnabled dependency property on an object
/// </summary>
/// <param name="source">The object to set the property on</param>
/// <param name="value">The value to set</param>
public
static void SetIsTiltEnabled(DependencyObject source, bool
value) { source.SetValue(IsTiltEnabledProperty, value); }
/// <summary>
/// Suppresses the tilt effect on a single control that would otherwise be tilted
/// </summary>
public
static readonly DependencyProperty SuppressTiltProperty = DependencyProperty.RegisterAttached(
"SuppressTilt",
typeof(bool),
typeof(TiltEffect),
null
);
/// <summary>
/// Gets the SuppressTilt dependency property from an object
/// </summary>
/// <param name="source">The object to get the property from</param>
/// <returns>The property‘s value</returns>
public
static bool GetSuppressTilt(DependencyObject source) { return
(bool)source.GetValue(SuppressTiltProperty); }
/// <summary>
/// Sets the SuppressTilt dependency property from an object
/// </summary>
/// <param name="source">The object to get the property from</param>
/// <returns>The property‘s value</returns>
public
static void SetSuppressTilt(DependencyObject source, bool
value) { source.SetValue(SuppressTiltProperty, value); }
/// <summary>
/// Property change handler for the IsTiltEnabled dependency property
/// </summary>
/// <param name="target">The element that the property is atteched to</param>
/// <param name="args">Event args</param>
/// <remarks>
/// Adds or removes event handlers from the element that has been (un)registered for tilting
/// </remarks>
static
void OnIsTiltEnabledChanged(DependencyObject target, DependencyPropertyChangedEventArgs args)
{
if
(target is
FrameworkElement)
{
// Add / remove the event handler if necessary
if
((bool)args.NewValue == true)
{
(target as
FrameworkElement).ManipulationStarted += TiltEffect_ManipulationStarted;
}
else
{
(target as
FrameworkElement).ManipulationStarted -= TiltEffect_ManipulationStarted;
}
}
}
#endregion
#region Top-level manipulation event handlers
/// <summary>
/// Event handler for ManipulationStarted
/// </summary>
/// <param name="sender">sender of the event - this will be the tilt container (eg, entire page)</param>
/// <param name="e">event args</param>
static
void TiltEffect_ManipulationStarted(object
sender, ManipulationStartedEventArgs e)
{
TryStartTiltEffect(sender as
FrameworkElement, e);
}
/// <summary>
/// Event handler for ManipulationDelta
/// </summary>
/// <param name="sender">sender of the event - this will be the tilting object (eg a button)</param>
/// <param name="e">event args</param>
static
void TiltEffect_ManipulationDelta(object
sender, ManipulationDeltaEventArgs e)
{
ContinueTiltEffect(sender as
FrameworkElement, e);
}
/// <summary>
/// Event handler for ManipulationCompleted
/// </summary>
/// <param name="sender">sender of the event - this will be the tilting object (eg a button)</param>
/// <param name="e">event args</param>
static
void TiltEffect_ManipulationCompleted(object
sender, ManipulationCompletedEventArgs e)
{
EndTiltEffect(currentTiltElement);
}
#endregion
#region Core tilt logic
/// <summary>
/// Checks if the manipulation should cause a tilt, and if so starts the tilt effect
/// </summary>
/// <param name="source">The source of the manipulation (the tilt container, eg entire page)</param>
/// <param name="e">The args from the ManipulationStarted event</param>
static
void TryStartTiltEffect(FrameworkElement source, ManipulationStartedEventArgs e)
{
foreach
(FrameworkElement ancestor in
(e.OriginalSource as
FrameworkElement).GetVisualAncestors())
{
foreach
(Type t in
TiltableItems)
{
if
(t.IsAssignableFrom(ancestor.GetType()))
{
if
((bool)ancestor.GetValue(SuppressTiltProperty) != true)
{
// Use first child of the control, so that you can add transforms and not
// impact any transforms on the control itself
FrameworkElement element = VisualTreeHelper.GetChild(ancestor, 0) as
FrameworkElement;
FrameworkElement container = e.ManipulationContainer as
FrameworkElement;
if
(element == null
|| container == null)
return;
// Touch point relative to the element being tilted
Point tiltTouchPoint = container.TransformToVisual(element).Transform(e.ManipulationOrigin);
// Center of the element being tilted
Point elementCenter = new
Point(element.ActualWidth / 2, element.ActualHeight / 2);
// Camera adjustment
Point centerToCenterDelta = GetCenterToCenterDelta(element, source);
BeginTiltEffect(element, tiltTouchPoint, elementCenter, centerToCenterDelta);
return;
}
}
}
}
}
/// <summary>
/// Computes the delta between the centre of an element and its container
/// </summary>
/// <param name="element">The element to compare</param>
/// <param name="container">The element to compare against</param>
/// <returns>A point that represents the delta between the two centers</returns>
static
Point GetCenterToCenterDelta(FrameworkElement element, FrameworkElement container)
{
Point elementCenter = new
Point(element.ActualWidth / 2, element.ActualHeight / 2);
Point containerCenter;
#if WINDOWS_PHONE // Need to special-case the frame to handle different orientations
if
(container is
PhoneApplicationFrame)
{
PhoneApplicationFrame frame = container as
PhoneApplicationFrame;
// Switch width and height in landscape mode
if
((frame.Orientation & PageOrientation.Landscape) == PageOrientation.Landscape)
{
containerCenter = new
Point(container.ActualHeight / 2, container.ActualWidth / 2);
}
else
containerCenter = new
Point(container.ActualWidth / 2, container.ActualHeight / 2);
}
else
containerCenter = new
Point(container.ActualWidth / 2, container.ActualHeight / 2);
#else containerCenter = new
Point(container.ActualWidth / 2, container.ActualHeight / 2);
#endif Point transformedElementCenter = element.TransformToVisual(container).Transform(elementCenter);
Point result = new
Point(containerCenter.X - transformedElementCenter.X, containerCenter.Y - transformedElementCenter.Y);
return
result;
}
/// <summary>
/// Begins the tilt effect by preparing the control and doing the initial animation
/// </summary>
/// <param name="element">The element to tilt </param>
/// <param name="touchPoint">The touch point, in element coordinates</param>
/// <param name="centerPoint">The center point of the element in element coordinates</param>
/// <param name="centerDelta">The delta between the <paramref name="element"/>‘s center and
/// the container‘s center</param>
static
void BeginTiltEffect(FrameworkElement element, Point touchPoint, Point centerPoint, Point centerDelta)
{
if
(tiltReturnStoryboard != null)
StopTiltReturnStoryboardAndCleanup();
if
(PrepareControlForTilt(element, centerDelta) == false)
return;
currentTiltElement = element;
currentTiltElementCenter = centerPoint;
PrepareTiltReturnStoryboard(element);
ApplyTiltEffect(currentTiltElement, touchPoint, currentTiltElementCenter);
}
/// <summary>
/// Prepares a control to be tilted by setting up a plane projection and some event handlers
/// </summary>
/// <param name="element">The control that is to be tilted</param>
/// <param name="centerDelta">Delta between the element‘s center and the tilt container‘s</param>
/// <returns>true if successful; false otherwise</returns>
/// <remarks>
/// This method is conservative; it will fail any attempt to tilt a control that already
/// has a projection on it
/// </remarks>
static
bool PrepareControlForTilt(FrameworkElement element, Point centerDelta)
{
// Prevents interference with any existing transforms
if
(element.Projection != null
|| (element.RenderTransform != null
&& element.RenderTransform.GetType() != typeof(MatrixTransform)))
return
false;
TranslateTransform transform = new
TranslateTransform();
transform.X = centerDelta.X;
transform.Y = centerDelta.Y;
element.RenderTransform = transform;
PlaneProjection projection = new
PlaneProjection();
projection.GlobalOffsetX = -1 * centerDelta.X;
projection.GlobalOffsetY = -1 * centerDelta.Y;
element.Projection = projection;
element.ManipulationDelta += TiltEffect_ManipulationDelta;
element.ManipulationCompleted += TiltEffect_ManipulationCompleted;
return
true;
}
/// <summary>
/// Removes modifications made by PrepareControlForTilt
/// </summary>
/// <param name="element">THe control to be un-prepared</param>
/// <remarks>
/// This method is basic; it does not do anything to detect if the control being un-prepared
/// was previously prepared
/// </remarks>
static
void RevertPrepareControlForTilt(FrameworkElement element)
{
element.ManipulationDelta -= TiltEffect_ManipulationDelta;
element.ManipulationCompleted -= TiltEffect_ManipulationCompleted;
element.Projection = null;
element.RenderTransform = null;
}
/// <summary>
/// Creates the tilt return storyboard (if not already created) and targets it to the projection
/// </summary>
/// <param name="projection">the projection that should be the target of the animation</param>
static
void PrepareTiltReturnStoryboard(FrameworkElement element)
{
if
(tiltReturnStoryboard == null)
{
tiltReturnStoryboard = new
Storyboard();
tiltReturnStoryboard.Completed += TiltReturnStoryboard_Completed;
tiltReturnXAnimation = new
DoubleAnimation();
Storyboard.SetTargetProperty(tiltReturnXAnimation, new
PropertyPath(PlaneProjection.RotationXProperty));
tiltReturnXAnimation.BeginTime = TiltReturnAnimationDelay;
tiltReturnXAnimation.To = 0;
tiltReturnXAnimation.Duration = TiltReturnAnimationDuration;
tiltReturnYAnimation = new
DoubleAnimation();
Storyboard.SetTargetProperty(tiltReturnYAnimation, new
PropertyPath(PlaneProjection.RotationYProperty));
tiltReturnYAnimation.BeginTime = TiltReturnAnimationDelay;
tiltReturnYAnimation.To = 0;
tiltReturnYAnimation.Duration = TiltReturnAnimationDuration;
tiltReturnZAnimation = new
DoubleAnimation();
Storyboard.SetTargetProperty(tiltReturnZAnimation, new
PropertyPath(PlaneProjection.GlobalOffsetZProperty));
tiltReturnZAnimation.BeginTime = TiltReturnAnimationDelay;
tiltReturnZAnimation.To = 0;
tiltReturnZAnimation.Duration = TiltReturnAnimationDuration;
if
(UseLogarithmicEase)
{
tiltReturnXAnimation.EasingFunction = new
LogarithmicEase();
tiltReturnYAnimation.EasingFunction = new
LogarithmicEase();
tiltReturnZAnimation.EasingFunction = new
LogarithmicEase();
}
tiltReturnStoryboard.Children.Add(tiltReturnXAnimation);
tiltReturnStoryboard.Children.Add(tiltReturnYAnimation);
tiltReturnStoryboard.Children.Add(tiltReturnZAnimation);
}
Storyboard.SetTarget(tiltReturnXAnimation, element.Projection);
Storyboard.SetTarget(tiltReturnYAnimation, element.Projection);
Storyboard.SetTarget(tiltReturnZAnimation, element.Projection);
}
/// <summary>
/// Continues a tilt effect that is currently applied to an element, presumably because
/// the user moved their finger
/// </summary>
/// <param name="element">The element being tilted</param>
/// <param name="e">The manipulation event args</param>
static
void ContinueTiltEffect(FrameworkElement element, ManipulationDeltaEventArgs e)
{
FrameworkElement container = e.ManipulationContainer as
FrameworkElement;
if
(container == null
|| element == null)
return;
Point tiltTouchPoint = container.TransformToVisual(element).Transform(e.ManipulationOrigin);
// If touch moved outside bounds of element, then pause the tilt (but don‘t cancel it)
if
(new
Rect(0, 0, currentTiltElement.ActualWidth, currentTiltElement.ActualHeight).Contains(tiltTouchPoint) != true)
{
PauseTiltEffect();
return;
}
// Apply the updated tilt effect
ApplyTiltEffect(currentTiltElement, e.ManipulationOrigin, currentTiltElementCenter);
}
/// <summary>
/// Ends the tilt effect by playing the animation
/// </summary>
/// <param name="element">The element being tilted</param>
static
void EndTiltEffect(FrameworkElement element)
{
if
(element != null)
{
element.ManipulationCompleted -= TiltEffect_ManipulationCompleted;
element.ManipulationDelta -= TiltEffect_ManipulationDelta;
}
if
(tiltReturnStoryboard != null)
{
wasPauseAnimation = false;
if
(tiltReturnStoryboard.GetCurrentState() != ClockState.Active)
tiltReturnStoryboard.Begin();
}
else
StopTiltReturnStoryboardAndCleanup();
}
/// <summary>
/// Handler for the storyboard complete event
/// </summary>
/// <param name="sender">sender of the event</param>
/// <param name="e">event args</param>
static
void TiltReturnStoryboard_Completed(object
sender, EventArgs e)
{
if
(wasPauseAnimation)
ResetTiltEffect(currentTiltElement);
else
StopTiltReturnStoryboardAndCleanup();
}
/// <summary>
/// Resets the tilt effect on the control, making it appear ‘normal‘ again
/// </summary>
/// <param name="element">The element to reset the tilt on</param>
/// <remarks>
/// This method doesn‘t turn off the tilt effect or cancel any current
/// manipulation; it just temporarily cancels the effect
/// </remarks>
static
void ResetTiltEffect(FrameworkElement element)
{
PlaneProjection projection = element.Projection as
PlaneProjection;
projection.RotationY = 0;
projection.RotationX = 0;
projection.GlobalOffsetZ = 0;
}
/// <summary>
/// Stops the tilt effect and release resources applied to the currently-tilted control
/// </summary>
static
void StopTiltReturnStoryboardAndCleanup()
{
if
(tiltReturnStoryboard != null)
tiltReturnStoryboard.Stop();
RevertPrepareControlForTilt(currentTiltElement);
}
/// <summary>
/// Pauses the tilt effect so that the control returns to the ‘at rest‘ position, but doesn‘t
/// stop the tilt effect (handlers are still attached, etc.)
/// </summary>
static
void PauseTiltEffect()
{
if
((tiltReturnStoryboard != null) && !wasPauseAnimation)
{
tiltReturnStoryboard.Stop();
wasPauseAnimation = true;
tiltReturnStoryboard.Begin();
}
}
/// <summary>
/// Resets the storyboard to not running
/// </summary>
private
static void ResetTiltReturnStoryboard()
{
tiltReturnStoryboard.Stop();
wasPauseAnimation = false;
}
/// <summary>
/// Applies the tilt effect to the control
/// </summary>
/// <param name="element">the control to tilt</param>
/// <param name="touchPoint">The touch point, in the container‘s coordinates</param>
/// <param name="centerPoint">The center point of the container</param>
static
void ApplyTiltEffect(FrameworkElement element, Point touchPoint, Point centerPoint)
{
// Stop any active animation
ResetTiltReturnStoryboard();
// Get relative point of the touch in percentage of container size
Point normalizedPoint = new
Point(
Math.Min(Math.Max(touchPoint.X / (centerPoint.X * 2), 0), 1),
Math.Min(Math.Max(touchPoint.Y / (centerPoint.Y * 2), 0), 1));
// Shell values
double
xMagnitude = Math.Abs(normalizedPoint.X - 0.5);
double
yMagnitude = Math.Abs(normalizedPoint.Y - 0.5);
double
xDirection = -Math.Sign(normalizedPoint.X - 0.5);
double
yDirection = Math.Sign(normalizedPoint.Y - 0.5);
double
angleMagnitude = xMagnitude + yMagnitude;
double
xAngleContribution = xMagnitude + yMagnitude > 0 ? xMagnitude / (xMagnitude + yMagnitude) : 0;
double
angle = angleMagnitude * MaxAngle * 180 / Math.PI;
double
depression = (1 - angleMagnitude) * MaxDepression;
// RotationX and RotationY are the angles of rotations about the x- or y-*axis*;
// to achieve a rotation in the x- or y-*direction*, we need to swap the two.
// That is, a rotation to the left about the y-axis is a rotation to the left in the x-direction,
// and a rotation up about the x-axis is a rotation up in the y-direction.
PlaneProjection projection = element.Projection as
PlaneProjection;
projection.RotationY = angle * xAngleContribution * xDirection;
projection.RotationX = angle * (1 - xAngleContribution) * yDirection;
projection.GlobalOffsetZ = -depression;
}
#endregion
#region Custom easing function
/// <summary>
/// Provides an easing function for the tilt return
/// </summary>
private
class LogarithmicEase : EasingFunctionBase
{
/// <summary>
/// Computes the easing function
/// </summary>
/// <param name="normalizedTime">The time</param>
/// <returns>The eased value</returns>
protected
override double EaseInCore(double
normalizedTime)
{
return
Math.Log(normalizedTime + 1) / 0.693147181; // ln(t + 1) / ln(2)
}
}
#endregion
}
/// <summary>
/// Couple of simple helpers for walking the visual tree
/// </summary>
static
class TreeHelpers
{
/// <summary>
/// Gets the ancestors of the element, up to the root
/// </summary>
/// <param name="node">The element to start from</param>
/// <returns>An enumerator of the ancestors</returns>
public
static IEnumerable<FrameworkElement> GetVisualAncestors(this
FrameworkElement node)
{
FrameworkElement parent = node.GetVisualParent();
while
(parent != null)
{
yield
return parent;
parent = parent.GetVisualParent();
}
}
/// <summary>
/// Gets the visual parent of the element
/// </summary>
/// <param name="node">The element to check</param>
/// <returns>The visual parent</returns>
public
static FrameworkElement GetVisualParent(this
FrameworkElement node)
{
return
VisualTreeHelper.GetParent(node) as
FrameworkElement;
}
}
} |
步骤2：在页面的头引入刚刚添加的类，并设置支持Tilt效果。
xmlns:local="clr-namespace:PixelDesktopApp"
local:TiltEffect.IsTiltEnabled="true"
步骤3：在控件上启用Tile效果。
<Image Source="{Binding .}" Width="205" Margin="5" Tap="Image_Tap" local:TiltEffect.SuppressTilt="true" />