World War I Windows 10 (69) and World War I 69

World War I Windows 10 (69) and World War I 69

[Download source code]

Backwater world war I Windows 10 (69)-Controls (control base class): UIElement-Manipulate gesture processing, route event registration, routing event bubbling, hit test visibility

Author: webabcd


Introduction
Controls for Windows 10 (controls-UIElement)

• Manipulate gesture Processing
• Route event registration
• Bubble routing event
• Visible in hit Test

Example
1. Demonstrate Manipulate gesture Processing
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 (inherited from DependencyObject, see/Controls/BaseControl/DependencyObjectDemo/) * ManipulationModes-gesture to be monitored (Windows. UI. xaml. input. manipulationModes enumeration) * None-Disable gesture monitoring * TranslateX, TranslateY-displacement gesture * TranslateRailsX, translateRailsY-orbital displacement gesture * Rotate-rotation gesture * Scale-scaling gesture * TranslateInertia-inertial displacement gesture * RotateInertia-inertial rotation gesture * ScaleInertia-inertial Scaling gesture * All-monitor All gestures * events triggered when ManipulationStarting-touch operations start * events triggered when ManipulationStarted-events triggered after touch operations start * events triggered when ManipulationInertiaStarting-inertia of touch Operations Begins * manipulationCompleted-events triggered after the touch operation ends * ManipulationDelta-events triggered when the touch value changes ** ManipulationStartingRoutedEventArgs * Container-Container for this Manipulation * Mode-Get or set ManipulationModes * handle-Events- get or set the axis object, manipulationPivot Center ** Center-Center point * Radius-valid rotation Radius ** ManipulationStartedRoutedEventArgs * Container-the Manipulation Container * Cumulative-the amount of changes since the start of the operation, returns the Position of the ManipulationDelta object * Position-Position of the touch point * Complete () relative to the UIElement () -Complete Manipulation immediately without inertia ** ManipulationDeltaRoutedEventArgs * Container-the Manipulation Container * Cumulative-the amount of changes since the operation started, return ManipulationDelta type object * Delta-current variation, return ManipulationDelta type object * Velocities-current variation rate, returns the ManipulationVelocities object * IsInertial-whether it is in inertial motion * Position-Position of the touch point relative to the UIElement * Complete () -Complete Manipulation immediately without inertia ** ManipulationInertiaStartingRoutedEventArgs * Container-the Manipulation Container * Cumulative-the amount of changes since the operation started, return ManipulationDelta type object * Delta-current variation, return ManipulationDelta type object * Velocities-current variation rate, return ManipulationVelocities type object * ExpansionBehavior-inertial scaling behavior, gets or sets the Rotation Behavior of the InertiaExpansionBehavior type object * DesiredDeceleration-inertial movement, the slow rate of scaling * DesiredExpansion-after the inertia ends, the scaled value * RotationBehavior-inertia, gets or sets the InertiaRotationBehavior type object * DesiredDeceleration-reduction rate of rotation when inertia is motion * DesiredRotation-degrees of rotation * TranslationBehavior-displacement behavior of inertia after inertia ends, get or set an InertiaTranslationBehavior object * DesiredDeceleration-slowing rate of linear displacement during inertial motion * DesiredDisplacement-after inertia ends, the value of linear displacement is ** ManipulationCompletedRoutedEventArgs * Container-the Cumulative variation of the Manipulation Container * Cumulative-the amount of changes since the start of the operation. The ManipulationDelta object * Velocities-the current change rate, returns whether the inertial motion * Position-Position of the object * IsInertial-before the end of the ManipulationVelocities object * is relative to the Position of the UIElement * ManipulationDelta-change volume * Expansion-the distance between the touch points, the Unit is dip * Scale-the variation of the distance between touch points. The * Rotation-Rotation angle change is expressed in one percentage, and the * Translation-displacement change is measured in the unit of angle, point Object * ManipulationVelocities-change rate * Angular-rotation speed, unit: Degree/millisecond * Expansion-scaling speed, unit: dip/millisecond * Linear-Linear displacement speed, unit: point/millisecond *** what is dip: device independent pixels (device independent pixel), regardless of the screen size and resolution, the screen is divided into 480*320 points, each point indicates that 1 dip * Manipulate is a gesture operation at the UIElement level; GestureRecognizer is an app-level Gesture Recognition *** this example is used to demonstrate the Manipulate application of UIElement (displacement gesture, scaling gesture, rotation gesture) *** note: the differences between Manipulate Pointer Tap are as follows * 1. Manipulate is the bottom layer, Pointer is in the middle, and Tap is the top layer, so the Manipulate event is taken first, next, go to the Pointer event and finally the Tap event * 2. If a high-level event is triggered, the event most relative to its underlying level will also be triggered, otherwise, it is not necessarily * 3. The principle of use is that the events that can be handled at the upper level should be processed at the higher level as much as possible (the development will be simpler) */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 _ example; private MatrixTransform _ example; public ManipulateDemo () {this. initializeComponent (); // monitor all gesture rectangle. manipulationMode = ManipulationModes. all; // only monitoring rotation and scaling gestures // 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; // obtain the position of the Operation Point relative to this 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. Demonstrate the registration of routing events, the bubble of routing events, and the visibility of hit tests
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"> <Grid HorizontalAlignment = "Left" verticalignment = "Top" Margin =" 5 "> <! -- Demo event bubbling: The son passed the event to his father, and his father passed the event to his grandfather, this is event bubbling --> <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 "> <! -- Set the hit test to invisible through IsHitTestVisible = "False, that is to say, borderPurple and borderYellow both hit tests are invisible --> <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> <! -- Elements are arranged in this way without event bubbling, but only the previous element responds to the event, and the subsequent elements do not respond to the event, that is to say, there is no concept of event bubbling between peers. IsHitTestVisible-whether to be visible to the hit test (if the subsequent element is required to respond to the event, and the previous element does not respond to the event, you only need to set the hit test of the previous element to invisible) <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 (inherited from DependencyObject, see/Controls/BaseControl/DependencyObjectDemo/) * ishittestvisvisible-whether to view the hit test * AddHandler (RoutedEvent routedEvent, object handler, bool handledEventsToo)-register a routing event. Note that the last parameter: true indicates that even if the child is TappedRoutedEventArgs. handled = true does not affect the trigger of this element event * RemoveHandler (RoutedEvent routedEvent, object handler) -Remove the specified route event *** RoutedEventArgs-route event parameters (with n-plus Derived classes) * OriginalSource-the object that triggers this routing event ** TappedRoutedEventArgs-Tapped event parameters (inherited from RoutedEventArgs. For details, see/Controls/BaseControl/DependencyObjectDemo/TapDemo. xaml) * Handled-Indicates whether to mark a route event as Handled * true-no longer bubbling * false-continue bubbling ** this example is used to demonstrate the registration of a route event in UIElement, routing event bubbling, hit test visibility */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 (); // register a TappedEventHandler routing event for borderRed (note the last parameter: true indicates that even if the child is TappedRoutedEventArgs. handled = true does not affect the trigger of this element event.) 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; // no more bubbling, that is, borderGreen cannot respond to the Tapped event, but borderRed registers the Tapped event with handledEventsToo = true, so borderRed will respond to the Tapped event 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) {// does not respond to this event because borderPurple's IsHitTestVisible = false lblMsg. text + = "borderPurple tapped, originalSource:" + (e. originalSource as FrameworkElement ). name; lblMsg. text + = Environment. newLine;} private void borderYellow_Tapped (object sender, TappedRoutedEventArgs e) {// does not respond to this event because borderYellow's father borderPurple's IsHitTestVisible = false lblMsg. text + = "borderYellow tapped, originalSource:" + (e. originalSource as FrameworkElement ). name; lblMsg. text + = Environment. newLine ;}}}

OK
[Download source code]