title: How can I bind to the Center property of an EllipseGeometry?
body: <p>I am trying to move an Ellipse around inside of a custom control, and I care about it's center point so I am using <code>EllipseGeometry</code> inside of a <code>Path</code> instead of using <code>Ellipse</code> on its own.</p>
  
  <p>So I created this custom control (CenterPoint is harded coded to 100,100):</p>
  
  <pre><code>Public Class RippleButton
    Inherits ButtonBase
  
      Shared Sub New()
      DefaultStyleKeyProperty.OverrideMetadata(GetType(RippleButton), New FrameworkPropertyMetadata(GetType(RippleButton)))
    End Sub
  
    Public Sub New()
      MyBase.New()
  
      CenterPoint = New Point(100, 100)
    End Sub
  
  
    Public Property CenterPoint As Point
      Get
        Return DirectCast(GetValue(CenterPointProperty), Point)
      End Get
      Set(ByVal value As Point)
        SetValue(CenterPointProperty, value)
      End Set
    End Property
  
    Public Shared ReadOnly CenterPointProperty As DependencyProperty = 
                           DependencyProperty.Register("CenterPoint", _
                           GetType(Point), GetType(RippleButton))
  
  End Class
  </code></pre>
  
  <p>The default style for this class (EllipseGeometry's Center is bound to CenterPoint in the control):</p>
  
  <pre><code>&lt;Style TargetType="{x:Type local:RippleButton}"&gt;
    &lt;Setter Property="Template"&gt;
      &lt;Setter.Value&gt;
        &lt;ControlTemplate TargetType="{x:Type local:RippleButton}"&gt;
          &lt;Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"&gt;
            &lt;Path Fill="Red" ClipToBounds="True"&gt;
              &lt;Path.Data&gt;
                &lt;EllipseGeometry Center="{TemplateBinding CenterPoint}"
                                 RadiusX="100"
                                 RadiusY="100" /&gt;
              &lt;/Path.Data&gt;
            &lt;/Path&gt;
          &lt;/Border&gt;
        &lt;/ControlTemplate&gt;
      &lt;/Setter.Value&gt;
    &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>When put my RippleButton on a WPF window, the red ellipse is always in the top left corner instead of 100,100. What is going on here and how do I get it to move to the CenterPoint that is defined in the class?</p>