5

我正在为时间线控件绘制标题。它看起来像这样： 在此处输入图像描述

我每行 0.01 毫秒，所以对于 10 分钟的时间线，我正在查看绘制 60000 行 + 6000 个标签。这需要一段时间，大约 10 秒。我想从 UI 线程中卸载它。我的代码目前是：

private void drawHeader()
{
  Header.Children.Clear();
  switch (viewLevel)
  {
    case ViewLevel.MilliSeconds100:
        double hWidth = Header.Width;
        this.drawHeaderLines(new TimeSpan(0, 0, 0, 0, 10), 100, 5, hWidth);

        //Was looking into background worker to off load UI

        //backgroundWorker = new BackgroundWorker();

        //backgroundWorker.DoWork += delegate(object sender, DoWorkEventArgs args)
        //                               {
        //                                   this.drawHeaderLines(new TimeSpan(0, 0, 0, 0, 10), 100, 5, hWidth);
        //                               };
        //backgroundWorker.RunWorkerAsync();
        break;
    }
}

private void drawHeaderLines(TimeSpan timeStep, int majorEveryXLine, int distanceBetweenLines, double headerWidth)
{
var currentTime = new TimeSpan(0, 0, 0, 0, 0);
const int everyXLine100 = 10;
double currentX = 0;
var currentLine = 0;
while (currentX < headerWidth)
{
    var l = new Line
                {
                    ToolTip = currentTime.ToString(@"hh\:mm\:ss\.fff"),
                    StrokeThickness = 1,
                    X1 = 0,
                    X2 = 0,
                    Y1 = 30,
                    Y2 = 25
                };
    if (((currentLine % majorEveryXLine) == 0) && currentLine != 0)
    {
        l.StrokeThickness = 2;
        l.Y2 = 15;
        var textBlock = new TextBlock
                            {
                                Text = l.ToolTip.ToString(),
                                FontSize = 8,
                                FontFamily = new FontFamily("Tahoma"),
                                Foreground = new SolidColorBrush(Color.FromRgb(255, 255, 255))
                            };

        Canvas.SetLeft(textBlock, (currentX - 22));
        Canvas.SetTop(textBlock, 0);
        Header.Children.Add(textBlock);
    }

    if ((((currentLine % everyXLine100) == 0) && currentLine != 0)
        && (currentLine % majorEveryXLine) != 0)
    {
        l.Y2 = 20;
        var textBlock = new TextBlock
                            {
                                Text = string.Format(".{0}", TimeSpan.Parse(l.ToolTip.ToString()).Milliseconds),
                                                            FontSize = 8,
                                                            FontFamily = new FontFamily("Tahoma"),
                                                            Foreground = new SolidColorBrush(Color.FromRgb(192, 192, 192))
                            };

        Canvas.SetLeft(textBlock, (currentX - 8));
        Canvas.SetTop(textBlock, 8);
        Header.Children.Add(textBlock);
    }
    l.Stroke = new SolidColorBrush(Color.FromRgb(255, 255, 255));
    Header.Children.Add(l);
    Canvas.SetLeft(l, currentX);

    currentX += distanceBetweenLines;
    currentLine++;
    currentTime += timeStep;
}
}

我研究了 BackgroundWorker，除了你不能在非 UI 线程上创建 UI 元素。

是否可以在非 UI 线程中执行 drawHeaderLines？

我可以使用数据绑定来绘制线条吗？这对 UI 响应有帮助吗？

我想我可以使用数据绑定，但样式可能超出了我目前的 WPF 能力（来自 winforms 并试图了解所有这些样式对象是什么并绑定它们）。

谁能提供一个引诱这个的起点？或者谷歌一个能让我开始的教程？

4

3 回答 3

2

因此，正如您所说，所有这些工作都需要在 UI 线程中完成；您不能只在后台线程中执行此操作。

但是，在 UI 线程中运行一个非常长的循环来执行大量 UI 修改会阻塞 UI 线程，所以显然我们不能这样做。

这里的关键是你需要将你正在做的事情分解成许多更小的工作单元，然后在 UI 线程中完成所有这些小单元的工作。UI 线程所做的工作与以前一样多（可能甚至更多，因为管理所有这些的开销），但它允许其他事情（例如鼠标移动/单击事件、按键等）发生在这些任务之间。

这是一个简单的例子：

private void button1_Click(object sender, EventArgs e)
{
    TaskScheduler uiContext = TaskScheduler.FromCurrentSynchronizationContext();
    Task.Run(async () =>
    {
        for (int i = 0; i < 1000; i++)
        {
            await Task.Factory.StartNew(() =>
            {
                Controls.Add(new Label() { Text = i.ToString() });
            }, CancellationToken.None, TaskCreationOptions.None, uiContext);
        }
    });
}

首先，我们在 UI 线程中获取 UI 上下文，然后我们在后台启动一个新线程，负责启动我们所有的小任务。在这里，您将开始循环。（您可能希望将其提取到另一种方法，因为您的方法并不那么简单。）然后，立即在循环内部启动一个新任务，并在 UI 的上下文中启动该任务。然后，您可以在该任务内部放置循环中的整个内容。通过await执行该任务，您可以确保每个任务都被安排为前一个任务的延续，因此它们都按顺序运行。如果订单无关紧要（这不太可能，但可能），那么您根本不需要等待。

