Problème de mise à jour de l'interface utilisateur WP7

Question

Je crée dynamiquement une grille 5x5 et tente de créer une animation sur ces cellules. Quand je crée l'effet on/off du programme. Je peux voir que toutes les cellules s'allument ou s'éteignent en même temps et non individuellement.

Ceci est le code. Qu'est-ce que je fais mal ici?

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

Le problème est que, avec Thread.Sleep (100) vous bloquez réellement le thread d'interface utilisateur, donc il ne sera pas mise à jour immédiatement. Lorsque tous les Thread.Sleep (100) ont été exécutés, l'interface utilisateur est mise à jour et vos cellules sont rendues (toutes en même temps).

Vous devez exécuter votre boucle dans un thread différent (par exemple avec BackgroundWorker), puis appeler le Dispatcher chaque fois que vous souhaitez mettre à jour l'interface utilisateur.

Quelque chose comme ceci:

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