Implement element drag effect in WINRT

There is a blog in front of the use of gestures and pointers, including the use of gestures to carry out elements of the drag operation, mainly Manipulationdelta:

Blog address: Windows Phone 8.1 Touch input-----gestures and pointers

In fact, the use of gesture Manipulationdelta operation to achieve element drag is very simple, very practical. But once you implement multiple control elements in a page

The drag, unavoidably code bloated. In fact, we can abstract this consistent function code, so that to achieve the drag effect of an element simply call a total

Common functions in the pass class.

So here's how to encapsulate a common class for invocation:

(This is mainly the use of pointerpressed,pointermoved,pointerreleased three methods)

1. First, the XAML code, the page layout as long as a canvas, and then put a rectangle in the canvas

<page    x:class= "dragdemo.mainpage"    xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local= "Using:dragdemo"    xmlns:d= "http ://schemas.microsoft.com/expression/blend/2008 "    xmlns:mc=" http://schemas.openxmlformats.org/ markup-compatibility/2006 "    mc:ignorable=" D "    background=" {ThemeResource Applicationpagebackgroundthemebrush} ">    <Grid>        <canvas width=" height= "background=" White ">            <rectangle x:name=" rect "width=" height= "" fill= "Coral"/>        </Canvas>    </Grid></Page>

2..CS Code:

Using system;using system.collections.generic;using system.io;using system.linq;using System.runtime.interopservices.windowsruntime;using windows.foundation;using Windows.Foundation.Collections; Using windows.ui.popups;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;//"Blank page" item template in http://go.microsoft.com/fwlink/?    linkid=391641 on the namespace dragdemo{////<summary>//////for self or to navigate to a blank page inside the Frame. </summary> public sealed partial class Mainpage:page {public MainPage () {This .            InitializeComponent (); This.            Navigationcachemode = navigationcachemode.required; This.        Loaded + = mainpage_loaded;        } void Mainpage_loaded (object sender, RoutedEventArgs e) {draghelper.dragable (rect); }///<summary>///This page will be in FrCalled when it is displayed in Ame.        </summary>//<param name= "E" > Describes how to access event data for this page. This parameter is typically used for configuration pages.             </param> protected override void Onnavigatedto (NavigationEventArgs e) {//TODO: Prepare the page shown here. TODO: If your application contains more than one page, make sure//by registering the following event to process the hardware back button://Windows.Phone.UI.Input.HardwareBu Ttons.            Backpressed event.        If you use navigationhelper provided by some templates,//the event will be handled for you by the system. }            }}

3. Common functions of common class:

Using system;using system.collections.generic;using system.linq;using system.text;using System.Threading.Tasks; Using windows.foundation;using windows.ui.popups;using windows.ui.xaml;using windows.ui.xaml.controls;using Windows.ui.xaml.media;namespace dragdemo{public static class DragHelper {public static readonly DEPENDENCYP Roperty Isdraggingproperty = dependencyproperty.registerattached ("Isdragging", typeof (BOOL), typeof (DragHelper        ), new PropertyMetadata (false));            public static readonly DependencyProperty Startleftproperty = dependencyproperty.registerattached ("Startleft",        typeof (Double), typeof (DragHelper), New PropertyMetadata (0.0d)); public static readonly DependencyProperty Starttopproperty = dependencyproperty.registerattached ("Starttop", Ty        Peof (Double), typeof (DragHelper), New PropertyMetadata (0.0d)); public static readonly DependencyProperty Startpositionproperty = Dependencyproperty.registerattacheD ("StartPosition", typeof (Point), typeof (DragHelper), new PropertyMetadata (default)); public static bool Dragable (this UIElement control) {if (control = = null) {T            Hrow new ArgumentNullException ("Control"); } if (Visualtreehelper.getparent (Control) is Canvas) {control. pointerpressed + = (sender, E) = = {control.                    SetValue (Isdraggingproperty, true); Control.                    SetValue (Startleftproperty, Canvas.getleft (Control)); Control.                    SetValue (Starttopproperty, Canvas.gettop (Control)); Control. SetValue (Startpositionproperty, E.getcurrentpoint (null).                Position);                };                var coreWindow = Window.Current.CoreWindow; corewindow.pointermoved + = (sender, args) = {if (bool) control.                GetValue (Isdraggingproperty))    {var currentposition = args.                        Currentpoint.position; var startposition = (point) control.                        GetValue (Startpositionproperty);                        var deltax = currentposition.x-startposition.x;                        var deltay = CURRENTPOSITION.Y-STARTPOSITION.Y; var startleft = (double) control.                        GetValue (Startleftproperty); var starttop = (double) control.                        GetValue (Starttopproperty);                        Canvas.setleft (Control, Startleft + deltax);                    Canvas.settop (Control, Starttop + DeltaY);                }                }; corewindow.pointerreleased + = (sender, args) = control.                SetValue (Isdraggingproperty, false);            return true;            } else {return false; }        }    }}

Recommended Link: "WinRT" Let the control Fly, WinRT in the web to achieve dragable effect

In the above process, I encountered a problem, I directly in the MainPage constructor directly call the common function, and then will be an error. And then I thought, because in

It uses the Visualtreehelper.getparent (UIElement ...) to get the parent element of the control to be dragged through a visual tree operation, but once

The page has not been loaded yet to get it. Of course it should go wrong. So I then call the common function in the Load event of the page, which should not be

Wrong.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Implement element drag effect in WINRT