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

于 2012-11-12 22:05:00 发布
阅读量142 收藏
点赞数
文章标签： ui c#
本文介绍了一种方法，通过抽象化Manipulation事件，使得不同容器能够共用多点缩放功能。提供了C#代码示例，演示了如何初始化容器以支持多点触控，并实现了碰撞反馈、触控开始、触控结束和惯性开始等事件的处理。此外，还展示了如何通过关键字触发特定方法，以及容器内部元素的多点手势操作逻辑。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

实现方法：


对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.youkuaiyun.com/detail/wangrenzhu2011/4420853

iteye_18480
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值