windows8 开发教程 教你制作 多点触控Helper可将任意容器内任意对象进行多点缩放

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

实现方法：

对Manipulation进行抽象化 使不同容器可共用多点缩放事件，

C# 代码如下：

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Text;
5. using System.Threading.Tasks;
6. using Windows.Foundation;
7. using Windows.UI.Xaml;
8. using Windows.UI.Xaml.Controls;
9. using Windows.UI.Xaml.Input;
10. using Windows.UI.Xaml.Media;
11. using Windows.UI.Xaml.Media.Animation;
12. namespace MetroTimeline
13. {
14. public class MetroManipulationHelper
15. {
16. /// <summary>
17. /// 发生碰撞时的操作方法库
18. /// </summary>
19. public static Dictionary<Predicate<string>, Action<ManipulationDeltaRoutedEventArgs>>
20. BoundaryFeedbackDict = new Dictionary<Predicate<string>, Action<ManipulationDeltaRoutedEventArgs>>();
21. /// <summary>
22. /// 多点触控开始后方法库
23. /// </summary>
24. public static Dictionary<Predicate<string>, Action<ManipulationStartedRoutedEventArgs>>
25. ManipulationStartedDict = new Dictionary<Predicate<string>, Action<ManipulationStartedRoutedEventArgs>>();
26. /// <summary>
27. /// 多点触控完成后方法库
28. /// </summary>
29. public static Dictionary<Predicate<string>, Action<ManipulationCompletedRoutedEventArgs>>
30. ManipulationCompletedDict = new Dictionary<Predicate<string>, Action<ManipulationCompletedRoutedEventArgs>>();
31. /// <summary>
32. /// 需要执行的方法的关键字
33. /// </summary>
34. private static string methodTag;
35. public static string MethodTag
36. {
37. get { return MetroManipulationHelper.methodTag; }
38. set { MetroManipulationHelper.methodTag = value; }
39. }
40. /// <summary>
41. /// 将容器变为多点操控容器
42. /// </summary>
43. /// <param name="container"></param>
44. /// <param name="mode"></param>
45. /// <param name="trans"></param>
46. /// <param name="scale"></param>
47. /// <param name="rotation"></param>
48. /// <param name="containerRect">容器相对父级菜单位置</param>
49. public static void InitManipulation(FrameworkElement container, ManipulationModes mode,
50. double trans, double scale, double rotation, Rect containerRect)
51. {
52. BoundaryFeedbackDict.Add(s => s.Equals("default"), e =>
53. {
54. var element = e.OriginalSource as FrameworkElement;
55. var con = e.Container as Panel;
56. var elementBounds = element.RenderTransform.TransformBounds(new Rect(e.Position, element.RenderSize));
57. Point fp = new Point((elementBounds.Left + elementBounds.Right) / 2, (elementBounds.Top + elementBounds.Bottom) / 2);
58. if (fp.X < containerRect.Left ||
59. fp.X > containerRect.Right ||
60. fp.Y < containerRect.Top ||
61. fp.Y > containerRect.Bottom)
62. {
63. e.Complete();
64. }
65. });
66. container.ManipulationStarting += ElementManipulationEventHandler(container, mode);
67. container.ManipulationDelta += ElementManipulationDeltaEventHandler();
68. container.ManipulationStarted += ElementManipulationStartedEventHandler();
69. container.ManipulationCompleted += ElementManipulationCompletedEventHandler();
70. container.ManipulationInertiaStarting += ElementManipulationInertiaStartingEventHandler(trans, scale, rotation);
71. foreach (var item in (container as Panel).Children)
72. {
73. if (item.ManipulationMode == ManipulationModes.All)
74. {
75. var group = new TransformGroup();
76. group.Children.Add(new TranslateTransform());
77. group.Children.Add(new ScaleTransform());
78. group.Children.Add(new RotateTransform());
79. item.RenderTransform = group;
80. }
81. }
82. }
83. #region 多点手势方法
84. #region 多点触控手势开始操作
85. public static ManipulationStartingEventHandler ElementManipulationEventHandler(FrameworkElement element, ManipulationModes mode)
86. {
87. return (sender, e) =>
88. {
89. e.Container = element;
90. e.Mode = mode;
91. };
92. }
93. #endregion
94. #region 多点触控手势过程中操作
95. public static ManipulationDeltaEventHandler ElementManipulationDeltaEventHandler()
96. {
97. return ((sender, e) =>
98. {
99. var element = e.OriginalSource as FrameworkElement;
100. var center = new Point(element.ActualWidth / 2, element.ActualHeight / 2);
101. var tt = (element.RenderTransform as TransformGroup).Children[0] as TranslateTransform;
102. tt.X += e.Delta.Translation.X;
103. tt.Y += e.Delta.Translation.Y;
104. var st = (element.RenderTransform as TransformGroup).Children[1] as ScaleTransform;
105. st.CenterX = center.X;
106. st.CenterY = center.Y;
107. st.ScaleX *= e.Delta.Scale;
108. st.ScaleY *= e.Delta.Scale;
109. var rt = (element.RenderTransform as TransformGroup).Children[2] as RotateTransform;
110. rt.CenterX = center.X;
111. rt.CenterY = center.Y;
112. rt.Angle += e.Delta.Rotation;
113. if (e.IsInertial)
114. if (null != BoundaryFeedbackDict)
115. foreach (var item in BoundaryFeedbackDict)
116. {
117. if (null != MethodTag)
118. if (item.Key(MethodTag)) item.Value(e);
119. };
120. });
121. }
122. #endregion
123. #region 多点手势开始后
124. private static ManipulationStartedEventHandler ElementManipulationStartedEventHandler()
125. {
126. return (sender, e) =>
127. {
128. if (null != ManipulationStartedDict)
129. foreach (var item in ManipulationStartedDict)
130. {
131. if (null != MethodTag)
132. if (item.Key(MethodTag)) item.Value(e);
133. };
134. };
135. }
136. #endregion
137. #region 多点手势完成
138. private static ManipulationCompletedEventHandler ElementManipulationCompletedEventHandler()
139. {
140. return (sender, e) =>
141. {
142. if (null != ManipulationCompletedDict)
143. foreach (var item in ManipulationCompletedDict)
144. {
145. if (null != MethodTag)
146. if (item.Key(MethodTag)) item.Value(e);
147. };
148. };
149. }
150. #endregion
151. #region 多点手势惯性开始
152. /// <summary>
153. ///
154. /// </summary>
155. /// <param name="trans">10</param>
156. /// <param name="scale">0.1</param>
157. /// <param name="rotation">540</param>
158. /// <returns></returns>
159. private static ManipulationInertiaStartingEventHandler ElementManipulationInertiaStartingEventHandler(double trans, double scale, double rotation)
160. {
161. return (sender, e) =>
162. {
163. e.TranslationBehavior.DesiredDeceleration = trans * 96.0 / (1000.0 * 1000.0);
164. e.ExpansionBehavior.DesiredDeceleration = scale * 96 / 1000.0 * 1000.0;
165. e.RotationBehavior.DesiredDeceleration = rotation / (1000.0 * 1000.0);
166. };
167. }
168. #endregion
169. #endregion
170. }
171. }

