Problems with Arc class in Microsoft.Expression.Shapes namespace

See more:

C#

XML

WPF

Silverlight

I apologize in advance if I'm posting in the wrong forum, my question is about half and half on XML and C#. I am trying to draw a pie chart using the Arc class from the Microsoft.Expression.Shapes namespace. This works correctly in WPF when the Arcs are defined in XML with the following code:

<Grid Grid.Row="0" x:Name="primaryGrid">
            <ed:Arc x:Name="pieSlice1" ArcThickness="1" ArcThicknessUnit="Percent" Fill="Green" HorizontalAlignment="Left" VerticalAlignment="Stretch" Stretch="None" Stroke="Black" UseLayoutRounding="False" Width="204" Height="204" Margin="0" ToolTipService.ToolTip="Text"/>
            <TextBlock x:Name="pie1TextBlock" FontSize="18" Height="26" Margin="0,51,47,0" TextWrapping="NoWrap" VerticalAlignment="Top" HorizontalAlignment="Right" Width="121"/>
            <Rectangle Fill="Green" Height="20" Width="20" Margin="294,55,189,0" Stroke="Black" VerticalAlignment="Top"/>

            <ed:Arc x:Name="pieSlice2" ArcThickness="1" ArcThicknessUnit="Percent" Fill="Blue" HorizontalAlignment="Left" Stretch="None" Stroke="Black" UseLayoutRounding="False" Width="204" Height="204" Margin="0"/>
            <TextBlock x:Name="pie2TextBlock" FontSize="18" Height="26" Margin="0,86,47,0" TextWrapping="NoWrap" VerticalAlignment="Top" HorizontalAlignment="Right" Width="121"/>
            <Rectangle Fill="Blue" Height="20" Width="20" Margin="294,90,189,0" Stroke="Black" VerticalAlignment="Top"/>
        </Grid>

Using XML, the items line up correctly and create a full circle for my pie graph (i.e., the Start and End angles work as defined), even when I draw the segments in C# code, such as:

double[] itemsArray = new double[arraySize] { 12.5, 25.0, 6.25, 6.25, 10.0, 8.8, 11.2, 20 };
        
            Arc[] sliceArray = new Arc[arraySize] {pieSlice1, pieSlice2, pieSlice3, pieSlice4, pieSlice5, pieSlice6, pieSlice7, pieSlice8};
            TextBlock[] textArray = new TextBlock[arraySize] { pie1TextBlock, pie2TextBlock, pie3TextBlock, pie4TextBlock, pie5TextBlock, pie6TextBlock, pie7TextBlock, pie8TextBlock };

            for (int counter = 0; counter < 8; counter++)
            {
                endAngle = endAngle + itemsArray[counter] / 100 * 360;

                sliceArray[counter].StartAngle = beginAngle;
                sliceArray[counter].EndAngle = endAngle;

                textArray[counter].Text = (((endAngle - beginAngle) / 360) * 100).ToString() + "%";

                beginAngle = endAngle;
            }

However, when I create the arcs dynamically in C# code instead of defining them in WPF, the arcs end up stacked on top of each other:

Arc arc = new Arc();
            arc.HorizontalAlignment = HorizontalAlignment.Left;
            arc.VerticalAlignment = VerticalAlignment.Stretch;
            arc.Stroke = Brushes.Black;
            arc.StrokeThickness = 1;
            arc.ArcThickness = 20;
            arc.UseLayoutRounding = false;
            arc.Fill = Brushes.Blue;
            arc.Margin = new Thickness(0);
            arc.Height = 50;
            arc.Width = 50;
            arc.StartAngle = 0;
            arc.EndAngle = 90;
            arc.ToolTip = new ToolTip();
            arc.ToolTip = "Blue Text";

            Arc arc2 = new Arc();
            arc2.HorizontalAlignment = HorizontalAlignment.Left;
            arc2.VerticalAlignment = VerticalAlignment.Stretch;
            arc2.Stroke = Brushes.Black;
            arc2.StrokeThickness = 1;
            arc2.ArcThickness = 20;
            arc2.UseLayoutRounding = false;
            arc2.Fill = Brushes.Green;
            arc2.Margin = new Thickness(0);
            arc2.Height = 50;
            arc2.Width = 50;
            arc2.StartAngle = 90;
            arc2.EndAngle = 201;
            arc2.ToolTip = new ToolTip();
            arc2.ToolTip = "Green Text";

            Arc arc3 = new Arc();
            arc3.HorizontalAlignment = HorizontalAlignment.Left;
            arc3.VerticalAlignment = VerticalAlignment.Stretch;
            arc3.Stroke = Brushes.Black;
            arc3.StrokeThickness = 1;
            arc3.ArcThickness = 20;
            arc3.Fill = Brushes.Yellow;
            arc3.Margin = new Thickness(0);
            arc3.Height = 50;
            arc3.Width = 50;
            arc3.StartAngle = 201;
            arc3.EndAngle = 234;
            arc3.ToolTip = new ToolTip();
            arc3.ToolTip = "Yellow Text";

            Arc arc4 = new Arc();
            arc4.HorizontalAlignment = HorizontalAlignment.Left;
            arc4.VerticalAlignment = VerticalAlignment.Stretch;
            arc4.Stroke = Brushes.Red;
            arc4.StrokeThickness = 1;
            arc4.ArcThickness = 20;
            arc4.Fill = Brushes.Yellow;
            arc4.Margin = new Thickness(0);
            arc4.Height = 50;
            arc4.Width = 50;
            arc4.StartAngle = 234;
            arc4.EndAngle = 360;
            arc4.ToolTip = new ToolTip();
            arc4.ToolTip = "Red Text";

            Canvas canvas = new Canvas();

            canvas.Margin = new Thickness(50);
            canvas.Height = 300;
            canvas.Width = 300;

            canvas.Children.Add(arc);
            canvas.Children.Add(arc2);
            canvas.Children.Add(arc3);
            canvas.Children.Add(arc4);

      
            this.Content = canvas;

I'm not sure if it's the difference between a canvas and a grid, but I'm having much trouble getting the pie slices to line up. I am trying to avoid setting the margins of the canvas, or defining a set number of arcs in WPF.

I guess I'm confused as to what the difference is between the C# code used to generate the arcs in a canvas and the WPF code used to create the arc in a grid? How could I set the output of the arcs to a grid?