c# - WPF行虚拟化

Question

我目前正在 WPF 中构建波形控件。我打算建立一个缩放功能。这意味着用户应该能够看到整个音频文件的每个样本。众所周知……音频文件可以有非常非常多的样本。所以我将不得不画出非常多的线，这将是开销。

所以我考虑只在需要时才画线。问题是我不知道什么是最好和最干净的方法。您对我如何开始构建这样的功能有任何想法吗？我不想要一个看起来像炸脑的代码。如果有人有开始解决该问题的好主意，我将非常感激。

Answer 1

实现该目标的一种方法是获取轨道的可见范围，然后绘制属于该区域的线。 This控制可能对你有帮助。就个人而言，即使它不使用 WPF 的缩放功能，我也会将样本的坐标保存在只读集合中，然后在需要渲染时将它们的分量乘以缩放因子。您将拥有一个 ScrollViewer，其 ScrollableWidth(假设您的示例水平跨度)等于最后一个示例的乘积 x 坐标。获得上述效果的一种方法是始终绘制最后一个样本，而不将其连接到最后一个可见样本。最后，您将在您选择的容器中绘制可见线并将其用于 ScrollViewer 的 Content 属性。

添加一个使用 Canvas 和 ScrollViewer 的小示例，您可以使用它在滚动/缩放时更新内容。

var scrollViewer = _scrollViewer; //_scrollViewer is our container
var min = scrollViewer.ContentHorizontalOffset; //Calculating visible ranges
var max = min + scrollViewer.ViewportWidth;
int[] samples = { 10, 20, 30, 50, 80, 90, 100, 130 }; //Our original samples
const double zoomFactor = 10.0;
var canvas = new Canvas {HorizontalAlignment = HorizontalAlignment.Left};
foreach (var sampleX in samples)
{
    var multipliedX = sampleX*zoomFactor;
    if (multipliedX < min || multipliedX > max) continue;
    var sampleCircle = new Ellipse {Width = 5, Height = 5, Stroke = Brushes.Black}; //Our Shape for the sample
    canvas.Children.Add(sampleCircle);
    Canvas.SetLeft(sampleCircle, multipliedX);
}
canvas.Width = samples.Last()*zoomFactor; //To extend the ScrollViewer's scrollable width
scrollViewer.Content = canvas;