WP7 UI更新问题

Question

我正在动态创建一个5x5网格并尝试在这些单元格上创建动画。当我从程序中创建开/关效果时。我可以看到所有单元格同时打开或关闭，而不是单独打开或关闭。

这是代码。我在这做错了什么？

private CellControl[,] Lights;

private void CreateGrid()
{

    for (int i = 0; i < 5; i++)
    {
        ColumnDefinition cd = new ColumnDefinition() { Width = new GridLength(20, GridUnitType.Star) };
        RowDefinition rd = new RowDefinition() { Height = new GridLength(20, GridUnitType.Star) };

        this.GridGame.ColumnDefinitions.Add(cd);
        this.GridGame.RowDefinitions.Add(rd);
    }

    for (int i = 0; i < GridGame.RowDefinitions.Count; ++i)
    {
        for (int k = 0; k < GridGame.ColumnDefinitions.Count; ++k)
        {

            var btn = new CellControl();
            btn.TabIndex = k + (i * GridSize) + 1;
            btn.State = ButtonState.On;
            btn.Clicked +=new EventHandler<MouseButtonEventArgs>(btn_Clicked);

            Lights[k, i] = btn;

            GridGame.Children.Add(btn);
            Grid.SetRow(btn, i);
            Grid.SetColumn(btn, k);
        }
    }
}

// Animation goes here
private void AnimateGrid()
{

    //Clear the grid  
    Dispatcher.BeginInvoke( (Action)(()=>
    {
        for (int y = 0; y < GridSize; y++)
            for (int x = 0; x < GridSize; x++)
            {
                this.Lights[x, y].ToggleOff();
            }
    }));


    int[][] lightSequence = new int[][]
    {
         new int[] { 1, 1 }, new int[] { 1, 2 }, new int[] { 1, 3 }, new int[] { 1, 4 },  new int[] { 1, 5 }, 
         new int[] { 2, 5 }, new int[] { 3, 5 }, new int[] { 4, 5 }, new int[] { 5, 5 }, 
         new int[] { 5, 4 }, new int[] { 5, 3 }, new int[] { 5, 2 }, new int[] { 5, 1 }, 
         new int[] { 4, 1 }, new int[] { 3, 1 }, new int[] { 2, 1 },
         new int[] { 2, 2 }, new int[] { 2, 3 }, new int[] { 2, 4 }, 
         new int[] { 3, 4 }, new int[] { 4, 4 }, 
         new int[] { 4, 3 }, new int[] { 4, 2 }, 
         new int[] { 3, 2 }, new int[] { 2, 2 }, 
         new int[] { 2, 3 }, new int[] { 3, 3 }
    };


    foreach (int[] item in lightSequence )
    {
        int x = item[0];
        int y = item[1];

        x -= 1;
        y -= 1;

        this.Lights[x, y].ToggleOn();
        Thread.Sleep(100);
    }

}

Answer 1

问题是使用Thread.Sleep（100）实际上是阻塞了UI线程，所以它不会立即更新。当所有Thread.Sleep（100）都被执行后，UI就会更新并且你的单元格会被渲染（所有这些都是同时进行的）。

您必须在不同的线程中运行循环（例如，使用BackgroundWorker），然后在每次要更新UI时调用Dispatcher。

这样的事情：

var bw = new BackgroundWorker();
bw.DoWork += (s, e) =>
{
    foreach (int[] item in lightSequence)
    {
        int x = item[0];
        int y = item[1];

        x -= 1;
        y -= 1;

        Dispatcher.BeginInvoke((Action<int, int>)((a, b) => this.Lights[a, b].ToggleOn()), x, y);
        Thread.Sleep(100);
    }
};
bw.RunWorkerAsync();