Question

我使用RenderTransform使用操作delta事件翻译图像。如果弹出的图像离开屏幕。如何限制图像保持在网格内？

先谢谢

Answer 1

您需要处理delta事件，使您的翻译不会留下容器。这来自我之前的项目（_scatterViewItemTransform是我的flicked项目上的CompositeTransform，它托管在一个Container（ItemsPatrol，其ItemsPanel设置为Grid）中：

protected override void OnManipulationDelta(ManipulationDeltaRoutedEventArgs e)
{
    // Manipulation delta does not take UI scaling into account
    var scaleString = Windows.ApplicationModel.Resources.Core.ResourceManager.Current.DefaultContext.QualifierValues["scale"];
    var scale = Double.Parse(scaleString) * 0.01;

    var x = _translateOrigin.X + e.Cumulative.Translation.X / scale;
    var y = _translateOrigin.Y + e.Cumulative.Translation.Y / scale;

    if (e.IsInertial)
    {
        while (x < Container.Padding.Left ||
            x > Container.ActualWidth - Container.Padding.Right)
        {
            if (x < Container.Padding.Left)
                x = -x + 2 * Container.Padding.Left;
            if (x > Container.ActualWidth - Container.Padding.Right)
                x = 2 * (Container.ActualWidth - Container.Padding.Right) - x;
        }

        while (y < Container.Padding.Top ||
            y > Container.ActualHeight - Container.Padding.Bottom)
        {
            if (y < Container.Padding.Top)
                y = -y + 2 * Container.Padding.Top;
            if (y > Container.ActualHeight - Container.Padding.Bottom)
                y = 2 * (Container.ActualHeight - Container.Padding.Bottom) - y;
        }
    }

    _scatterViewItemTransform.TranslateX = x;
    _scatterViewItemTransform.TranslateY = y;

    if (!e.IsInertial)
    {
        BringIntoBounds();
    }
}


public void BringIntoBounds()
{
    if (_scatterViewItemTransform.TranslateX < Container.Padding.Left)
    {
        _scatterViewItemTransform.TranslateX = Container.Padding.Left;
    }

    if (_scatterViewItemTransform.TranslateX > Container.ActualWidth - Container.Padding.Right)
    {
        _scatterViewItemTransform.TranslateX = Container.ActualWidth - Container.Padding.Right;
    }

    if (_scatterViewItemTransform.TranslateY < Container.Padding.Top)
    {
        _scatterViewItemTransform.TranslateY = Container.Padding.Top;
    }

    if (_scatterViewItemTransform.TranslateY > Container.ActualHeight - Container.Padding.Bottom)
    {
        _scatterViewItemTransform.TranslateY = Container.ActualHeight - Container.Padding.Bottom;
    }
}

图像翻译限制边界

1 个答案: