WPF ListBox WrapPanel clips long groups

Question

I've created a ListBox to display items in groups, where the groups are wrapped right to left when they can no longer fit within the height of the ListBox's panel. So, the groups would appear similar to this in the listbox, where each group's height is arbitrary (group 1, for instance, is twice as tall as group 2):

[ 1 ][ 3 ][ 5 ]
[   ][ 4 ][ 6 ]
[ 2 ][   ]

The following XAML works correctly in that it performs the wrapping, and allows the horizontal scroll bar to appear when the items run off the right side of the ListBox.

<ListBox> 
  <ListBox.ItemsPanel> 
    <ItemsPanelTemplate> 
      <StackPanel Orientation="Vertical"/> 
    </ItemsPanelTemplate> 
  </ListBox.ItemsPanel> 

  <ListBox.GroupStyle> 
    <ItemsPanelTemplate> 
      <WrapPanel Orientation="Vertical" 
                 Height="{Binding Path=ActualHeight, 
                          RelativeSource={RelativeSource 
                            FindAncestor, 
                            AncestorLevel=1, 
                            AncestorType={x:Type ScrollContentPresenter}}}"/> 
    </ItemsPanelTemplate> 
  </ListBox.GroupStyle> 
</ListBox>

The problem occurs when a group of items is longer than the height of the WrapPanel. Instead of allowing the vertical scroll bar to appear to view the cutoff item group, the items in that group are simply clipped. I'm assuming that this is a side effect of the Height binding in the WrapPanel - the scrollbar thinks it does not have to enabled.

Is there any way to enable the scrollbar, or another way around this issue that I'm not seeing?

Answer 1

I would think that you are correct that it has to do with the binding. What happens when you remove the binding? With the binding are you trying to fill up at least the entire height of the list box? If so, consider binding to MinHeight instead, or try using the VerticalAlignment property.

Answer 2

Thanks for answering, David.

When the binding is removed, no wrapping occurs. The WrapPanel puts every group into a single vertical column.

The binding is meant to force the WrapPanel to actually wrap. If no binding is set, the WrapPanel assumes the height is infinite and never wraps.

Binding to MinHeight results in an empty listbox. I can see how the VerticalAlignment property could seem to be a solution, but alignment itself prevents any wrapping from occurring. When binding and alignment are used together, the alignment has no effect on the problem.

Answer 3

By setting the Height property on the WrapPanel to the height of the ScrollContentPresenter, it will never scroll vertically. However, if you remove that Binding, it will never wrap, since in the layout pass, it has infinite height to layout in.

I would suggest creating your own panel class to get the behavior you want. Have a separate dependency property that you can bind the desired height to, so you can use that to calculate the target height in the measure and arrange steps. If any one child is taller than the desired height, use that child's height as the target height to calculate the wrapping.

Here is an example panel to do this:

public class SmartWrapPanel : WrapPanel
{
 /// <summary>
 /// Identifies the DesiredHeight dependency property
 /// </summary>
 public static readonly DependencyProperty DesiredHeightProperty = DependencyProperty.Register(
  "DesiredHeight",
  typeof(double),
  typeof(SmartWrapPanel),
  new FrameworkPropertyMetadata(Double.NaN, 
   FrameworkPropertyMetadataOptions.AffectsArrange |
   FrameworkPropertyMetadataOptions.AffectsMeasure));

 /// <summary>
 /// Gets or sets the height to attempt to be.  If any child is taller than this, will use the child's height.
 /// </summary>
 public double DesiredHeight
 {
  get { return (double)GetValue(DesiredHeightProperty); }
  set { SetValue(DesiredHeightProperty, value); }
 }

 protected override Size MeasureOverride(Size constraint)
 {
  Size ret = base.MeasureOverride(constraint);
  double h = ret.Height;

  if (!Double.IsNaN(DesiredHeight))
  {
   h = DesiredHeight;
   foreach (UIElement child in Children)
   {
    if (child.DesiredSize.Height > h)
     h = child.DesiredSize.Height;
   }
  }

  return new Size(ret.Width, h);
 }

 protected override System.Windows.Size ArrangeOverride(Size finalSize)
 {
  double h = finalSize.Height;

  if (!Double.IsNaN(DesiredHeight))
  {
   h = DesiredHeight;
   foreach (UIElement child in Children)
   {
    if (child.DesiredSize.Height > h)
     h = child.DesiredSize.Height;
   }
  }

  return base.ArrangeOverride(new Size(finalSize.Width, h));
 }
}

Answer 4

Here is the slightly modified code - all credit given to Abe Heidebrecht, who previously posted it - that allows both horizontal and vertical scrolling. The only change is that the return value of MeasureOverride needs to be base.MeasureOverride(new Size(ret.width, h)).

// Original code : Abe Heidebrecht
public class SmartWrapPanel : WrapPanel
{
  /// <summary>
  /// Identifies the DesiredHeight dependency property
  /// </summary>
  public static readonly DependencyProperty DesiredHeightProperty = DependencyProperty.Register(
    "DesiredHeight",
    typeof(double),
    typeof(SmartWrapPanel),
    new FrameworkPropertyMetadata(Double.NaN, 
            FrameworkPropertyMetadataOptions.AffectsArrange |
            FrameworkPropertyMetadataOptions.AffectsMeasure));

  /// <summary>
  /// Gets or sets the height to attempt to be.  If any child is taller than this, will use the child's height.
  /// </summary>
  public double DesiredHeight
  {
    get { return (double)GetValue(DesiredHeightProperty); }
    set { SetValue(DesiredHeightProperty, value); }
  }

  protected override Size MeasureOverride(Size constraint)
  {
    Size ret = base.MeasureOverride(constraint);
    double h = ret.Height;

    if (!Double.IsNaN(DesiredHeight))
    {
      h = DesiredHeight;
      foreach (UIElement child in Children)
      {
        if (child.DesiredSize.Height > h)
          h = child.DesiredSize.Height;
      }
    }

    return base.MeasureOverride(new Size(ret.Width, h));
  }

  protected override System.Windows.Size ArrangeOverride(Size finalSize)
  {
    double h = finalSize.Height;

    if (!Double.IsNaN(DesiredHeight))
    {
      h = DesiredHeight;
      foreach (UIElement child in Children)
      {
        if (child.DesiredSize.Height > h)
          h = child.DesiredSize.Height;
      }
    }

    return base.ArrangeOverride(new Size(finalSize.Width, h));
  }
}