Moving the wpf button based on mouse position, but it blinks

Question

I tried to move the button based on the position of the mouse, but it blinks when the button is moved. Please find the code below

Below is the code for XAML,

<Button Name="Samplebutton" PreviewMouseDown="Samplebutton_PreviewMouseDown" PreviewMouseUp="Samplebutton_PreviewMouseUp" PreviewMouseMove="Samplebutton_PreviewMouseMove" Content="Moving" Width="100" Height="35"/> 

CS

  private bool m_IsPressed = false; private void Samplebutton_PreviewMouseDown(object sender, MouseButtonEventArgs e) { if (e.ChangedButton == MouseButton.Left) { m_IsPressed = true; } else { m_IsPressed = false; } } private void Samplebutton_PreviewMouseUp(object sender, MouseButtonEventArgs e) { m_IsPressed = false; } private void Samplebutton_PreviewMouseMove(object sender, MouseEventArgs e) { if (m_IsPressed) { TranslateTransform transform = new TranslateTransform(); transform.X = Mouse.GetPosition(sender as Button).X; transform.Y = Mouse.GetPosition(sender as Button).Y; this.Samplebutton.RenderTransform = transform; } } 

Anyone please provide your suggestions?

Answer 1

Your flicker is caused by a conversion in the PreviewMouseMove handler.

You transform the X and Y positions of the control using the mouse position relative to your Button control, which will change each time your transform is applied. Each time you change the position of the button, your Mouse.GetPosition(sender as Button).X and Y return different values, causing the button to change position again, etc.

One way: get the mouse position from the parent (for example, Grid , Canvas with a fixed position):

 <Grid Name="myGrid"> <Button Name="Samplebutton" PreviewMouseDown="Samplebutton_PreviewMouseDown" PreviewMouseUp="Samplebutton_PreviewMouseUp" PreviewMouseMove="Samplebutton_PreviewMouseMove" Content="Moving" Width="100" Height="35"/> </Grid> 

and

 private void Samplebutton_PreviewMouseMove(object sender, MouseEventArgs e) { if (m_IsPressed) { TranslateTransform transform = new TranslateTransform(); transform.X = Mouse.GetPosition(myGrid).X; transform.Y = Mouse.GetPosition(myGrid).Y; this.Samplebutton.RenderTransform = transform; } } 

This is not the most beautiful thing in the world, as it will “grab” the button in the upper left corner, but you can adapt the position to get the desired behavior.

Good luck.

Edit: If you do not want to explicitly specify the element that you want to use for the relative position, you should be able to select the immediate parent by querying the sender object:

 transform.X = Mouse.GetPosition((sender as Button).Parent as FrameworkElement).X; 

Answer 2

  private void button_PreviewMouseDown_1(object sender, MouseButtonEventArgs e) { button.CaptureMouse(); } private void button_PreviewMouseUp_1(object sender, MouseButtonEventArgs e) { button.ReleaseMouseCapture(); } private void button_PreviewMouseMove_1(object sender, MouseEventArgs e) { if (button.IsMouseCaptured) { Canvas.SetLeft(button, e.GetPosition(this).X); Canvas.SetTop(button, e.GetPosition(this).Y); } }