[WPF] ObservableCollection and ListBoxItem DataTemplate generation problem

Question

Something strange is going on with ObservableCollection.

I have the following code:

private readonly ObservableCollection<DisplayVerse> _display;
private readonly ListBox _box;

    private void TransferToDisplay()
 {
  double elementsHeight = 0;

  _display.Clear();

  for (int i = 0; i < _source.Count; i++) {
   DisplayVerse verse = _source[i];
   _display.Add(verse);
   elementsHeight += CalculateItemsHeight(i);
   if (elementsHeight + Offset > _box.ActualHeight) {
    _display.RemoveAt(_display.Count - 1);
    break;
   }
  }
  MessageBox.Show(elementsHeight.ToString());
 }

 private double CalculateItemsHeight(int index)
 {
  ListBoxItem lbi = _box.ItemContainerGenerator.ContainerFromIndex(index) as ListBoxItem;
  return lbi != null ? lbi.ActualHeight : 0;
 }

What I am trying to do here is control how many items go into the ObservableCollection _display. Now, within this for loop you can see that elements are added until the total elements height (+offset) is greater than the listbox itself.

Now, this is strange, the elementsHeight equals 0 after this for loop. (CalculateItemsHeight returns 0 in all for loop iterations even though the lbi is not null) It seems that the UI elements defined in the datatemplate are not created...

Yet.

Now, if I put some MessageBoxes after the _display.Add(verse) you can see that the CalculateItemsHeight actually returns the height of an item.

for (int i = 0; i < _source.Count; i++) {
 DisplayVerse verse = _source[i];
 _display.Add(verse);
 MessageBox.Show("pause"); // <----- PROBLEM?
 elementsHeight += CalculateItemsHeight(i);
 if (elementsHeight + Offset > _box.ActualHeight) {
  _display.RemoveAt(_display.Count - 1);
  break;
 }
}
MessageBox.Show(elementsHeight.ToString());

After I modify the for loop as shown, the last MessageBox actually shows the actual height for all processed elements.

My question is - when are the UI elements actually created? It seems that it was done somewhere during the MessageBox display. This behaviour is pretty strange for me, maybe it has something to do with threading, not sure.

Adding to the _display ObservableCollection obviously creates an item immediately, but not its visual elements (they are however added afterwards, I just don't know exactly when). How can I do this same behaviour without having to pop the message box up?

Answer 1

The wpf layout engine won't have been through the layout and arrange pass so your listboxitems won't have been given a size yet. Sticking in the message box will allow the background threads that do this run. Try forcing a call to Measure() on your items before looking at their size.

Answer 2

SOLVED

This creates somewhat flickering effect for a fraction of second (as if loading items one by one), but actually suits my needs.

The point is to refresh the UI for an item before retrieving its height.

I have created an extension method:

    public static void RefreshUI(this DependencyObject obj)
 {
  obj.Dispatcher.Invoke(System.Windows.Threading.DispatcherPriority.Loaded, (Action)delegate { });
 }

And then before retrieving the height, I refresh the UI.

private double CalculateItemsHeight(int index)
 {
  ListBoxItem lbi = _box.ItemContainerGenerator.ContainerFromIndex(index) as ListBoxItem;
  if (lbi != null) {
   lbi.RefreshUI();
   return lbi.ActualHeight;
  }
  return 0;
 }