Export (0) Print
Expand All

Moving UI Elements with Touch



This example shows how to create a user interface (UI) element and drag it by using a single touch.

noteNote
The ScatterView control provides a framework for moving and manipulating objects on the Microsoft Surface screen. This example demonstrates a lower-level look at how to move a UI element.

Moving UI Elements with Touch

UI elements that are moved on a device made for Surface (left) and by using Input Simulator (right)

To move UI elements by using single touch

  1. Open Microsoft Visual C# 2010 Express Edition (or Microsoft Visual Studio 2010), and then create a new project by using the Surface Application (WPF) template. (For more information about how to create this project, see Creating the Visual Studio Project for the WPF Quick Start Application.)

  2. Change the type of the primary UI element from Grid to Canvas.

  3. Add a child Ellipse object to the Canvas element. Set the necessary properties of the Ellipse object.

    You must initialize the Canvas.Top and Canvas.Left properties for the Ellipse or else you cannot programmatically access these properties.

    The final XAML code should be similar to the following code example.

    
        <s:SurfaceWindow x:Class="MoveUIElementsWithTouch.SurfaceWindow1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s="http://schemas.microsoft.com/surface/2008"
        Title="MoveUIElementsWithTouch"
        >
            
        <Canvas Name="MainCanvas">
            <!-- 
            The ellipse that will be dragged around. 
            The Top and Left attributes must be set 
            or Canvas.GetTop and Canvas.GetLeft will return NaN. 
            -->
            <Ellipse 
                Name="DragEllipse" 
                Canvas.Top="0" Canvas.Left="0" 
                Fill="{DynamicResource {x:Static s:SurfaceColors.Accent4BrushKey}}" 
                Width="100" Height="100" 
                TouchDown="DragEllipse_TouchDown"
                TouchMove="DragEllipse_TouchMove"
                TouchLeave="DragEllipse_TouchLeave"
                >
            </Ellipse>
        </Canvas>
    
    </s:SurfaceWindow>
    
  4. Capture touch devices (for example, a finger) in the TouchDown event and store the first touch device that is captured.

    This code example uses C# code to store touch devices and their positions when they are placed or changed on the Ellipse object and to dismiss the touch devices when they leave the display.

  5. To drag an element, update your application to calculate the distance that the touch device moved and then use the Canvas.SetTop and Canvas.SetLeft methods to directly position the Ellipse object.

    The application must first initialize the Top and Left properties of the ellipse or these methods will return NaN.

The code for the C# event should be similar to the following code example.


// Declare the global variables.
TouchDevice ellipseControlTouchDevice;
Point lastPoint;

private void DragEllipse_TouchDown(object sender, TouchEventArgs e)
{
    // Capture to the ellipse.  
    e.TouchDevice.Capture(this.DragEllipse);

    // Remember this contact if a contact has not been remembered already.  
    // This contact is then used to move the ellipse around.
    if (ellipseControlTouchDevice == null)
    {
        ellipseControlTouchDevice = e.TouchDevice;

        // Remember where this contact took place.  
        lastPoint = ellipseControlTouchDevice.GetTouchPoint(this.MainCanvas).Position;
    }

    // Mark this event as handled.  
    e.Handled = true;
}

private void DragEllipse_TouchMove(object sender, TouchEventArgs e)
{
    if (e.TouchDevice == ellipseControlTouchDevice)
    {
        // Get the current position of the contact.  
        Point currentTouchPoint = ellipseControlTouchDevice.GetCenterPosition(this.MainCanvas);

        // Get the change between the controlling contact point and
        // the changed contact point.  
        double deltaX = currentTouchPoint.X - lastPoint.X;
        double deltaY = currentTouchPoint.Y - lastPoint.Y;

        // Get and then set a new top position and a new left position for the ellipse.  
        double newTop = Canvas.GetTop(this.DragEllipse) + deltaY;
        double newLeft = Canvas.GetLeft(this.DragEllipse) + deltaX;

        Canvas.SetTop(this.DragEllipse, newTop);
        Canvas.SetLeft(this.DragEllipse, newLeft);

        // Forget the old contact point, and remember the new contact point.  
        lastPoint = currentTouchPoint;

        // Mark this event as handled.  
        e.Handled = true;
    }
}

private void DragEllipse_TouchLeave(object sender, TouchEventArgs e)
{
    // If this contact is the one that was remembered  
    if (e.TouchDevice == ellipseControlTouchDevice)
    {
        // Forget about this contact.
        ellipseControlTouchDevice = null;
    }

    // Mark this event as handled.  
    e.Handled = true;
}

Did you find this information useful? Please send us your suggestions and comments.

© Microsoft Corporation. All rights reserved.
Show:
© 2014 Microsoft