locked
Limiting a Children's movement inside the Canvas

    Question

  • Hey guys, need a little help here.

    So firstly I have made a Canavs in XAML

    <Canvas x:Name="can" HorizontalAlignment="Left" Height="439" Margin="0,150,0,0" VerticalAlignment="Top" Width="1356" Background="White"/>

    Then through code I am drawing an Ellipse inside the canvas and setting it as children of the canvas. Further, since I want to move the ellipse inside Canvas, I registered the events---

                                                              

     Ellipse elli = new Ellipse()
                    {   
                        Margin=new Thickness(previous_poin.X,previous_poin.Y,0,0),
                        Height = modulus(previous_poin.Y - current_point.Y),
                        Width = modulus(current_point.X - previous_poin.X),
                        Fill = new SolidColorBrush(fill_colour),
                        Stroke = new SolidColorBrush(stroke_colour),
                        StrokeEndLineCap = PenLineCap.Triangle,
                        StrokeThickness = brush_size,

                        ManipulationMode=ManipulationModes.All,
                        RenderTransformOrigin=new Point(0.5,0.5),


                    };

    can.Children.Add(elli);

    elli.ManipulationDelta += shape_ManipulationDelta;

    elli.RenderTransform = composite_transform;         //composite_transform object I created and initialized globally

    Now in shape_ManipulationDelta, I wrote---

      private void shape_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
            {

                                composite_transform.TranslateX += e.Delta.Translation.X;
                                composite_transform.TranslateY += e.Delta.Translation.Y;

             }

    This much code allows me to smoothly move the ellipse. But the ellipse is also able to move outside the canvas. Please tell me HOW CAN I LIMIT THE MOVEMENT OF ELLIPSE INSIDE THE CANVAS ONLY? It should not get outside the canvas. PLEASE HELP!!!

    Wednesday, June 11, 2014 6:49 PM

Answers

  • In your ManipulationDelta handler check the results of TranslateX and TranslateY. If the newly translated bounds will be outside of the Canvas then crop the results so that the Ellipse stays in bounds.

    You can use FrameworkElement.TransformToVisual to generate a Transform that can map the Ellipse's bounds to the Canvas' coordinate system for comparison. See my blog entry     Constraining manipulations for an example.

    --Rob



    Wednesday, June 11, 2014 7:18 PM
    Owner
  • Here is an example written by Diederik Krols for this scenerio.

    Great place to learn how it works while it's also somewhat advanced since it uses behaviors.

    http://blogs.u2u.be/diederik/post/2014/03/06/A-Floating-Behavior-for-Windows-8-Store-apps.aspx




    Wednesday, June 11, 2014 10:37 PM
  • In the first section boundsInner is the bounding box of the inner element in its own coordinates. BboxOuter is the bounding box of the outer element in its coordinates, and bboxInner is the bounding box of the inner element transformed to the outer element's coordinate system. Once they're in the same coordinates we can compare the coordinates to see if bboxInner intersects with bboxOuter.

    In the second section, the (contains) case checks if the inner box is completely inside the outer box. Other wise it checks if the bounding boxes have any overlap at all.

    Thursday, June 12, 2014 1:40 PM
    Owner

All replies

  • In your ManipulationDelta handler check the results of TranslateX and TranslateY. If the newly translated bounds will be outside of the Canvas then crop the results so that the Ellipse stays in bounds.

    You can use FrameworkElement.TransformToVisual to generate a Transform that can map the Ellipse's bounds to the Canvas' coordinate system for comparison. See my blog entry     Constraining manipulations for an example.

    --Rob



    Wednesday, June 11, 2014 7:18 PM
    Owner
  • Here is an example written by Diederik Krols for this scenerio.

    Great place to learn how it works while it's also somewhat advanced since it uses behaviors.

    http://blogs.u2u.be/diederik/post/2014/03/06/A-Floating-Behavior-for-Windows-8-Store-apps.aspx




    Wednesday, June 11, 2014 10:37 PM
  • In your ManipulationDelta handler check the results of TranslateX and TranslateY. If the newly translated bounds will be outside of the Canvas then crop the results so that the Ellipse stays in bounds.

    You can use FrameworkElement.TransformToVisual to generate a Transform that can map the Ellipse's bounds to the Canvas' coordinate system for comparison. See my blog entry     Constraining manipulations for an example.

    --Rob



     I am new ro Transforms so I have Got few doubts---
    1>
      GeneralTransform testTransform = inner.TransformToVisual(outer);

                Rect boundsInner = new Rect(0, 0, inner.ActualWidth, inner.ActualHeight);         // Boundary of inner blue rectangle is created
                Rect bboxOuter = new Rect(0, 0, outer.ActualWidth, outer.ActualHeight);             //  Boundary of outer red rectangle is created

                Rect bboxInner = testTransform.TransformBounds(boundsInner);                       // What is created here?


    2>Unable to understand this piece of code also. Please explain what happens if "contain" is true?
     if (contains)
                {
                    return bboxInner.X > bboxOuter.X &&
                           bboxInner.Y > bboxOuter.Y &&
                           bboxInner.Right < bboxOuter.Right &&
                           bboxInner.Bottom < bboxOuter.Bottom;               
                }
                else
                {
                    bboxOuter.Intersect(bboxInner);
                    return !bboxOuter.IsEmpty;
                }
    Thursday, June 12, 2014 11:09 AM
  • In the first section boundsInner is the bounding box of the inner element in its own coordinates. BboxOuter is the bounding box of the outer element in its coordinates, and bboxInner is the bounding box of the inner element transformed to the outer element's coordinate system. Once they're in the same coordinates we can compare the coordinates to see if bboxInner intersects with bboxOuter.

    In the second section, the (contains) case checks if the inner box is completely inside the outer box. Other wise it checks if the bounding boxes have any overlap at all.

    Thursday, June 12, 2014 1:40 PM
    Owner
  • Hey man,

    I really really want to thank you because your code works fluently and now I am getting this Transform bounding box. Guess I should have come here first instead of googling too much.

    Just one thing I am not able to completely digest is what is the difference between bboxinnner.X and bboxinner.Right...I mean both are along the horizontal axis, right?

    Thursday, June 12, 2014 9:01 PM
  • Left side and right side.
    For consistency it should be .Left and .Right instead of .X and .Right.
    Thursday, June 12, 2014 9:37 PM
    Owner