The next panel is one that has been done before but before I extend it in the next chapter I wanted to explain how the original panel worked. Basically we take the number of children we have and divide 360 degrees by that number. This gives us our angle increment which we then use to calculate our X position. The Y position is calculated by using the Sine math function.

We expose a couple of properties such as Amplitude and AngularFrequency to provider further control over the math function. I chose Sine over Cosine because a Sine curve can be used to create a Cosine curve just by offsetting the StartPosition property by 180 degrees.

Below is the code required in the arrange override to make this possible.

protected override Size ArrangeOverride(Size finalSize)
{
    //double angleIncrement = Length / this.Children.Count;

    for (int i = 0; i < this.Children.Count; i++)
    {
        double centerX = finalSize.Width / 2; // ?
        double centerY = (finalSize.Height / 2)-(CalculateAverageItemHeight()/2); // ?

        double angleDeg = (StartPosition + (i * AngleIncrement));
        double angle = angleDeg * (Math.PI / 180.0);
        UIElement element = this.Children[i] as UIElement;
        element.Measure(finalSize);

        double x = (finalSize.Width / Children.Count) * i;
        double y = centerY + Amplitude * Math.Sin(AngularFrequency * angle);

        Rect r = new Rect(x, y, element.DesiredSize.Width, element.DesiredSize.Height);

        element.Arrange(r);
    }
    return base.ArrangeOverride(finalSize);
}

Again, like in Part I, we can apply a render stransform to create an interesting effect.

double rotateAngle = 0;
if (AllowItemRotation)
{
    rotateAngle = ItemRotationOffset + angleDeg;
}

RotateTransform trans = new RotateTransform();
trans.Angle = rotateAngle;
element.RenderTransform = trans;// new System.Windows.Media.RotateTransform(rotateAngle);
element.RenderTransformOrigin = new Point(0, 0);

You’ll notice that from this screen shot just by tweaking this 2D render transformation, we have created almost a camera trick in that it appears this line of zodiacs appears to be twisted.