locked
[UWP][C#]Move a TextBox using Mouse pointer pressed in c# RRS feed

  • Question

  • I'm developing an app in which i need to move a TextBox within the app by using mouse pointer pressed down(LeftClick). Need help with code...

    • Edited by Latheef Shaik Saturday, December 3, 2016 10:50 AM
    • Edited by Barry Wang Monday, December 5, 2016 10:46 AM title tag
    Saturday, December 3, 2016 10:48 AM

All replies

  • This is how I do it. I'll supply the overall strategy but you'll need to fill in the coding details.

    The controls you want to move need to be children of a Canvas control. This allows you to use Canvas.SetTop and Canvas.SetLeft to position controls.

    You need to track the following events, OnPointerPressed, OnPointerMoved, OnPointerReleased.

    In the OnPointerPressed event handler determine whether you are over the control you want to move. Do this by leveraging VisualTreeHelper.GetParent to traverse the UI tree until you hit your movable control. If the pointer is pressed over your desired control then set a variable that indicates this state and store a reference to the control under the pointer.

    In the OnPointerMoved event handler check to see if the pointer is in the pressed state and that there is a reference to a control you want to move (set in OnPointerPressed). If so then using the values from the event arguments, move the control to the desired position using Canvas.SetTop, Canvas.SetLeft.

    In the OnPointerReleased event handler re-initialize the state variables that were wet in OnPointerPressed.

    If you do a search you will find other examples for what you are trying to achieve.

    Saturday, December 3, 2016 3:36 PM
  • Hello Latheef Shaik,

    It is not necessary that your textBox was the Canvas children control ! The parent control can be  Grid , Panel or even if ItemsControl only need to use TranslateTransform

    PointerPoint _anchorPoint; PointerPoint _currentPoint; bool _isInDrag;

            readonly TranslateTransform _transform = new TranslateTransform();

    public MainPage() { this.InitializeComponent(); textBox.AddHandler(UIElement.PointerPressedEvent, new PointerEventHandler(textBox_PointerPressed), true); textBox.AddHandler(UIElement.PointerReleasedEvent, new PointerEventHandler(textBox_PointerReleased), true); textBox.AddHandler(UIElement.PointerMovedEvent, new PointerEventHandler(textBox_PointerMoved), true); }

    private void textBox_PointerPressed(object sender, PointerRoutedEventArgs e) { Debug.WriteLine("PoinertPressed"); var element = sender as FrameworkElement; _anchorPoint = e.GetCurrentPoint((sender as TextBox).Parent as UIElement); if (element != null) element.CapturePointer(e.Pointer); _isInDrag = true; e.Handled = true; } private void textBox_PointerReleased(object sender, PointerRoutedEventArgs e) { Debug.WriteLine("PoinertReleased"); if (!_isInDrag) return; var element = sender as FrameworkElement; if (element != null) element.ReleasePointerCapture(e.Pointer); _isInDrag = false; e.Handled = true; } private void textBox_PointerMoved(object sender, PointerRoutedEventArgs e) { Debug.WriteLine("PoinertMoved"); if (!_isInDrag) return; _currentPoint = e.GetCurrentPoint((sender as TextBox).Parent as UIElement); _transform.X += _currentPoint.Position.X - _anchorPoint.Position.X; _transform.Y += (_currentPoint.Position.Y - _anchorPoint.Position.Y); RenderTransform = _transform; _anchorPoint = _currentPoint; }


     


    Make the community better together


    Saturday, December 3, 2016 3:55 PM
  • Hello Latheef Shaik,

    It is not necessary that your textBox was the Canvas children control ! The parent control can be  Grid , Panel or even if ItemsControl only need to use TranslateTransform


    True, but in my program I wanted to handle the control movement at a higher level rather than adding event handlers for every control. Also my app has the ability to lasso or rope controls to allow movement of multiple controls at a time. Using a Canvas as a parent makes this a lot easier.
    Saturday, December 3, 2016 4:06 PM
  • Hello Latheef Shaik,

    It is not necessary that your textBox was the Canvas children control ! The parent control can be  Grid , Panel or even if ItemsControl only need to use TranslateTransform


    True, but in my program I wanted to handle the control movement at a higher level rather than adding event handlers for every control. Also my app has the ability to lasso or rope controls to allow movement of multiple controls at a time. Using a Canvas as a parent makes this a lot easier.
    You can do any thing in your project by any way. but the question was only for sample TextBox move implementation by pointer !

    Make the community better together

    Saturday, December 3, 2016 4:14 PM
  • Hi Latheef,
    If you just want to move a TextBox in the app, the simplest way is to add Manipulation events to the TextBox and create the TranslateTransform for translating the TextBox control,after that in the ManipulationDelta event handler we can update the position of the TextBox using the TranslateTransform.
    In this case, in the XAML:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
             <TextBox Name="MyTextBox"
                    Height="100" Width="200" 
                    ManipulationMode="All"/>
    </Grid>
    In the code behind:
    public sealed partial class MainPage : Page
         {
             // Global translation transform used for changing the position of 
             // the TextBox based on input data from the touch contact.
             private TranslateTransform dragTranslation;
             public MainPage()
             {
                 this.InitializeComponent();
                 MyTextBox.ManipulationDelta += TextBox _ManipulationDelta;
                 // New translation transform populated in 
                 // the ManipulationDelta handler.
                 dragTranslation = new TranslateTransform();
                 // Apply the translation to the TextBox.
                 TextBox.RenderTransform = this.dragTranslation;
             }
    
            // Handler for the ManipulationDelta event.
             // ManipulationDelta data is loaded into the
             // translation transform and applied to the TextBox.
             void TextBox _ManipulationDelta(object sender,
                 ManipulationDeltaRoutedEventArgs e)
             {
                 // Move the TextBox.
                 dragTranslation.X += e.Delta.Translation.X;
                 dragTranslation.Y += e.Delta.Translation.Y;
             }
        }

    For more information about Touch interactions,refer to:
    https://msdn.microsoft.com/en-us/windows/uwp/input-and-devices/touch-interactions


    Best Regards,
    Breeze Liu



    • Edited by Breeze Liu Monday, December 5, 2016 8:34 AM
    Monday, December 5, 2016 8:29 AM
  • Hi Jim,

    Can you elaborate on how to use VisualTreeHelper? Every part of your explanation has been helpful and I can't get past it to implement moving a textbox

    Thursday, December 14, 2017 3:25 AM
  • the transform.X and .Y parts of this code are not working for me. Any suggestions?
    Thursday, December 14, 2017 3:29 AM