Building a reversible StackPanel in WPF

Question

I'd like to build a custom StackPanel with a ReverseOrder property that I can declaratively set to true to have the elements in the StackPanel appear in the opposite order of normal (eg bottom to top or right to left). It needs to be reversible on the fly.

I'm thinking of deriving a new class from StackPanel, but I need to know what methods to override.

Final solution:

protected override System.Windows.Size ArrangeOverride( System.Windows.Size arrangeSize ) {
    double x = 0;
    double y = 0;

    IEnumerable<UIElement> children = ReverseOrder ? InternalChildren.Cast<UIElement>().Reverse<UIElement>() : InternalChildren.Cast<UIElement>();
    foreach ( UIElement child in children ) {
        var size = child.DesiredSize;
        child.Arrange( new Rect( new Point( x, y ), size ) );

        if ( Orientation == Orientation.Horizontal )
            x += size.Width;
        else
            y += size.Height;
    }

    if ( Orientation == Orientation.Horizontal )
        return new Size( x, arrangeSize.Height );
    else
        return new Size( arrangeSize.Width, y );
}

Also define and register ReverseOrder and call UpdateLayout if it changes.

Answer 1

You can reimplement FrameworkElement.ArrangeOverride and invoke all the child.Arrange in the reverse order than usual when necessary.

http://msdn.microsoft.com/en-us/library/system.windows.uielement.arrange.aspx

Something like this (not tested):

    double x = 0;
    double y = 0;

    var children = ReverseOrder ? InternalChildren.Reverse() : InternalChildren;
    foreach (UIElement child in children)
    {
        var size = child.DesiredSize;
        child.Arrange(new Rect(new Point(x, y), size));

        if (Orientation == Horizontal)
            x += size.Width;
        else
            y += size.Height;
    }

Make sure you invoke UpdateLayout after changing ReverseOrder property.

Answer 2

MeasureOverride and ArrangeOverride

Actually, your measure logic may be the same as StackPanel, so you might be able to just override ArrangeOverride. Be aware that StackPanel has some logic to handle scrolling that you may need to duplicate if you write it yourself. You may want to inherit directly from Panel and not attempt to support scrolling.

See Custom Panel Elements in the MSDN page on Panels or various blog entries on writing custom panels such as WPF Tutorial - Creating A Custom Panel Control or Creating Custom Panels In WPF .

Answer 3

Here's another variant. It is based on StackPanel 's reference source and is able to deal with item alignments as well.

public class ReversibleStackPanel : StackPanel
{
    public bool ReverseOrder
    {
        get => (bool)GetValue(ReverseOrderProperty);
        set => SetValue(ReverseOrderProperty, value);
    }

    public static readonly DependencyProperty ReverseOrderProperty =
        DependencyProperty.Register(nameof(ReverseOrder), typeof(bool), typeof(ReversibleStackPanel), new PropertyMetadata(false));


    protected override Size ArrangeOverride(Size arrangeSize)
    {
        bool fHorizontal = (Orientation == Orientation.Horizontal);
        var  rcChild = new Rect(arrangeSize);
        double previousChildSize = 0.0;

        var children = ReverseOrder ? InternalChildren.Cast<UIElement>().Reverse() : InternalChildren.Cast<UIElement>();
        foreach (UIElement child in children)
        {
            if (child == null)
                continue;

            if (fHorizontal)
            {
                rcChild.X += previousChildSize;
                previousChildSize = child.DesiredSize.Width;
                rcChild.Width = previousChildSize;
                rcChild.Height = Math.Max(arrangeSize.Height, child.DesiredSize.Height);
            }
            else
            {
                rcChild.Y += previousChildSize;
                previousChildSize = child.DesiredSize.Height;
                rcChild.Height = previousChildSize;
                rcChild.Width = Math.Max(arrangeSize.Width, child.DesiredSize.Width);
            }

            child.Arrange(rcChild);
        }

        return arrangeSize;
    }
}