title: Setting correct margin for an object in a circle
body: <p>I'm making a tree visualizer by making buttons for each node. I start with the root node named "Start". I'm trying to animate when I click a node (I.E.: the root), it will open the children.</p>
  
  <p><a href="https://i.stack.imgur.com/qnSuC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qnSuC.png" alt="Root"></a></p>
  
  <p>When Clicked, I want the children to open in a circle. Right now, this is what it looks like after the start button is clicked:</p>
  
  <p><a href="https://i.stack.imgur.com/ctX9l.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ctX9l.jpg" alt="After clicking"></a></p>
  
  <p>Note that the start button didn't move.</p>
  
  <p>The animate code looks like these:</p>
  
  <pre><code>private void animateNode(double newX, double newY, Button toAnimate)
      {
          ThicknessAnimation slide = new ThicknessAnimation();
          slide.From = toAnimate.Margin;                                 // get current grid location
          slide.To = new Thickness(newX, newY, 0, 0);                    // set new grid location
  
          slide.Duration = new Duration(TimeSpan.FromSeconds(0.5));     // set translation time
          toAnimate.BeginAnimation(Button.MarginProperty, slide);          // animate movement
      }
  </code></pre>
  
  <p>The code that calls this animate function is this:</p>
  
  <pre><code>    count = filteredStruct.Children.Count;
      double degree = 360 / count;
      ...
                  while (i &lt; j)
                  {
                      if (filteredStruct.ElementAt(i).Data[1].Equals("\\N"))
                      {
                          animateNode(butList[i].Margin.Left + (Double)(350 * Math.Cos((Math.PI / 180) * k * degree)), butList[i].Margin.Top + (Double)(350 * Math.Sin((Math.PI / 180) * k * degree)), butList[i]);
                          k++;
                      }
                      i++;
                  } 
  </code></pre>
  
  <p>Buttons are created manually in code like these:</p>
  
  <pre><code>                if (filteredStruct.ElementAt(i).Data.Count == 4)    //Nodes
                  {
                      butList[i].Style = (Style)FindResource("NodeOrange");
                      butList[i].FontSize = 16;
                      butList[i].Height = 100;
                      butList[i].Width = 100;
                      butList[i].Content = filteredStruct.ElementAt(i).Data[2];
                      Canvas.SetLeft(butList[i], (customCanvas.Width / 2) - butList[i].Width / 2);
                      Canvas.SetTop(butList[i], (customCanvas.Height / 2) - butList[i].Height / 2);
                      customCanvas.Children.Add(butList[i]);
                  }
  </code></pre>
  
  <p>I'm thinking that it is skewed on the right because my anchor is the top left corner of the button and the left side and the top right corners are not getting moved correctly proportional. </p>
  
  <p>Any suggestions to fix these? This is only the first level of the node so I'm worried I might need more calculation to convert the position from the margin to the real centered position of the button.</p>