[源码下载]
作者:webabcd
介绍
背水一战 Windows 10 之 控件(控件基类 - UIElement )
示例
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
[源码下载]