UI element jumps after move

Petr Havlát

I've got a really annoying problem. I have an image taken from a PDF in ScrollViewer that is in Canvas. I want to put "Points of Interest" in that image and I want to move that POI / Mark with that image. So far I can put mark to the correct position and that mark moves along with the moving image. The problem is that on a first move / start of drag of image my mark jumps away AND THEN moves along with the image..

I get a position from image => Point p = e.GetPosition(sender as Image)

In the image below you can see situation, when I start to drag the image after I've put that mark. I have marked down POI in left fragment / border of an image that was moved to right border of canvas.. So just left fragment / border of an image was visible

annoying jump/teleport

How can I rid of that? I don't use OnStartManipulation / OnStartDrag event

Dimensions of canvas: 400 x 702 Dimensions of image: 1362 x 792

Movement of mark is implemented via updating Margin

Here is the code:

private void imagePDF_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{

    this.image_Transform.TranslateX += e.Delta.Translation.X; 
    this.image_Transform.TranslateY += e.Delta.Translation.Y;

    imageDeltaX = this.image_Transform.TranslateX;
    imageDeltaY = this.image_Transform.TranslateY;

    //update mark position

    foreach (var p in Points)
    {         
       Shapes[Points.IndexOf(p)].Margin = new Thickness(p.x + imageDeltaX, p.y + imageDeltaY, 0, 0);     
       Labels[Points.IndexOf(p)].Margin = new Thickness(p.x + imageDeltaX, p.y + imageDeltaY, 0, 0);     
    }

   }

Any help would be appreciated. I'm really desperate. I'm still newbie to UWP and C# so my solution isn't probably the best. If you encounter any other issue that I do not know about, please be so kind and tell me..

I tried to do it with Canvas.Left / Canvas.Top but still with no success.. seems that marks "anchors" to an image, when I first drag the image.. But I do not call any methods / code to do so.. Please help

Petr Havlát

So Ok, this is final solution:

    private void imagePDF_Tapped(object sender, TappedRoutedEventArgs e)
    {

        tapPosition = e.GetPosition(sender as Image);

        var x = tapPosition.X;
        var y = tapPosition.Y;

        AddMarkToPosition(++countPOI, x, y);

    }

    private void AddMarkToPosition(int id, double x, double y)
    {

        Points.Add(new PointOfInterest(countPOI, x, y));

        DrawShape(x, y);
        DisplayLabel(x, y, id.ToString());    

    }

    private void DrawShape(double x, double y)
    {
        shape = new Ellipse
        {
            Width = 30,
            Height = 30,
            Fill = new SolidColorBrush(Colors.Red),
            Stroke = new SolidColorBrush(Colors.Black),
        };

        shape.SetValue(Canvas.LeftProperty, x - 15 + imageDeltaX);
        shape.SetValue(Canvas.TopProperty, y - 15 + imageDeltaY);
        Shapes.Add(shape);
        canvasPDF.Children.Add(shape);
    }

    private void DisplayLabel(double x, double y, string s)
    {
        label = new TextBlock
        {
            Foreground = new SolidColorBrush(Colors.White),
            FontSize = 25,
            Text = s

        };

        label.SetValue(Canvas.LeftProperty, x - 8 + imageDeltaX);
        label.SetValue(Canvas.TopProperty, y - 20 + imageDeltaY);
        Labels.Add(label);
        canvasPDF.Children.Add(label);
    }

    private bool IsOutOfBorders(double x, double y)
    {
        var b = true;
        if ((x > (imagePDF.ActualWidth - 30)) || (x < 0) || (y > imagePDF.ActualHeight) || (y < 0))
        {
            b = true;
        }
        else b = false;
        return b;
    }

    private void UpdatePOI()
    {
        foreach (var p in Points)
        {
            Shapes[Points.IndexOf(p)].SetValue(Canvas.LeftProperty, p.x + imageDeltaX - 15);
            Shapes[Points.IndexOf(p)].SetValue(Canvas.TopProperty, p.y + imageDeltaY - 15);

            if (IsOutOfBorders(p.x + imageDeltaX, p.y + imageDeltaY)) Shapes[Points.IndexOf(p)].Visibility = Visibility.Collapsed;
            else Shapes[Points.IndexOf(p)].Visibility = Visibility.Visible;

            Labels[Points.IndexOf(p)].SetValue(Canvas.LeftProperty, p.x + imageDeltaX - 8);
            Labels[Points.IndexOf(p)].SetValue(Canvas.TopProperty, p.y + imageDeltaY - 20);

            if (IsOutOfBorders(p.x + imageDeltaX, p.y + imageDeltaY)) Labels[Points.IndexOf(p)].Visibility = Visibility.Collapsed;
            else Labels[Points.IndexOf(p)].Visibility = Visibility.Visible;

        }
    }

    private void imagePDF_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {

        this.image_Transform.TranslateX += e.Delta.Translation.X;
        this.image_Transform.TranslateY += e.Delta.Translation.Y;

        imageDeltaX = this.image_Transform.TranslateX;
        imageDeltaY = this.image_Transform.TranslateY;

        UpdatePOI();

    }

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Move selection after a DOM element

