[WinRT] Let the control fly, implement the dragable effect in the web in WinRT, winrtdragable

[WinRT] Let the control fly, implement the dragable effect in the web in WinRT, winrtdragable

In the xaml system, the control does not have the Left, Top, Right, and Bottom attributes in the traditional WebForm. Instead, the control uses a proportional (like Grid) response layout. However, the traditional requirements for Left and Top hard encoding still exist. Therefore, in all the xaml systems, there is a substitute control-Canvas. This article uses Canvas to drag controls.

The entire control dragging process can be divided into three parts. The first part is the input device click control, and the second part is to move the input device in the pressed state, the third part is to release the input device. Therefore, the three processes must be processed logically.

So there is an important question: how to identify whether the control is in the drag state. C # unlike javascript, you can modify objects and add attributes at will. However, it is difficult for Microsoft engineers to understand that there is an additional Property in the xaml system.

1 public static class DragHelper2 {3     public static readonly DependencyProperty IsPraggingProperty = DependencyProperty.RegisterAttached("IsDragging", typeof(bool), typeof(DragHelper), new PropertyMetadata(false));4 }

Here, IsDragging is used to identify whether the control is in the drag-and-drop process.

Next, we need an initialization method to enable drag-and-drop control.

public static class DragHelper{    public static bool Dragable(this UIElement control)    {        // TODO    }}

Here, the extension method is used to make the caller concise. This method returns a Boolean value indicating whether the operation is successful. If the parent object of the control is Canvas, true is returned; otherwise, false is returned.

public static class DragHelper{    public static bool Dragable(this UIElement control)   {      if(control==null)      {        throw new ArgumentNullException("control");      }      if(VisualTreeHelper.GetParent(control) is Canvas)      {         // TODO         return true;      }      else      {         return false;      }   }  }

Because the control does not have the so-called Parent attribute, we need to use the visual tree to obtain the Parent control.

Next, map the three processes at the beginning to the corresponding object events.

1. Enter the device click Control: UIElement. PointertPressed

2. Move the input device: Window. Current. CoreWindow. PointerMoved

3. Release the input device: Window. Current. CoreWindow. PointerReleased

Public static bool Dragable (this UIElement control) {// null judgment, refer to the above if (VisualTreeHelper. getParent (control) is Canvas) {control. pointerPressed + = (sender, e) =>{// set the control to enter the drag-and-drop status. Control. setValue (IsDraggingProperty, true); // TODO}; var coreWindow = Window. current. coreWindow; coreWindow. pointerMoved + = (sender, args) => {if (bool) control. getValue (IsDraggingProperty) {// TODO}; coreWindow. pointerReleased + = (sender, args) =>{// TODO}; return true ;}else {return false ;}}

Next, in the process of moving, we need to constantly set the additional attributes of the Left and Top controls to achieve the drag-and-drop effect. You can use

args.CurrentPoint.Position

To obtain the current location of the input device. Then, each set position is equal to the initial position plus the current position.

Overall code:

1 public static class DragHelper 2 {3 public static readonly DependencyProperty IsDraggingProperty = DependencyProperty. registerAttached (4 "IsDragging", typeof (bool), typeof (DragHelper), new PropertyMetadata (false); 5 6 public static readonly DependencyProperty StartLeftProperty = DependencyProperty. registerAttached ("StartLeft", 7 typeof (double), typeof (DragHelper), new PropertyMetadata (0.0d); 8 9 public static readonly DependencyProperty StartTopProperty = DependencyProperty. registerAttached ("StartTop", 10 typeof (double), typeof (DragHelper), new PropertyMetadata (0.0d); 11 12 public static readonly DependencyProperty StartPositionProperty = 13 DependencyProperty. registerAttached ("StartPosition", typeof (Point), typeof (DragHelper), 14 new PropertyMetadata (default (Point); 15 16 public static bool Dragable (this UIElement control) 17 {18 if (control = null) 19 {20 throw new ArgumentNullException ("control"); 21} 22 if (VisualTreeHelper. getParent (control) is Canvas) 23 {24 control. pointerPressed + = (sender, e) => 25 {26 control. setValue (IsDraggingProperty, true); 27 control. setValue (StartLeftProperty, Canvas. getLeft (control); 28 control. setValue (StartTopProperty, Canvas. getTop (control); 29 control. setValue (StartPositionProperty, e. getCurrentPoint (null ). position); 30}; 31 var coreWindow = Window. current. coreWindow; 32 coreWindow. pointerMoved + = (sender, args) => 33 {34 if (bool) control. getValue (IsDraggingProperty) 35 {36 var currentPosition = args. currentPoint. position; 37 var startPosition = (Point) control. getValue (StartPositionProperty); 38 var deltaX = currentPosition. x-startPosition. x; 39 var deltaY = currentPosition. y-startPosition. y; 40 var startLeft = (double) control. getValue (StartLeftProperty); 41 var startTop = (double) control. getValue (StartTopProperty); 42 Canvas. setLeft (control, startLeft + deltaX); 43 Canvas. setTop (control, startTop + deltaY); 44} 45}; 46 coreWindow. pointerReleased + = (sender, args) => control. setValue (IsDraggingProperty, false); 47 48 return true; 49} 50 else51 {52 return false; 53} 54} 55} 56}View Code

In step 1, save the control information to the additional attributes for easy use in the mobile status.

 

Effect:

 

Application:

For example, develop a small plug-in that returns the top of the ListView.

Because the Button will swallow the PointerPressed event, Border is used here for simulation.

Border-related xaml code:

1 <Canvas> 2 <Border x: Name = "btn" 3 Canvas. left = & quot; 300 & quot; 4 Canvas. top = "400" 5 Width = "50" 6 Height = "50" 7 CornerRadius = "50" 8 BorderBrush = "Gray" 9 BorderThickness = "3" 10 Background = "Red "11 Tapped =" Btn_OnTapped "> 12 <TextBlock Text =" TOP "13 HorizontalAlignment =" Center "14 verticalignment =" Center "15 FontSize =" 25 "16 Foreground =" Gold" /> 17 </Border> 18 </Canvas>

Code for the ListView to roll back to the top.

Private void Btn_OnTapped (object sender, TappedRoutedEventArgs e) {// Lvw is the ListView control. Var item = Lvw. Items. FirstOrDefault (); if (item! = Null) {Lvw. ScrollIntoView (item );}}