如果您需要一个 C# 4.0 版本，您可以将其保留Task在循环之外，并在每次迭代中连接一个新任务作为前一个任务的延续，然后将“自身”设置为该任务。不过会更乱。

于 2012-11-09T20:07:03.787 回答
0

这只是一个概念证明，但我认为您可以使用 ListView 虚拟化。而不是文本只有一组图像（每 10 行一个图像）。通过虚拟化，它只呈现显示的内容。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <ListView Grid.Row="0" Grid.Column="0" ItemsSource="{Binding Path=Numbers}" Width="100" Height="500">
        <ListView.RenderTransform>
            <RotateTransform Angle="90" CenterX="150" CenterY="150"/>
        </ListView.RenderTransform> 
    </ListView>
</Grid>




public List<string> Numbers
{
    get
    {
        List<string> numbers = new List<string>();
        for (UInt16 i=1; i < 60000; i++)
        {
            numbers.Add(i.ToString());
        }
        return numbers;
    }
}
于 2012-11-09T21:49:46.053 回答
0

好吧，我已经把它放在次要位置了，但是。

但我想我已经想出了一个解决方案。

使用 DrawingVisual 和 DrawingContext。

这篇博文对我帮助很大：简单的 WPF 2D 图形：DrawingVisual

首先，我们需要获取我们的 Visual 类（注意这段代码已经拼凑在一起，清理是个好主意）：

public class MyVisualHost : FrameworkElement
{
private readonly VisualCollection children;

public MyVisualHost(int width)
{
    children = new VisualCollection(this);

    var visual = new DrawingVisual();
    children.Add(visual);

    var currentTime = new TimeSpan(0, 0, 0, 0, 0);
    const int everyXLine100 = 10;
    double currentX = 0;
    var currentLine = 0;
    double distanceBetweenLines = 5;
    TimeSpan timeStep = new TimeSpan(0, 0, 0, 0, 10);
    int majorEveryXLine = 100;

    var grayBrush = new SolidColorBrush(Color.FromRgb(192, 192, 192));
    grayBrush.Freeze();
    var grayPen = new Pen(grayBrush, 2);
    var whitePen = new Pen(Brushes.White, 2);
    grayPen.Freeze();
    whitePen.Freeze();

    using (var dc = visual.RenderOpen())
    {
        while (currentX < width)
        {
            if (((currentLine % majorEveryXLine) == 0) && currentLine != 0)
            {
                dc.DrawLine(whitePen, new Point(currentX, 30), new Point(currentX, 15));

                var text = new FormattedText(
                    currentTime.ToString(@"hh\:mm\:ss\.fff"),
                    CultureInfo.CurrentCulture,
                    FlowDirection.LeftToRight,
                    new Typeface("Tahoma"),
                    8,
                    grayBrush);

                dc.DrawText(text, new Point((currentX - 22), 0));
            }
            else if ((((currentLine % everyXLine100) == 0) && currentLine != 0)
                        && (currentLine % majorEveryXLine) != 0)
            {
                dc.DrawLine(grayPen, new Point(currentX, 30), new Point(currentX, 20));

                var text = new FormattedText(
                    string.Format(".{0}", currentTime.Milliseconds),
                    CultureInfo.CurrentCulture,
                    FlowDirection.LeftToRight,
                    new Typeface("Tahoma"),
                    8,
                    grayBrush);
                dc.DrawText(text, new Point((currentX - 8), 8));
            }
            else
            {
                dc.DrawLine(grayPen, new Point(currentX, 30), new Point(currentX, 25));
            }

            currentX += distanceBetweenLines;
            currentLine++;
            currentTime += timeStep;
        }
    }
}

// Provide a required override for the VisualChildrenCount property.
protected override int VisualChildrenCount { get { return children.Count; } }

// Provide a required override for the GetVisualChild method.
protected override Visual GetVisualChild(int index)
{
    if (index < 0 || index >= children.Count)
    {
        throw new ArgumentOutOfRangeException();
    }

    return children[index];
}
}

接下来我们需要我们的绑定：

public static readonly DependencyProperty HeaderDrawingVisualProperty = DependencyProperty.Register("HeaderDrawingVisual", typeof(MyVisualHost), typeof(MainWindow));

public MyVisualHost VisualHost
{
    get { return (MyVisualHost)GetValue(HeaderDrawingVisualProperty); }
    set { SetValue(HeaderDrawingVisualProperty, value); }
}

XAML：

<Canvas x:Name="Header" Background="#FF2D2D30" Grid.Row="0">
    <ContentPresenter Content="{Binding HeaderDrawingVisual}" />
</Canvas>

然后只需在代码中设置：

Header.Width = 50000;
VisualHost = new MyVisualHost(50000);

我的测试表明，使用这种新方法使用 50000 的宽度，我看到了很大的增加！

Old way Total Milliseconds: 277.061
New way Total Milliseconds: 13.9982
Old way Total Milliseconds: 518.4632
New way Total Milliseconds: 12.9423
Old way Total Milliseconds: 479.1846
New way Total Milliseconds: 23.4987
Old way Total Milliseconds: 477.1366
New way Total Milliseconds: 12.6469
Old way Total Milliseconds: 481.3118
New way Total Milliseconds: 12.9678

第一次时间较少，因为重建时必须清除项目。

于 2012-12-04T17:00:22.300 回答