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:

Name Angle
The “Archemedian” 119.7°
The “Wave” 72.1°
The “3 Way” 60.67°

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