CODEWITHSUNDEEP
wpfxamlwpf-controls
Nick
Nick

Reputation: 4766

How can I bind to the Center property of an EllipseGeometry?

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 EllipseGeometry inside of a Path instead of using Ellipse on its own.

So I created this custom control (CenterPoint is harded coded to 100,100):

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

The default style for this class (EllipseGeometry's Center is bound to CenterPoint in the control):

<Style TargetType="{x:Type local:RippleButton}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:RippleButton}">
        <Border Background="{TemplateBinding Background}"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}">
          <Path Fill="Red" ClipToBounds="True">
            <Path.Data>
              <EllipseGeometry Center="{TemplateBinding CenterPoint}"
                               RadiusX="100"
                               RadiusY="100" />
            </Path.Data>
          </Path>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

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?

Upvotes: 3

Views: 2144

Answers (1)

Clemens
Clemens

Reputation: 128145

No idea why exactly it won't work with a TemplateBinding, but you could replace that with a regular binding:

<EllipseGeometry
    Center="{Binding CenterPoint, RelativeSource={RelativeSource TemplatedParent}}"
    RadiusX="100" RadiusY="100" />

Upvotes: 2

Related Questions