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

时间：2021-01-18 21:23:31

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 为当前需要操作的容器 相对他父级容器的大小以及位置，用于判断多点元素的活动范围，

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

最后是效果图:

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

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

相关文章