UWP 实现仪表盘部件可移动、可调整大小功能的方案问询

这个需求在UWP中完全可以实现，以下是稳定可用的实现方案：

选用Canvas作为所有仪表盘部件的根容器，每个仪表盘部件封装为独立的UserControl，将拖拽移动和边缘缩放两个功能拆分独立实现，可控性远高于直接用自带的Manipulation属性或GridSplitter控件。

• 1. 自定义部件结构 #

  每个仪表盘部件的内层结构：外层为根Grid，顶部预留高度约30px的标题栏作为移动触发区，上下左右四个边缘、四个角各放置1个宽度为10px的透明Border作为缩放触发区，剩余区域放置仪表盘内容控件。

• 2. 光标状态适配 #

  • 标题栏监听PointerEntered/PointerExited事件：指针移入时将Window.Current.CoreWindow.PointerCursor设置为CoreCursorType.SizeAll（移动光标），移出时恢复默认光标样式
  • 不同方向的缩放触发区分别绑定对应光标：左右边缘设置为CoreCursorType.SizeWestEast、上下边缘设置为CoreCursorType.SizeNorthSouth、四个角设置为对应斜向的缩放光标

• 3. 拖拽移动逻辑 #

  给标题栏绑定PointerPressed/PointerMoved/PointerReleased三个事件：
  • PointerPressed触发时，记录当前指针的坐标、部件当前的Canvas.Left/Canvas.Top属性值，同时调用CapturePointer方法捕获当前指针，从根源解决快速拖拽丢失操作焦点的问题
  • PointerMoved触发时，如果指针处于捕获状态，计算当前指针和按下时的坐标偏移量，实时更新部件的Canvas.Left/Canvas.Top属性即可实现移动
  • PointerReleased触发时，调用ReleasePointerCapture释放指针捕获

• 4. 边缘缩放逻辑 #

  缩放触发区的事件逻辑和移动逻辑基本一致：
  • PointerPressed触发时，记录当前指针坐标、部件当前的ActualWidth/ActualHeight值、当前的缩放方向，同时捕获指针
  • PointerMoved触发时，根据缩放方向计算坐标偏移量，实时更新部件的Width和Height属性，同步调整对应方向的Canvas坐标即可避免缩放时部件出现意外位移

• 5. 窗口大小同步适配 #

  监听根Canvas的SizeChanged事件，所有部件的位置、尺寸都按窗口比例存储，窗口尺寸变化时按比例重新计算每个部件的Canvas坐标和宽高，就能实现部件跟随窗口同步调整的效果。

• 不要直接用Manipulation自带的Translate/Scale属性，自行计算坐标的可控性更高，也能自由自定义光标样式
• 透明缩放触发区不需要做可视化设计，用户操作时光标自动切换样式即可，美观度远高于GridSplitter
• 所有拖拽操作都要加指针捕获逻辑，完全可以解决快速拖拽丢失焦点的问题

内容的提问来源于stack exchange，提问作者Christoffer