背水一战 Windows 10 (69) - 控件（控件基类）: UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性
作者：webabcd
介绍
背水一战 Windows 10 之 控件（控件基类 - UIElement）
- Manipulate 手势处理
- 路由事件的注册
- 路由事件的冒泡
- 命中测试的可见
示例
1、演示 Manipulate 手势处理
Controls/BaseControl/UIElementDemo/ManipulateDemo.xaml
<Page x:Class="Windows10.Controls.BaseControl.UIElementDemo.ManipulateDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.BaseControl.UIElementDemo" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <Grid Margin="10 0 10 10"> <TextBlock Name="lblMsg" Margin="5" /> <Rectangle Name="rectangle" Height="200" Width="200" Fill="Orange" Margin="5" /> </Grid> </Grid> </Page>
Controls/BaseControl/UIElementDemo/ManipulateDemo.xaml.cs
/* * UIElement - UIElement（继承自 DependencyObject, 请参见 /Controls/BaseControl/DependencyObjectDemo/） * ManipulationModes - 需要监测的手势（Windows.UI.Xaml.Input.ManipulationModes 枚举） * None - 禁用手势监测 * TranslateX, TranslateY - 位移手势 * TranslateRailsX, TranslateRailsY - 带有轨道的位移手势 * Rotate - 旋转手势 * Scale - 缩放手势 * TranslateInertia - 带有惯性的位移手势 * RotateInertia - 带有惯性的旋转手势 * ScaleInertia - 带有惯性的缩放手势 * All - 监测全部手势 * ManipulationStarting - 触控操作开始时触发的事件 * ManipulationStarted - 触控操作开始后触发的事件 * ManipulationInertiaStarting - 触控操作的惯性开始时触发的事件 * ManipulationCompleted - 触控操作结束后触发的事件 * ManipulationDelta - 触控值发生变化时触发的事件 * * ManipulationStartingRoutedEventArgs * Container - 此 Manipulation 的容器 * Mode - 获取或设置 ManipulationModes * Pivot - 获取或设置轴对象，ManipulationPivot 类型的数据 * Center - 旋转中心点 * Radius - 有效的旋转半径 * * ManipulationStartedRoutedEventArgs * Container - 此 Manipulation 的容器 * Cumulative - 自操作开始后的累计变化量，返回 ManipulationDelta 类型的对象 * Position - 触摸点相对于 UIElement 的位置 * Complete() - 马上完成 Manipulation 而不发生惯性 * * ManipulationDeltaRoutedEventArgs * Container - 此 Manipulation 的容器 * Cumulative - 自操作开始后的累计变化量，返回 ManipulationDelta 类型的对象 * Delta - 当前变化量，返回 ManipulationDelta 类型的对象 * Velocities - 当前变化的速率，返回 ManipulationVelocities 类型的对象 * IsInertial - 是否在惯性运动之中 * Position - 触摸点相对于 UIElement 的位置 * Complete() - 马上完成 Manipulation 而不发生惯性 * * ManipulationInertiaStartingRoutedEventArgs * Container - 此 Manipulation 的容器 * Cumulative - 自操作开始后的累计变化量，返回 ManipulationDelta 类型的对象 * Delta - 当前变化量，返回 ManipulationDelta 类型的对象 * Velocities - 当前变化的速率，返回 ManipulationVelocities 类型的对象 * ExpansionBehavior - 惯性的缩放行为，获取或设置 InertiaExpansionBehavior 类型的对象 * DesiredDeceleration - 惯性运动时，缩放的减慢速率 * DesiredExpansion - 惯性结束后，缩放的值 * RotationBehavior - 惯性的旋转行为，获取或设置 InertiaRotationBehavior 类型的对象 * DesiredDeceleration - 惯性运动时，旋转的减慢速率 * DesiredRotation - 惯性结束后，旋转的度数 * TranslationBehavior - 惯性的位移行为，获取或设置 InertiaTranslationBehavior 类型的对象 * DesiredDeceleration - 惯性运动时，直线位移的减慢速率 * DesiredDisplacement - 惯性结束后，直线位移的的值 * * ManipulationCompletedRoutedEventArgs * Container - 此 Manipulation 的容器 * Cumulative - 自操作开始后的累计变化量，返回 ManipulationDelta 类型的对象 * Velocities - 当前变化的速率，返回 ManipulationVelocities 类型的对象 * IsInertial - 结束前是否发生了惯性运动 * Position - 触摸点相对于 UIElement 的位置 * ManipulationDelta - 变化量 * Expansion - 触摸点间距离的变化，单位 dip * Scale - 触摸点间距离的变化，以一个百分比表示 * Rotation - 旋转角度的变化，以角度为单位 * Translation - 位移的变化，Point 类型的对象 * ManipulationVelocities - 变化速率 * Angular - 旋转速度，单位：度/毫秒 * Expansion - 缩放速度，单位：dip/毫秒 * Linear - 直线位移速度，单位：Point/毫秒 * * * 什么是 dip: device independent pixels（设备独立像素），不管屏大小和分辨率，把屏幕分成 480 * 320 个点，其中每一点代表 1 dip * Manipulate 是 UIElement 级别的手势操作；GestureRecognizer 是 app 级别的手势识别 * * * 本例用于演示 UIElement 的 Manipulate 的应用（位移手势，缩放手势，旋转手势） * * * 注：关于 Manipulate Pointer Tap 的区别如下 * 1、Manipulate 是最底层，Pointer 在中间，Tap 是最高层，所以会先走 Manipulate 事件，再走 Pointer 事件，最后走 Tap 事件 * 2、如果高层的事件被触发，最相对于它的底层的事件也会被触发，反之则不一定 * 3、使用原则是能在高层处理的事件尽量在高层处理（开发会简单些） */ using System; using Windows.Foundation; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; namespace Windows10.Controls.BaseControl.UIElementDemo { public sealed partial class ManipulateDemo : Page { private TransformGroup _transformGroup; private CompositeTransform _compositeTransform; private MatrixTransform _previousTransform; public ManipulateDemo() { this.InitializeComponent(); // 监测全部手势 rectangle.ManipulationMode = ManipulationModes.All; // 仅监测旋转手势和缩放手势 // rectangle.ManipulationMode = ManipulationModes.Rotate | ManipulationModes.Scale; _transformGroup = new TransformGroup(); _compositeTransform = new CompositeTransform(); _previousTransform = new MatrixTransform() { Matrix = Matrix.Identity }; _transformGroup.Children.Add(_previousTransform); _transformGroup.Children.Add(_compositeTransform); rectangle.RenderTransform = _transformGroup; rectangle.ManipulationStarting += rectangle_ManipulationStarting; rectangle.ManipulationStarted += rectangle_ManipulationStarted; rectangle.ManipulationInertiaStarting += rectangle_ManipulationInertiaStarting; rectangle.ManipulationCompleted += rectangle_ManipulationCompleted; rectangle.ManipulationDelta += rectangle_ManipulationDelta; } void rectangle_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e) { _previousTransform.Matrix = _transformGroup.Value; // 获取操作点相对于此 GeneralTransform 的位置 Point center = _previousTransform.TransformPoint(new Point(e.Position.X, e.Position.Y)); _compositeTransform.CenterX = center.X; _compositeTransform.CenterY = center.Y; _compositeTransform.Rotation = e.Delta.Rotation; _compositeTransform.ScaleX = e.Delta.Scale; _compositeTransform.ScaleY = e.Delta.Scale; _compositeTransform.TranslateX = e.Delta.Translation.X; _compositeTransform.TranslateY = e.Delta.Translation.Y; } void rectangle_ManipulationStarting(object sender, ManipulationStartingRoutedEventArgs e) { lblMsg.Text += "ManipulationStarting"; lblMsg.Text += Environment.NewLine; } void rectangle_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e) { lblMsg.Text += "ManipulationStarted"; lblMsg.Text += Environment.NewLine; } void rectangle_ManipulationInertiaStarting(object sender, ManipulationInertiaStartingRoutedEventArgs e) { lblMsg.Text += "ManipulationInertiaStarting"; lblMsg.Text += Environment.NewLine; } void rectangle_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e) { lblMsg.Text += "ManipulationCompleted"; lblMsg.Text += Environment.NewLine; } } }
2、演示路由事件的注册, 路由事件的冒泡, 命中测试的可见性
Controls/BaseControl/UIElementDemo/EventDemo.xaml
<Page x:Class="Windows10.Controls.BaseControl.UIElementDemo.EventDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.BaseControl.UIElementDemo" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5"> <!-- 演示事件冒泡：儿子传递事件给爸爸，爸爸传递事件给爷爷，这就是事件冒泡 --> <Border Name="borderRed" Background="Red" Width="300" Height="300"> <Border Name="borderGreen" Background="Green" Width="250" Height="250" Tapped="borderGreen_Tapped"> <Border Name="borderBlue" Background="Blue" Width="200" Height="200" Tapped="borderBlue_Tapped"> <Border Name="borderOrange" Background="Orange" Width="150" Height="150" Tapped="borderOrange_Tapped"> <!--通过 IsHitTestVisible="False" 设置命中测试不可见，也就是说 borderPurple 和 borderYellow 均命中测试不可见--> <Border Name="borderPurple" Background="Purple" Width="100" Height="100" Tapped="borderPurple_Tapped" IsHitTestVisible="False"> <Border Name="borderYellow" Background="Yellow" Width="50" Height="50" Tapped="borderYellow_Tapped" /> </Border> </Border> </Border> </Border> </Border> <!-- 像这样排列元素，是没有事件冒泡的，而只是前面的元素响应事件，后面的元素不会响应事件，也就是说同辈间没有事件冒泡的概念 IsHitTestVisible - 是否对命中测试可见（如果需要后面的元素响应事件，而前面的元素不响应事件，则只需要把前面的元素的命中测试设置为不可见即可） <Rectangle Name="rectangle1" Width="200" Height="200" Fill="Red" /> <Rectangle Name="rectangle2" Width="200" Height="200" Fill="Green" /> <Rectangle Name="rectangle3" Width="200" Height="200" Fill="Blue" /> <Rectangle Name="rectangle4" Width="200" Height="200" Fill="Orange" /> <Rectangle Name="rectangle5" Width="200" Height="200" Fill="Purple" /> --> </Grid> <TextBlock Name="lblMsg" Margin="5" /> </StackPanel> </Grid> </Page>
Controls/BaseControl/UIElementDemo/EventDemo.xaml.cs
/* * UIElement - UIElement（继承自 DependencyObject, 请参见 /Controls/BaseControl/DependencyObjectDemo/） * IsHitTestVisible - 是否对命中测试可见 * AddHandler(RoutedEvent routedEvent, object handler, bool handledEventsToo) - 注册一个路由事件，注意最后一个参数：true 代表即使子辈 TappedRoutedEventArgs.Handled = true 也不会影响此元素事件的触发 * RemoveHandler(RoutedEvent routedEvent, object handler) - 移除指定的路由事件 * * * RoutedEventArgs - 路由事件参数（有 n 多的派生类） * OriginalSource - 引发此路由事件的对象 * * TappedRoutedEventArgs - Tapped 事件参数（继承自 RoutedEventArgs，详细说明请参见 /Controls/BaseControl/DependencyObjectDemo/TapDemo.xaml） * Handled - 是否将路由事件标记为已处理 * true - 不再冒泡 * false - 继续冒泡 * * * 本例用于演示 UIElement 的路由事件的注册，路由事件的冒泡，命中测试的可见性 */ using System; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; namespace Windows10.Controls.BaseControl.UIElementDemo { public sealed partial class EventDemo : Page { public EventDemo() { this.InitializeComponent(); // 为 borderRed 注册一个 TappedEventHandler 路由事件（注意最后一个参数：true 代表即使子辈 TappedRoutedEventArgs.Handled = true 也不会影响此元素事件的触发） borderRed.AddHandler(UIElement.TappedEvent, new TappedEventHandler(borderRed_Tapped), true); } private void borderRed_Tapped(object sender, TappedRoutedEventArgs e) { lblMsg.Text += "borderRed tapped, originalSource: " + (e.OriginalSource as FrameworkElement).Name; lblMsg.Text += Environment.NewLine; } private void borderGreen_Tapped(object sender, TappedRoutedEventArgs e) { lblMsg.Text += "borderGreen tapped, originalSource: " + (e.OriginalSource as FrameworkElement).Name; lblMsg.Text += Environment.NewLine; } private void borderBlue_Tapped(object sender, TappedRoutedEventArgs e) { lblMsg.Text += "borderBlue tapped, originalSource: " + (e.OriginalSource as FrameworkElement).Name; lblMsg.Text += Environment.NewLine; // 不会再冒泡，也就是说 borderGreen 无法响应 Tapped 事件，但是 borderRed 注册 Tapped 事件时 handledEventsToo = true，所以 borderRed 会响应 Tapped 事件 e.Handled = true; } private void borderOrange_Tapped(object sender, TappedRoutedEventArgs e) { lblMsg.Text += "borderOrange tapped, originalSource: " + (e.OriginalSource as FrameworkElement).Name; lblMsg.Text += Environment.NewLine; } private void borderPurple_Tapped(object sender, TappedRoutedEventArgs e) { // 不会响应此事件，因为 borderPurple 的 IsHitTestVisible = false lblMsg.Text += "borderPurple tapped, originalSource: " + (e.OriginalSource as FrameworkElement).Name; lblMsg.Text += Environment.NewLine; } private void borderYellow_Tapped(object sender, TappedRoutedEventArgs e) { // 不会响应此事件，因为 borderYellow 的爸爸 borderPurple 的 IsHitTestVisible = false lblMsg.Text += "borderYellow tapped, originalSource: " + (e.OriginalSource as FrameworkElement).Name; lblMsg.Text += Environment.NewLine; } } }
OK
[源码下载]