Muthalagu
Muthalagu

Reputation: 156

Moving the wpf button based on mouse position but it blinking

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

Below 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;
        }
    }

Any one please provide your suggestions?

Upvotes: 4

Views: 8806

Answers (2)

Shivam cv
Shivam cv

Reputation: 526

 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);

        }
    }

Upvotes: 1

Chris
Chris

Reputation: 8656

Your "flickering" is caused by the transform in your PreviewMouseMove handler.

You are transforming the X and Y positions of the control, using the position of the mouse relative to your Button control, which will change every time your transform is applied. Every time the button position changes, your Mouse.GetPosition(sender as Button).X & Y will return different values, causing the button to change position again, and so on.

One way around this would be to get the mouse position from a parent element (e.g. 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 won't be the prettiest thing in the world, as it will "grab" the button from the top left, but you can adapt the position to obtain your desired behaviour.

Good luck.

Edit: If you don't want to explicitly name the element you wish 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;

Upvotes: 3

Related Questions