WPF修改ItemsControl宽度时UI卡顿、动画不流畅如何解决

现有实现说明 #

• 布局采用Grid内嵌两个同位置重叠的Canvas，分别承载蓝色底色歌词、黄色高亮歌词的ItemsControl，XAML结构如下：

<Grid>
    <Canvas x:Name="MainBackLineCanvas" Grid.Column="0" Grid.Row="0">
        <ItemsControl x:Name="MainBackLine" ItemsSource="{Binding}">
        ...
        </ItemsControl>
    </Canvas>
    <Canvas x:Name="MainColorLineCanvas" Grid.Column="0" Grid.Row="0">
        <ItemsControl x:Name="MainColorLine" ItemsSource="{Binding}">
        ...
        </ItemsControl>
    </Canvas>
</Grid>

• 效果逻辑：蓝色底字初始完全展示，黄色高亮层初始宽度为0，随歌曲播放进度逐步加宽，覆盖底字实现逐字高亮效果：
  
• 原有更新逻辑：使用间隔100ms的DispatcherTimer定时修改高亮层宽度，代码如下：

DispatcherTimer TextFlashTimer = new DispatcherTimer();
TextFlashTimer.Interval = new TimeSpan(0, 0, 0, 0, 100);
TextFlashTimer.Tick += TextFlash;

private void TextFlash(object? sender, EventArgs e)
{
    //playTimePercent为当前歌词句的播放进度百分比，为Double类型变量
    MainColorLine.Width = ((playTimePercent > 0 && playTimePercent <1) ? playTimePercent : 1) * MainBackLine.ActualWidth;
}

• 故障表现：高亮层宽度变化滞后、过渡不流畅，调整Timer间隔、调用DoEvents均无改善。

问题根因 #

1. DispatcherTimer默认调度优先级为Background，无法和UI渲染帧同步，100ms间隔仅能支持10帧/秒的更新速率，远低于流畅动画要求的60帧/秒标准。
2. 手动通过定时器修改UI属性的逻辑运行在UI线程，容易被其他界面操作、业务逻辑阻塞，导致更新跳帧。

可落地方案 #

方案1：帧同步更新（改动量最小） #

替换原有DispatcherTimer，使用CompositionTarget.Rendering事件实现和屏幕渲染帧同步的更新，该事件每次WPF绘制新帧时触发，和显示器刷新率对齐，无延迟跳帧问题：

// 窗口构造函数中注册渲染帧回调
public MainWindow()
{
    InitializeComponent();
    CompositionTarget.Rendering += UpdateHighlightWidth;
}

private void UpdateHighlightWidth(object sender, EventArgs e)
{
    double targetWidth = playTimePercent switch
    {
        < 0 => 0,
        > 1 => MainBackLine.ActualWidth,
        _ => playTimePercent * MainBackLine.ActualWidth
    };
    MainColorLine.Width = targetWidth;
}

// 窗口关闭时注销回调，避免内存泄漏
protected override void OnClosed(EventArgs e)
{
    CompositionTarget.Rendering -= UpdateHighlightWidth;
    base.OnClosed(e);
}

方案2：原生依赖属性动画（性能最优） #

直接使用WPF内置的DoubleAnimation实现宽度过渡，动画由WPF渲染线程独立执行，不会被UI线程的业务逻辑阻塞，不需要手动编写定时更新逻辑：

// 每句歌词开始播放时，直接启动对应时长的宽度动画
private void StartLineHighlight(TimeSpan currentLinePlayDuration)
{
    // 先清除上一句的残留动画
    MainColorLine.BeginAnimation(WidthProperty, null);
    DoubleAnimation highlightAnim = new DoubleAnimation
    {
        From = 0,
        To = MainBackLine.ActualWidth,
        Duration = currentLinePlayDuration,
        FillBehavior = FillBehavior.HoldEnd
    };
    MainColorLine.BeginAnimation(WidthProperty, highlightAnim);
}

进度跳转适配：用户拖动进度条切换播放位置时，先调用MainColorLine.BeginAnimation(WidthProperty, null)清除当前动画，直接计算目标位置对应宽度赋值给MainColorLine.Width，再从当前进度启动新动画即可。

额外渲染优化 #

给两个ItemsControl开启位图缓存，减少逐帧渲染时的文本重绘计算开销：

<ItemsControl x:Name="MainBackLine" CacheMode="BitmapCache">
...
</ItemsControl>
<ItemsControl x:Name="MainColorLine" CacheMode="BitmapCache">
...
</ItemsControl>

更新宽度的回调逻辑中不要加入额外计算、UI元素操作，保证逻辑轻量无阻塞。

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