After a bit of messing around, I finally discovered a slick way to produce a staggered loading effect for my list boxes. I found the technique from my friend Andrej Tozon’s blog.

Basically, the technique is to use the Reactive framework to asynchronously call a change of the VisualStateManager BeforeItemLoaded and AfterItemLoaded states. The entire code can be summed up with this brief method below. Of course, the XAML for the states and style of the listbox is additional code which can be found here: Download Project Files.

private void ListBox_Loaded(object sender, RoutedEventArgs e)
  {
      ((ListBox)sender).Opacity = 0;

      for (int i = 0; i < ((ListBox)sender).Items.Count; i++)
      {
          ListBoxItem item = (ListBoxItem)((ListBox)sender).ItemContainerGenerator.ContainerFromIndex(i);
          if (item != null)
          {
              VisualStateManager.GoToState(item, "BeforeLoaded", false);
          }
      }

      ((ListBox)sender).Opacity = 1.0;

      var observable = from t in Observable.Interval(TimeSpan.FromMilliseconds(300))
                               .TimeInterval().Take(((ListBox)sender).Items.Count)
                       select t.Value;

      observable.Subscribe(i => Dispatcher.BeginInvoke(() =>
          VisualStateManager.GoToState(
              (ListBoxItem)((ListBox)sender).ItemContainerGenerator
                  .ContainerFromIndex((int)i), "AfterLoaded", true)));
  }