WP7 UI updating issue

Question

I am creating a 5x5 grid dynamically and trying to create an animation on those cells. When I create the on/off effect from the program. I can see all the cells are turning on or off at the same time not individually.

This is the code. What am i doing wrong here?

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

The problem is that with Thread.Sleep(100) you are actually blocking the UI thread, so it won't update immediately. When all the Thread.Sleep(100) have been executed then the UI is updated and your cells are rendered (all at the same time).

You have to run your loop in a different Thread (for ex. with a BackgroundWorker) and then call the Dispatcher every time you want to update the UI.

Something like this:

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();