当我尝试更改wpf中的项目范围的宽度时，UI性能问题

Question

我正在使用itemscontrol从此答案中制作一个动态歌词播放器待办事项播放 - wpf中的弦乐中的特征“>问题。

我使用两个彼此堆叠的 itemscontrols ，两者都放在不同的canvas中（要获取当前显示的文本的实际宽度），>画布放置在网格中，以确保canvas将出现在窗口中的正确位置，因此：

<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>

此窗口的效果如下：

mainbackline（蓝色文本）将在开头完全显示，mainColorline（黄色文本）的宽度设置为0在开始时，随着歌曲时间的增加，宽度将增加。

我使用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 is the percentage of the playback progress of the current sentence, which is a Double variable
    MainColorLine.Width = ((playTimePercent > 0 && playTimePercent <1) ? playTimePercent : 1) * MainBackLine.ActualWidth;
}

当我运行此代码时，mainColorline的宽度将非常缓慢而不会平稳。我已经尝试更改dispatchertimer's Interval，或使用doevents，但无效。

有什么方法可以使它更加顺畅。

Answer 1

尝试使用二倍度来使宽度动画，例如：

double width = ((playTimePercent > 0 && playTimePercent < 1) ? playTimePercent : 1) * MainBackLine.ActualWidth;
DoubleAnimation doubleAnimation = new DoubleAnimation(width, new Duration(TimeSpan.FromMilliseconds(100)));
MainColorLine.BeginAnimation(FrameworkElement.WidthProperty, doubleAnimation);