From Dev

Move element after nth paragraph with jQuery

From Dev

Move content added with pseudo-element:after

From Dev

Move DOM element to top of the parent and after selected element

From Dev

Move DOM element to top of the parent and after selected element

From Dev

Custom drag element jumps around

From Dev

How to move around a UI element during run-time?

From Dev

Screen jumps after hiding keyboard

From Dev

ios move ui view down after hiding status bar

From Dev

jQuery UI Append Element After The Nearest Element On Drop

From Dev

JavaScript: Move <div> element to the right after 2 items in a column

From Dev

AngularJS: Move to next form input element after successful validation

From Dev

Element jumps when using jQuery slideToggle

From Dev

Sticky navigation element jumps during scroll

From Dev

text jumps 1 pixel to the left after hover

From Dev

fixed header jumps after scrolling down the page

From Dev

CKEDITOR jumps to top after editing a link

From Dev

Ubuntu 15.04 jumps into standby after login

From Dev

IE jumps to start of textarea after focus

From Dev

QtCreator scroll jumps after mouse click

From Dev

Cursor jumps after a lag in typing in VSCode Insiders

From Dev

Finding the index of an element in a list after JQuery UI drag and drop

From Dev

JQuery UI Resizable Handlers On Selected Element After Append

From Dev

Centering Draggable Element in Droppable After Drop in jQuery UI

From Dev

Android Studio stops responding after placing first UI element

From Dev

JsViews: UI element with wrong values after observable refresh

From Dev

Many UI-Bootstrap-Datepickers on page loads very slowly - can I use a single instance and move element?

From Java

How to move an element into another element?

From Dev

Move element to active element position

Related Related

  1. 1

    Move selection after a DOM element

  2. 2

    Move element after nth paragraph with jQuery

  3. 3

    Move content added with pseudo-element:after

  4. 4

    Move DOM element to top of the parent and after selected element

  5. 5

    Move DOM element to top of the parent and after selected element

  6. 6

    Custom drag element jumps around

  7. 7

    How to move around a UI element during run-time?

  8. 8

    Screen jumps after hiding keyboard

  9. 9

    ios move ui view down after hiding status bar

  10. 10

    jQuery UI Append Element After The Nearest Element On Drop

  11. 11

    JavaScript: Move <div> element to the right after 2 items in a column

  12. 12

    AngularJS: Move to next form input element after successful validation

  13. 13

    Element jumps when using jQuery slideToggle

  14. 14

    Sticky navigation element jumps during scroll

  15. 15

    text jumps 1 pixel to the left after hover

  16. 16

    fixed header jumps after scrolling down the page

  17. 17

    CKEDITOR jumps to top after editing a link

  18. 18

    Ubuntu 15.04 jumps into standby after login

  19. 19

    IE jumps to start of textarea after focus

  20. 20

    QtCreator scroll jumps after mouse click

  21. 21

    Cursor jumps after a lag in typing in VSCode Insiders

  22. 22

    Finding the index of an element in a list after JQuery UI drag and drop

  23. 23

    JQuery UI Resizable Handlers On Selected Element After Append

  24. 24

    Centering Draggable Element in Droppable After Drop in jQuery UI

  25. 25

    Android Studio stops responding after placing first UI element

  26. 26

    JsViews: UI element with wrong values after observable refresh

  27. 27

    Many UI-Bootstrap-Datepickers on page loads very slowly - can I use a single instance and move element?

  28. 28

    How to move an element into another element?

  29. 29

    Move element to active element position

HotTag

Archive