Silverlight Star Polyline – Back to school geometry.

So today I wanted to create a Favorites button that would highlight/deem when a favorite node is or not selected. And as we are running some math/geometry whiteboard sessions from time to time here in Valtera I decided to polish my brain a bit with only using calculator for the following:

cos 36d = 0.809, sin 36d = 0.588, cos 18d = 0.951, sin 18d = 0.309

In order to see my mistakes I had to setup some visual test bench:

which would be a circle divided by 72 degrees and then again by 72 with shift of 36. I decided to go with outer radius of 100 and inner of 40.

And here is the final result:

Giving the polyline of:

<Polyline Points="100,0,123.52,67.64 123.52,67.64,195.1,69 
195.1,69,138.04,112.36 138.04,112.36,158.8,180.09 158.8,180.09,100,140 
100,140,41.2,180.09 41.2,180.09,61.98,112.6 61.98,112.6,4.9,69 
4.9,69,76.48,67.64 76.48,67.64,100,0" Stroke="Green" />

Following are the bench and polyline xaml:

<Grid x:Name="LayoutRoot" Background="White">

        <Ellipse Fill="#FFF4F4F5" Width="200" Height="200" Stroke="Black" />

        <Ellipse Fill="#FFF4F4F5" Width="80" Height="80" Stroke="Black"/>

        <Line X1="100" Y1="100" X2="100"  Y2="0" Stroke="Black"/>

        <Line X1="100" Y1="100" X2="100"  Y2="0" RenderTransformOrigin="0.5,0.5" Stroke="Black">

            <Line.RenderTransform>

                <CompositeTransform Rotation="72"/>

            </Line.RenderTransform>

        </Line>

        <Line X1="100" Y1="100" X2="100"  Y2="0" RenderTransformOrigin="0.5,0.5" Stroke="Black">

            <Line.RenderTransform>

                <CompositeTransform Rotation="144"/>

            </Line.RenderTransform>

        </Line>

        <Line X1="100" Y1="100" X2="100"  Y2="0"  RenderTransformOrigin="0.5,0.5" Stroke="Black">

            <Line.RenderTransform>

                <CompositeTransform Rotation="216"/>

            </Line.RenderTransform>

        </Line>

        <Line X1="100" Y1="100" X2="100"  Y2="0" RenderTransformOrigin="0.5,0.5" Stroke="Black">

            <Line.RenderTransform>

                <CompositeTransform Rotation="288"/>

            </Line.RenderTransform>

        </Line>

        <Line X1="100" Y1="100" X2="100"  Y2="0" RenderTransformOrigin="0.5,0.5" Stroke="Blue">

            <Line.RenderTransform>

                <CompositeTransform Rotation="36"/>

            </Line.RenderTransform>

        </Line>

        <Line X1="100" Y1="100" X2="100"  Y2="0" RenderTransformOrigin="0.5,0.5" Stroke="Blue">

            <Line.RenderTransform>

                <CompositeTransform Rotation="108"/>

            </Line.RenderTransform>

        </Line>

        <Line X1="100" Y1="100" X2="100"  Y2="0"  RenderTransformOrigin="0.5,0.5" Stroke="Blue">

            <Line.RenderTransform>

                <CompositeTransform Rotation="180"/>

            </Line.RenderTransform>

        </Line>

        <Line X1="100" Y1="100" X2="100"  Y2="0" RenderTransformOrigin="0.5,0.5" Stroke="Blue">

            <Line.RenderTransform>

                <CompositeTransform Rotation="250"/>

            </Line.RenderTransform>

        </Line>

            <Line X1="100" Y1="100" X2="100"  Y2="0" RenderTransformOrigin="0.5,0.5" Stroke="Blue">

            <Line.RenderTransform>

                <CompositeTransform Rotation="324"/>

            </Line.RenderTransform>

        </Line>

            <Polyline Points="100,0,123.52,67.64 123.52,67.64,195.1,69
 195.1,69,138.04,112.36 138.04,112.36,158.8,180.09 
158.8,180.09,100,140 100,140,41.2,180.09 41.2,180.09,61.98,112.6 
61.98,112.6,4.9,69 4.9,69,76.48,67.64 76.48,67.64,100,0" Stroke="Green" />

    </Grid>

If we want a smaller star  , we can just divide all points by factor (like 10):

<Polyline Fill="Yellow" Points="10,0,12.352,6.764 12.352,6.764,19.51,6.9 

19.51,6.9,13.804,11.236 13.804,11.236,15.88,18.009 15.88,18.009,10.0,14.0 

10.0,14.0,4.12,18.009 4.12,18.009,6.198,11.26 6.198,11.26,0.49,6.9 

0.49,6.9,7.648,6.764 7.648,6.764,10.0,0" Stroke="Black"/>