Single Column Unscrollable Panel

Let’s say we have a GridView in Windows Store. We want the items arrange according to this:

  • Single column
  • No overflow / scrolling
  • Excess items should not be displayed (and no half displayed items on the bottom edge of the screen)

For some reason there is a no built-in panel that will do this. So I rolled my own. You can see the implementation below:

public class SingleColumnUnscrollablePanel : Panel
    protected override Size MeasureOverride(Size availableSize)
        var requiredHeight = 0.0;
        var remainingHeight = availableSize.Height;
        var largestDesiredWidth = 0.0;
        foreach (FrameworkElement child in Children)
            child.Measure(new Size(availableSize.Width, availableSize.Height));
            var desiredHeight = child.DesiredSize.Height;
            var desiredWidth = child.DesiredSize.Width;
            if (remainingHeight >= desiredHeight)
                largestDesiredWidth = Math.Max(largestDesiredWidth, desiredWidth);
                remainingHeight -= desiredHeight;
                requiredHeight += desiredHeight;
        return new Size(largestDesiredWidth, requiredHeight);
    protected override Size ArrangeOverride(Size finalSize)
        var availableHeight = finalSize.Height;
        var currentHeight = 0.0;
        var mychildren = Children;
        if (!mychildren.Any())
            return finalSize;
        var largestDesiredWidth = mychildren.Max(s => s.DesiredSize.Width);
        foreach (var child in mychildren)
            var desiredHeight = child.DesiredSize.Height;
            var desiredWidth = child.DesiredSize.Width;
            if (desiredHeight + currentHeight > availableHeight)
            child.Arrange(new Rect(0, currentHeight, desiredWidth, desiredHeight)); //largestDesiredWidth, desiredHeight));
            currentHeight += desiredHeight;
        return new Size(largestDesiredWidth, currentHeight);


Using it in a GridView:

<controls:SingleColumnUnscrollablePanel />

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s