WPF（.NET7）中点击TextBox时Border移动加速问题排查及解决

问题复现步骤 #

• 创建.NET 7 WPF项目
• 替换为以下代码：

  XAML代码 #

  <Window x:Class="TestApp.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:local="clr-namespace:TestApp"
          mc:Ignorable="d"
          Title="MainWindow" Height="450" Width="800">
      <Grid>
          <TextBox HorizontalAlignment="Left" Margin="96,240,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="227" Height="97"/>
          <Button Content="Start" HorizontalAlignment="Left" Margin="400,240,0,0" VerticalAlignment="Top" Height="97" Width="160" Click="Button_Click"/>
          <Border Name="MyBorder" BorderBrush="Black" BorderThickness="1" Margin="96,45,0,0" Background="Black" VerticalAlignment="Top" HorizontalAlignment="Left" Height="131" Width="76"/>
      </Grid>
  </Window>
  

  C#代码 #

  using System.Windows;
  using System.Windows.Media;
  
  namespace TestApp
  {
      public partial class MainWindow : Window
      {
          public MainWindow()
          {
              InitializeComponent();
          }
  
          async private void Button_Click(object sender, RoutedEventArgs e)
          {
              for (int i = 96; i <= 300; i++)
              {
                  MyBorder.Margin = new Thickness(i,45,0,0);
                  await Task.Delay(5);
              }
          }
      }
  }
  

• 点击「Start」按钮后，将鼠标指向TextBox并按住左键，会发现Border的移动速度明显变快。

问题原因 #

核心原因是Windows系统定时器分辨率的动态调整：

• 系统默认定时器分辨率约为15.6ms（对应60Hz屏幕刷新率），此时Task.Delay(5)实际会等待约15.6ms才执行下一次循环，移动速度较慢。
• 当TextBox接收到鼠标按下等输入事件时，系统会临时将定时器分辨率提高到1ms左右（为提升输入响应灵敏度），此时Task.Delay(5)的实际等待时间接近设定的5ms，循环执行频率大幅提升，导致Border移动变快。

解决方案 #

要避免系统定时器分辨率的影响，推荐使用以下两种方案：

方案1：使用WPF DoubleAnimation（推荐） #

利用WPF原生动画系统实现平滑且速度稳定的移动，完全不受系统定时器影响：

private void Button_Click(object sender, RoutedEventArgs e)
{
    // 清除之前的动画
    MyBorder.BeginAnimation(MarginProperty, null);

    // 创建Margin动画，保持原代码的总移动时长
    var animation = new ThicknessAnimation
    {
        From = new Thickness(96, 45, 0, 0),
        To = new Thickness(300, 45, 0, 0),
        Duration = TimeSpan.FromMilliseconds((300 - 96) * 5)
    };

    MyBorder.BeginAnimation(MarginProperty, animation);
}

方案2：使用Stopwatch精确控制时间间隔 #

如果需要保留循环逻辑，用Stopwatch计算实际流逝时间，确保每次移动的间隔稳定：

using System.Diagnostics;

async private void Button_Click(object sender, RoutedEventArgs e)
{
    var stopwatch = Stopwatch.StartNew();
    long lastTick = 0;
    const int intervalMs = 5;

    for (int i = 96; i <= 300; i++)
    {
        MyBorder.Margin = new Thickness(i, 45, 0, 0);

        // 计算需要等待的剩余时间
        long elapsed = stopwatch.ElapsedMilliseconds;
        long waitTime = intervalMs - (elapsed - lastTick);
        if (waitTime > 0)
        {
            await Task.Delay((int)waitTime);
        }

        lastTick = elapsed;
    }
}

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