xaml ：

1. <Page
2. x:Class="MetroTimeline.MainPage"
3. IsTabStop="false"
4. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
5. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
6. xmlns:local="using:MetroTimeline"
7. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9. mc:Ignorable="d">
10. <Canvas Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
11. Width="1080" Height="500"
12. x:Name="cvsContent" Tag="default">
13. <TextBlock Canvas.Left="573" TextWrapping="Wrap" Text="TextBlock" x:Name="tbInfo" ManipulationMode="All" Margin="219,597,171,10"/>
14. <Image Source="Assets/PicWallLoading.jpg" ManipulationMode="All" Height="202" Canvas.Left="75" Canvas.Top="209" Width="153"/>
15. <Image Source="Assets/PicWallLoading.jpg" ManipulationMode="All" Height="202" Canvas.Left="333" Canvas.Top="83" Width="153"/>
16. </Canvas>
17. </Page>

使用方式：

1. using System;
2. using System.Collections.Generic;
3. using System.IO;
4. using System.Linq;
5. using System.Threading.Tasks;
6. using Windows.Foundation;
7. using Windows.Foundation.Collections;
8. using Windows.UI.Xaml;
9. using Windows.UI.Xaml.Controls;
10. using Windows.UI.Xaml.Controls.Primitives;
11. using Windows.UI.Xaml.Data;
12. using Windows.UI.Xaml.Input;
13. using Windows.UI.Xaml.Media;
14. using Windows.UI.Xaml.Navigation;
15. // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
16. namespace MetroTimeline
17. {
18. /// <summary>
19. /// An empty page that can be used on its own or navigated to within a Frame.
20. /// </summary>
21. public sealed partial class MainPage : Page
22. {
23. public MainPage()
24. {
25. this.InitializeComponent();
26. var conRect = new Rect(Canvas.GetLeft(cvsContent), Canvas.GetTop(cvsContent),
27. cvsContent.Width, cvsContent.Height);
28. MetroManipulationHelper.InitManipulation(cvsContent, ManipulationModes.All, 5, 0.5, 360, conRect);
29. MetroManipulationHelper.MethodTag = cvsContent.Tag.ToString();
30. }
31. /// <summary>
32. /// Invoked when this page is about to be displayed in a Frame.
33. /// </summary>
34. /// <param name="e">Event data that describes how this page was reached.  The Parameter
35. /// property is typically used to configure the page.</param>
36. protected override void OnNavigatedTo(NavigationEventArgs e)
37. {
38. }
39. }
40. }

conRect 为当前需要操作的容器 相对他父级容器的大小以及位置，用于判断多点元素的活动范围，

如果范围是全屏的话 则无需传该参数，进行相应修改即可

最后是效果图:

demo 下载地址：http://download.csdn.net/detail/wangrenzhu2011/4420853