Search code examples
c#xamlwindows-store-appsmicrosoft-metrowindows-store

Detect whether two controls on a Canvas collide


My Windows Store project can move controls around on a Canvas, using ManipulationDelta. I want to create 'attachable' controls, where when you drag a control onto another control on the Canvas, rotate transforms applied on one of them will also be applied onto the other.

The simplest collision detection is to check whether the Rectangles of the two controls intersect, but since they can be rotated by any angle that's not possible.

How can this be done ?


Solution

  • You can use Intersect method of Windows.Foundation.Rect class to determine if elements has common points.

    Use my example:

    private Rect DetectCollisions(FrameworkElement rect1, FrameworkElement rect2)
    {
       var r1 = new Rect(Canvas.GetLeft(rect1), Canvas.GetTop(rect1), rect1.ActualWidth, rect1.ActualHeight);
       var r2 = new Rect(Canvas.GetLeft(rect2), Canvas.GetTop(rect2), rect2.ActualWidth, rect2.ActualHeight);
       r1.Intersect(r2);
       return r1;
    }
    

    In this example 2 Rect objects was created from 2 incoming FrameworkElement objects. Then we using Intersect method of first Rect to find out if rects has common points. If so, method will store new intersection Rect to r1 variable, instead of this it return Rect.Empty structure.