如何绑定到EllipseGeometry的Center属性?

时间:2014-07-02 14:43:39

标签: wpf xaml wpf-controls

我正在尝试在自定义控件内部移动一个Ellipse,我关心它的中心点,所以我在EllipseGeometry内部使用Path而不是使用Ellipse它自己的。

所以我创建了这个自定义控件(CenterPoint被编码为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

此类的默认样式(EllipseGeometry的Center绑定到控件中的CenterPoint):

<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>

将我的RippleButton放在WPF窗口上时,红色椭圆始终位于左上角而不是100,100。这里发生了什么,如何让它移动到类中定义的CenterPoint?

1 个答案:

答案 0 :(得分:1)

不知道为什么它确实与TemplateBinding一起使用,但您可以使用常规绑定替换它:

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