windows8 开发教程 教你制作 多点触控Helper可将任意容器内任意对象进行多点缩放
实现方法：
对Manipulation进行抽象化 使不同容器可共用多点缩放事件，
C# 代码如下：
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 ：
<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>
使用方式：
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=234238namespace 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