Drag elements on canvas xaml in window store app and control its movement

Question

I want to drag multiple items on canvas for this I use the following link this

it is dragging but it went out of canvas I want that to restrict its position inside canvas only . What offset aur values to +/- ??

Thanks.

Answer 1

You have to add clipping area to the canvas

by default clipping value is null. (No clipping)

canvas.Clip = new RectangleGeometry();
canvas.Clip.Rect = new Rect(0, 0, canvas.ActualWidth, canvas.ActualHeight);

...

if you lost your control because you include ManipulationModes.TranslateInertia ( use ManipulationMode.All ) and it hard to control when you swipe dragableItem fast , try set your ManipulationMode to this

DragableItem.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY;

...

for checking boundary before making translation

void DragableItem_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    var translate = (TranslateTransform)DragableItem.RenderTransform;

    var newPosX = Canvas.GetLeft(DragableItem) + translate.X + e.Delta.Translation.X;
    var newPosY = Canvas.GetTop(DragableItem) + translate.Y + e.Delta.Translation.Y;

    if( ! isBoundary(newPosX,parentCanvas.ActualWidth - DragableItem.ActualWidth,0) )
        translate.X += e.Delta.Translation.X;
    if( !isBoundary(newPosY,parentCanvas.ActualHeight - DragableItem.ActualHeight,0))
        translate.Y += e.Delta.Translation.Y;

}
bool isBoundary(double value,double max,double min)
{
    return value > max ? true : value < min ? true : false;
}