如何在UWP中实现类似微软白板的InkCanvas无限画布功能？

嘿，我完全懂你想要实现的效果——像微软白板那样，在画布右侧附近绘图时自动拓宽画布并让滚动条自然跟进，这个交互确实能大幅提升绘图体验！

你之前的思路方向是对的，核心确实是围绕InkCanvas和它的InkPresenter来做文章，但可能在坐标计算、画布尺寸动态调整和滚动触发的时机上没踩准点，导致效果和预期不一致。下面给你一套具体的实现方案，应该能解决你的问题：

第一步：先搭好基础布局 #

首先得把InkCanvas放在ScrollViewer里，这样滚动功能才有依托。XAML结构可以这么写：

<ScrollViewer x:Name="canvasScrollViewer" 
              HorizontalScrollBarVisibility="Auto" 
              VerticalScrollBarVisibility="Auto"
              HorizontalScrollMode="Enabled">
    <InkCanvas x:Name="drawingInkCanvas" 
               Width="1000" 
               Height="800" 
               Background="#FFF5F5F5"/>
</ScrollViewer>

这里给画布一个初始尺寸，后面会根据绘图位置动态调整宽度。

第二步：监听笔触事件，实时判断并扩展画布 #

我们需要监听InkPresenter的StrokeStarted和StrokeContinued事件——前者处理笔画刚开始的瞬间，后者处理绘制过程中的每一个点，这样能保证在用户靠近右侧边缘时立刻触发扩展：

// 在页面构造函数或Loaded事件里注册监听
drawingInkCanvas.InkPresenter.StrokeInput.StrokeStarted += OnStrokeStarted;
drawingInkCanvas.InkPresenter.StrokeInput.StrokeContinued += OnStrokeContinued;

然后实现事件处理逻辑，重点是正确计算笔触相对于画布的坐标，并在靠近右侧阈值时扩展画布同时滚动：

// 设置触发扩展的阈值（比如距离右侧边缘50像素内就触发）
private const int ExpandThreshold = 50;
// 每次扩展的宽度步长
private const int WidthExpandStep = 150;

private void OnStrokeStarted(InkStrokeInput sender, Windows.UI.Core.PointerEventArgs args)
{
    CheckAndExpandCanvas(args.CurrentPoint.Position);
}

private void OnStrokeContinued(InkStrokeInput sender, Windows.UI.Core.PointerEventArgs args)
{
    CheckAndExpandCanvas(args.CurrentPoint.Position);
}

private void CheckAndExpandCanvas(Windows.Foundation.Point pointerPoint)
{
    // 将屏幕坐标转换为相对于InkCanvas的本地坐标
    var canvasRelativePoint = drawingInkCanvas.TransformToVisual(drawingInkCanvas).TransformPoint(pointerPoint);
    
    // 判断当前笔触是否靠近画布右侧边缘
    if (canvasRelativePoint.X > drawingInkCanvas.ActualWidth - ExpandThreshold)
    {
        // 扩展画布宽度
        drawingInkCanvas.Width += WidthExpandStep;
        // 让ScrollViewer自动滚动到最右侧，跟随笔触位置
        canvasScrollViewer.ScrollToHorizontalOffset(canvasScrollViewer.ScrollableWidth);
    }
}

为什么之前效果不对？ #

大概率是这几个点没处理好：

1. 没有把屏幕坐标转换成画布的本地坐标，导致判断位置时出现偏差；
2. 只在某个单一事件里处理，没有在绘制过程中实时响应；
3. 扩展画布后没有主动触发ScrollViewer的滚动，导致滚动条没跟上笔触位置。

微软白板的滚动是平滑且实时跟随笔触的，上面的代码在StrokeContinued里实时处理，就能还原这种自然的交互感。你还可以根据需求调整ExpandThreshold（触发扩展的距离）和WidthExpandStep（每次扩展的宽度），让效果更贴合你的预期。

内容的提问来源于stack exchange，提问作者Ganesh Prakash Mahajan