This next panel demonstrates that truly any mathematical algorithm can be leveraged to efficiently produce custom layout logic. In this case rather than using the boring old circular panel trick I thought I would pick a new algorithm to see what its affect was. I chose Fermat’s Spiral. Fermat’s spiral takes in two parameters: a radius and an angle.

Taken straight from Wikipedia, the source of all truth known to man [sic], where theta is the angle, r is the radius or distance from the center, n is the index number of the floret and c is a constant scaling factor. The constant that you see, 137.508, dubbed the “golden angle”, is actually one of those magically numbers in math whose meaning I don’t fully understand.

In my C# implementation below, I am mapping a property “Scalar” in for c, the index of this element in for n, and a property “Angle” in for the golden angle just to spice things up.

        protected override Size ArrangeOverride(Size finalSize)
        {
            int index = 0;
            foreach (UIElement child in this.Children)
            {
                double goldenAngle = 137.5;

                double r = Scalar * Math.Sqrt(index);
                double theta = index * Angle; // in degrees

                double centerX = (finalSize.Width / 2) - (CalculateAverageItemWidth()/2); // ?
                double centerY = (finalSize.Height /2) - (CalculateAverageItemHeight()/2); // ?
                
                double x = centerX + r * Math.Cos(theta);
                double y = centerY + r * Math.Sin(theta);

                Rect childRect = new Rect();

                child.Measure(finalSize);
                if (_firstArrange)
                {
                    childRect.X = 0;
                    childRect.Y = 1500;
                    childRect.Width = child.DesiredSize.Width;
                    childRect.Height = child.DesiredSize.Height;
                }
                else
                {
                    childRect.X = x;
                    childRect.Y = y;
                    childRect.Width = child.DesiredSize.Width;
                    childRect.Height = child.DesiredSize.Height;
                }

                child.Arrange(childRect); 

                if (_firstArrange && this.Children.Count > 0)
                {
                    _firstArrange = false;
                    this.InvalidateMeasure();
                }

                index++;
            }
            return base.ArrangeOverride(finalSize);
        }

Here are a few of my favorite configurations of this panel:

The “Archemedian”

Angle = 119.7

The “Wave”

Angle = 72.1

The “3 Way”

Angle = 60.67

There are literally millions of different configurations of Fermat’s spiral. So have some fun and start tinkering!