如何使用 Thread.Sleep 为二叉树设置动画？

Question

I've been working on a program that visually outputs the contents of a binary tree (represented in turn by classes that I wrote myself). The last feature I want to include in this program is an animation of the postorder, inorder, and preorder construction of the tree.

This has proven much more challenging than I thought. Here's the original Draw Method:

private void DrawNode(int x, int y, BinaryTreeNode<T> node, int nodeLevel, int maxDepth, int connectX = -1, int connectY = -1, )
    {
        //calculate distance between the node's children
        int distance = CalculateDistance(nodeLevel, maxDepth);

        //draw the node at the specified coordinate
        node.Draw(x, y, this.device);

        if (node.Left != null)
        {
            DrawNode(x - distance / 2, y + 50, node.Left, nodeLevel + 1, maxDepth, x, y, node);
        }
        if (node.Right != null)
        {
            DrawNode(x + distance / 2, y + 50, node.Right, nodeLevel + 1, maxDepth, x, y, node);
        }

        //connect the node to its parent
        if ((connectX != -1) && (connectY != -1))
        {
            node.Connect(connectX, connectY, device);
        }

        this.display.Image = surface;
    }

My original idea was to simply put Thread.Sleep(1000) inside each of the first two if clauses - all I really needed to do was pause the execution of the program for 1 second before each drawing of a node.

I realized that the Sleep method was blocking the execution of the drawing code, so I gave up on that method.. I then tried to use Timers, but found it impossibly difficult when dealing with the tree.

My goal is to simply find a way to pause program execution without disrupting the GUI's responsiveness and without overly complicating the code..

Any help would be appreciated:).

Edit: Some potentially relevant information: The program runs on Winforms, all graphics are handled via GDI+. If you need any other information, just ask:)

Edit: For SLaks,

//draw the node's children
        if (drawChildren)
        {
            if (node.Left != null)
            {
                if (this.timer2.Enabled)
                {
                    this.timer2.Stop();
                }
                if (!this.timer1.Enabled)
                {
                    this.timer1.Start();
                }
                this.count1++;
                this.timer1.Tick += (object source, EventArgs e) =>
                {
                    this.count1--;
                    DrawNode(x - distance / 2, y + 50, node.Left, nodeLevel + 1, maxDepth, x, y, node);
                    if (this.count1 == 0)
                    {
                        this.timer1.Stop();
                    }
                };
            }
            else
            {
                this.timer1.Stop();
                this.timer2.Start();
            }
            if (node.Right != null)
            {
                this.count2++;
                this.timer2.Tick += (object source, EventArgs e) =>
                {
                    this.count2--;
                    DrawNode(x + distance / 2, y + 50, node.Right, nodeLevel + 1, maxDepth, x, y, node);
                    if (this.count2 == 0)
                    {
                        this.timer2.Stop();
                    }
                };
            }
        }

Answer 1

Use a timer and set an appropriate interval for updates. In the Tick event perform the next step of drawing and display it.

Answer 2

First, write yourself a DrawNodesForLevel(int level) function. Then start at the top level, start the timer, every time it ticks, call DrawNodesForLevel() with the appropriate level, and increment the level. When you get to the end, stop the timer.

EDIT: Updated with the understanding that you want to pause between each node, not each level.

Move the variables in your function to their own DrawNodeState class, and pass the instance of that class whenever you call DrawNode(). Then, instead of having DrawNode() call itself, have DrawNode() start a timer (also part of the DrawNodeState class). When that timer ticks, the tick function calls DrawNode() and passes it the state structure.

The state structure is also going to have to track whether it last drew the left or right node, so it can draw the appropriate node next.

Answer 3

Split your code into 2 parts - one traversing the tree, another rendering (which you already have).

Rewrite your "traverse tree" code to be IEnumerable<node> so you can pick nodes one by one. There are non-recursive verions of tree traversal for any order, so you can use "yield return" to make iterator. You should be able to create simple tests to verify the code (no UI necessary for this).

Than in the timer callback simply take next item from the iterator till all done.

Answer 4

One possible solution would be to spawn a separate thread, then use that thread to invoke the DrawNode function at a periodic interval. This way the UI thread will not be blocked.

Since the thread you spawned will not be the UI thread, you will need to explicitly invoke the DrawNode function on the UI thread. Here's one potential way of doing that:

How to update the GUI from another thread in C#?