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

实现方法：

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

C# 代码如下：

[csharp] view plain copy print ?

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Animation;

namespace MetroTimeline
{
    public class MetroManipulationHelper
    {
        /// <summary>
        /// 发生碰撞时的操作方法库
        /// </summary>
        public static Dictionary<Predicate<string>, Action<ManipulationDeltaRoutedEventArgs>>
            BoundaryFeedbackDict = new Dictionary<Predicate<string>, Action<ManipulationDeltaRoutedEventArgs>>();

        /// <summary>
        /// 多点触控开始后方法库
        /// </summary>
        public static Dictionary<Predicate<string>, Action<ManipulationStartedRoutedEventArgs>>
            ManipulationStartedDict = new Dictionary<Predicate<string>, Action<ManipulationStartedRoutedEventArgs>>();

        /// <summary>
        /// 多点触控完成后方法库
        /// </summary>
        public static Dictionary<Predicate<string>, Action<ManipulationCompletedRoutedEventArgs>>
            ManipulationCompletedDict = new Dictionary<Predicate<string>, Action<ManipulationCompletedRoutedEventArgs>>();


        /// <summary>
        /// 需要执行的方法的关键字
        /// </summary>
        private static string methodTag;

        public static string MethodTag
        {
            get { return MetroManipulationHelper.methodTag; }
            set { MetroManipulationHelper.methodTag = value; }
        }


        /// <summary>
        /// 将容器变为多点操控容器
        /// </summary>
        /// <param name="container"></param>
        /// <param name="mode"></param>
        /// <param name="trans"></param>
        /// <param name="scale"></param>
        /// <param name="rotation"></param>
        /// <param name="containerRect">容器相对父级菜单位置</param>
        public static void InitManipulation(FrameworkElement container, ManipulationModes mode,
            double trans, double scale, double rotation, Rect containerRect)
        {

            BoundaryFeedbackDict.Add(s => s.Equals("default"), e =>
            {
                var element = e.OriginalSource as FrameworkElement;
                var con = e.Container as Panel;
                var elementBounds = element.RenderTransform.TransformBounds(new Rect(e.Position, element.RenderSize));
                Point fp = new Point((elementBounds.Left + elementBounds.Right) / 2, (elementBounds.Top + elementBounds.Bottom) / 2);
                if (fp.X < containerRect.Left ||
                    fp.X > containerRect.Right ||
                    fp.Y < containerRect.Top ||
                    fp.Y > containerRect.Bottom)
                {
                    e.Complete();
                }
            });
            container.ManipulationStarting += ElementManipulationEventHandler(container, mode);
            container.ManipulationDelta += ElementManipulationDeltaEventHandler();
            container.ManipulationStarted += ElementManipulationStartedEventHandler();
            container.ManipulationCompleted += ElementManipulationCompletedEventHandler();
            container.ManipulationInertiaStarting += ElementManipulationInertiaStartingEventHandler(trans, scale, rotation);
            foreach (var item in (container as Panel).Children)
            {
                if (item.ManipulationMode == ManipulationModes.All)
                {
                    var group = new TransformGroup();
                    group.Children.Add(new TranslateTransform());
                    group.Children.Add(new ScaleTransform());
                    group.Children.Add(new RotateTransform());
                    item.RenderTransform = group;
                }
            }
        }



        #region 多点手势方法
        #region 多点触控手势开始操作
        public static ManipulationStartingEventHandler ElementManipulationEventHandler(FrameworkElement element, ManipulationModes mode)
        {
            return (sender, e) =>
            {
                e.Container = element;
                e.Mode = mode;
            };
        }
        #endregion

        #region 多点触控手势过程中操作
        public static ManipulationDeltaEventHandler ElementManipulationDeltaEventHandler()
        {
            return ((sender, e) =>
            {
                var element = e.OriginalSource as FrameworkElement;
                var center = new Point(element.ActualWidth / 2, element.ActualHeight / 2);
                var tt = (element.RenderTransform as TransformGroup).Children[0] as TranslateTransform;
                tt.X += e.Delta.Translation.X;
                tt.Y += e.Delta.Translation.Y;
                var st = (element.RenderTransform as TransformGroup).Children[1] as ScaleTransform;
                st.CenterX = center.X;
                st.CenterY = center.Y;
                st.ScaleX *= e.Delta.Scale;
                st.ScaleY *= e.Delta.Scale;
                var rt = (element.RenderTransform as TransformGroup).Children[2] as RotateTransform;
                rt.CenterX = center.X;
                rt.CenterY = center.Y;
                rt.Angle += e.Delta.Rotation;
                if (e.IsInertial)
                    if (null != BoundaryFeedbackDict)
                        foreach (var item in BoundaryFeedbackDict)
                        {
                            if (null != MethodTag)
                                if (item.Key(MethodTag)) item.Value(e);
                        };
            });
        }
        #endregion

