Silverlight Custom Panels Part III : Sine Panel

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;

                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);

            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 tw


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 )

Google+ photo

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

Connecting to %s