WPF MVVM中TextBox文本超出可视宽度时自动左滚的实现问题

核心问题分析 #

你当前代码里的isTextWidthExceededViewport布尔变量，会在首次触发滚动后阻止后续的滚动操作，这就是只有第一次文本超出宽度时会滚动的原因。另外，直接调用ScrollToRightEnd()只能滚到文本最右端，无法保证最新输入的字符始终在左侧可见。

修改步骤与代码实现 #

1. 移除滚动限制变量：删除isTextWidthExceededViewport变量，取消对后续滚动的阻止。
2. 优化滚动逻辑：每次输入正确字符后，计算文本实际宽度与可视区域宽度的差值，动态调整滚动偏移量，确保最新输入的字符（文本末尾）始终处于可视区域的左侧位置。
3. 准确计算文本宽度：保留FormattedText计算逻辑获取文本实际渲染宽度，同时考虑TextBox的Margin避免误差。

修改后的Type方法代码如下：

private void Type(char character)
{
    if (_textBox.Text.Length < _textBlock.Text.Length)
    {
        char expectedCharacter = _textBlock.Text[_textBox.Text.Length];

        if (character == expectedCharacter)
        {
            _textBox.Text += character;

            correctlyTypedTextLength++;
            _progressBar.Value++;

            _textBox.Foreground = (correctlyTypedTextLength == _textBox.Text.Length)
                ? new SolidColorBrush(Colors.Black)
                : new SolidColorBrush(Colors.Red);

            _textBox.Select(0, correctlyTypedTextLength);

            // 计算文本实际渲染宽度
            var typeface = new Typeface(_textBox.FontFamily, _textBox.FontStyle, _textBox.FontWeight, _textBox.FontStretch);
            var formattedText = new FormattedText(
                _textBox.Text,
                Thread.CurrentThread.CurrentCulture,
                _textBox.FlowDirection,
                typeface,
                _textBox.FontSize,
                _textBox.Foreground);
            double textWidth = formattedText.Width;
            double viewportWidth = _scrollViewer.ViewportWidth - 20; // 减去Margin的偏移量

            // 当文本宽度超出可视区域时，计算滚动偏移量
            if (textWidth > viewportWidth)
            {
                // 滚动偏移量 = 文本总宽度 - 可视区域宽度，确保末尾字符在可视区域左侧
                double scrollOffset = textWidth - viewportWidth;
                _scrollViewer.ScrollToHorizontalOffset(scrollOffset);
            }
        }
        else
        {
            Fails++;
            _textBox.Foreground = Brushes.Red;

            if (Properties.Settings.Default.ErrorSound)
                System.Media.SystemSounds.Exclamation.Play();
        }
    }
}

额外优化建议 #

• 避免重复创建Typeface和FormattedText：可以将字体相关的计算缓存起来，减少性能开销。
• MVVM模式下的滚动绑定：如果严格遵循MVVM，可以将滚动偏移量封装为ViewModel中的属性，通过数据绑定控制ScrollViewer的HorizontalOffset，而非直接操作控件实例。
• 更精准的字符位置计算：尝试使用_textBox.GetRectFromCharacterIndex(_textBox.Text.Length)获取末尾字符的位置，基于此计算滚动偏移，结果会更准确。

XAML调整（可选） #

由于FormattedText计算的是实际像素宽度，建议将ScrollViewer的CanContentScroll设置为False（原代码为True，会使用逻辑单元导致滚动偏移不准确）：

<ScrollViewer
    x:Name="scroll"
    Grid.Row="1"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    CanContentScroll="False"
    HorizontalScrollBarVisibility="Visible"
    VerticalScrollBarVisibility="Disabled">
    <!-- 原有Grid内容保持不变 -->
</ScrollViewer>

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