        #region 多点手势开始后
        private static ManipulationStartedEventHandler ElementManipulationStartedEventHandler()
        {
            return (sender, e) =>
            {
                if (null != ManipulationStartedDict)
                    foreach (var item in ManipulationStartedDict)
                    {
                        if (null != MethodTag)
                            if (item.Key(MethodTag)) item.Value(e);
                    };
            };
        }
        #endregion

        #region 多点手势完成
        private static ManipulationCompletedEventHandler ElementManipulationCompletedEventHandler()
        {
            return (sender, e) =>
            {
                if (null != ManipulationCompletedDict)
                    foreach (var item in ManipulationCompletedDict)
                    {
                        if (null != MethodTag)
                            if (item.Key(MethodTag)) item.Value(e);
                    };
            };
        }
        #endregion

        #region 多点手势惯性开始
        /// <summary>
        /// 
        /// </summary>
        /// <param name="trans">10</param>
        /// <param name="scale">0.1</param>
        /// <param name="rotation">540</param>
        /// <returns></returns>
        private static ManipulationInertiaStartingEventHandler ElementManipulationInertiaStartingEventHandler(double trans, double scale, double rotation)
        {
            return (sender, e) =>
            {
                e.TranslationBehavior.DesiredDeceleration = trans * 96.0 / (1000.0 * 1000.0);
                e.ExpansionBehavior.DesiredDeceleration = scale * 96 / 1000.0 * 1000.0;
                e.RotationBehavior.DesiredDeceleration = rotation / (1000.0 * 1000.0);
            };
        }
        #endregion
        #endregion
    }
}

xaml ：

[html] view plain copy print ?

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">
11. <CanvasBackground="{StaticResource ApplicationPageBackgroundThemeBrush}"
12. Width="1080"Height="500"
13. x:Name="cvsContent"Tag="default">
14. <TextBlockCanvas.Left="573"TextWrapping="Wrap"Text="TextBlock"x:Name="tbInfo"ManipulationMode="All"Margin="219,597,171,10"/>
15. <ImageSource="Assets/PicWallLoading.jpg"ManipulationMode="All"Height="202"Canvas.Left="75"Canvas.Top="209"Width="153"/>
16. <ImageSource="Assets/PicWallLoading.jpg"ManipulationMode="All"Height="202"Canvas.Left="333"Canvas.Top="83"Width="153"/>
17. </Canvas>
18. </Page>

<Page
    x:Class="MetroTimeline.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MetroTimeline"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Canvas Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
          Width="1080" Height="500"
          x:Name="cvsContent" Tag="default">
        <TextBlock Canvas.Left="573" TextWrapping="Wrap" Text="TextBlock" x:Name="tbInfo" ManipulationMode="All" Margin="219,597,171,10"/>
        <Image Source="Assets/PicWallLoading.jpg" ManipulationMode="All" Height="202" Canvas.Left="75" Canvas.Top="209" Width="153"/>
        <Image Source="Assets/PicWallLoading.jpg" ManipulationMode="All" Height="202" Canvas.Left="333" Canvas.Top="83" Width="153"/>
    </Canvas>
</Page>

使用方式：

[csharp] view plain copy print ?

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;
16. // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
18. namespace MetroTimeline
19. {
20. /// <summary>
21. /// An empty page that can be used on its own or navigated to within a Frame.
22. /// </summary>
23. public sealed partialclass MainPage : Page
24. {
25. public MainPage()
26. {
27. this.InitializeComponent();
28. var conRect = new Rect(Canvas.GetLeft(cvsContent), Canvas.GetTop(cvsContent),
29. cvsContent.Width, cvsContent.Height);
30. MetroManipulationHelper.InitManipulation(cvsContent, ManipulationModes.All, 5, 0.5, 360, conRect);
31. MetroManipulationHelper.MethodTag = cvsContent.Tag.ToString();
32. }
34. /// <summary>
35. /// Invoked when this page is about to be displayed in a Frame.
36. /// </summary>
37. /// <param name="e">Event data that describes how this page was reached. The Parameter
38. /// property is typically used to configure the page.</param>
39. protected override void OnNavigatedTo(NavigationEventArgs e)
40. {
41. }
42. }
43. }

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace MetroTimeline
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();         
            var conRect = new Rect(Canvas.GetLeft(cvsContent), Canvas.GetTop(cvsContent),
                cvsContent.Width, cvsContent.Height);
            MetroManipulationHelper.InitManipulation(cvsContent, ManipulationModes.All, 5, 0.5, 360, conRect);
            MetroManipulationHelper.MethodTag = cvsContent.Tag.ToString();
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
    }
}

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

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

最后是效果图:

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