在窗口商店应用程序的canvas xaml上拖动元素并控制其移动

本文关键字:元素 拖动 控制 移动 xaml 窗口 应用程序 canvas | 更新日期: 2023-09-27 18:02:36

我想在画布上拖动多个项目,为此我使用了以下链接这个

它在拖拽,但它离开了画布,我想要限制它在画布内的位置。什么将我们的值偏移到+/- ?

谢谢。

在窗口商店应用程序的canvas xaml上拖动元素并控制其移动

你必须在画布上添加剪贴区域

的默认剪辑值为空。(无剪切)

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

如果你因为包含ManipulationModes.TranslateInertia而失去控制(使用ManipulationMode)。并且当你快速滑动dragableItem时很难控制,试着将你的ManipulationMode设置为this

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

用于翻译前检查边界

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