如何在自定义模板中使用自定义属性？

Question

假设要创建一个左侧有一个小椭圆的自定义按钮。 我希望这个椭圆的颜色是数据可绑定的。

所以我启动了 Blend 并在表面上放了一个按钮 Edit a Copy of the Template。 我现在有了我的自定义模板，我在里面放了一个小的Ellipse：

...

<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3">
  <Grid Background="{TemplateBinding Background}" Margin="1">
    <snip   />

    <!-- My ellipse here -->
    <Ellipse x:Name="ellipse" Width="10" Height="10" HorizontalAlignment="Left" />
  </Grid>
</Border>

...

我右键单击此按钮并选择名为MyButton 的Make into UserControl。 在此按钮后面的代码中，我添加了一个自定义 dependency property for theBrush`：

public Brush MyColor
{
  get { return (Brush)GetValue(MyColorProperty); }
  set { SetValue(MyColorProperty, value); }
}

public static readonly DependencyProperty MyColorProperty = DependencyProperty.Register("MyColor", typeof(Brush), typeof(MyButton), new PropertyMetadata(new opertyChangedCallback(MyColorPropertyChanged)));

private static void MyColorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
  var thisControl = d as MyButton;
}

然后我可以使用我的自定义按钮：

<local:MyButton Width="130" MyColor="Red"/>

但后来我被困住了。如何将我的 Ellipse 颜色（上面的 x:Name="ellipse"）绑定到我的 MyColor 属性？

编辑：所以我使用 Fill={TemplateBinding MyColor} 绑定用户控件中的 Fill 属性，但随后我得到 Property MyColor was not found in type Button。 好的，所以我需要将我的模板定位到自定义 MyButton 类型，但我该怎么做呢？ 我可以简单地将 Button 更改为 MyButton，因为这样我会得到 Property 'ContentTemplate' was not found in type 'MyButton'

<UserControl
 <snip/>
 x:Class="SilverlightApplication1.MyButton">
  <UserControl.Resources>
    <Style x:Key="ButtonStyle1" TargetType="Button">
      <snip/>
    </Style>
  </UserControl.Resources>

  <Grid x:Name="LayoutRoot">
    <Button Content="Test Button" Style="{StaticResource ButtonStyle1}"/>
  </Grid>
</UserControl>

Answer 1

这里的问题是UserControl 不是您控制的正确基础。您应该创建一个模板化控件。

在 Visual Studio 中，将新的“Silverlight 模板控件”添加到名为 MyButton 的项目中。

打开 MyButton.cs 并将其基类更改为 Button。将您的 MyColor 依赖属性放入代码中。

打开 Themes/Generic.xaml 并找到为这个新的MyButton 控件放置的默认样式。用您的模板替换该样式中的Template。现在模板中的Fill="{TemplateBinding MyColor}" 可以使用了。

Answer 2

好的，首先，您的MyButton 控件应该有一个DependencyProperty，比如MyColor——你有吗？在您的模板中，您应该使用TemplateBinding 绑定到该属性。在使用您的控件的 XAML 中，您可以像现在一样使用它：<local:MyButton Width="130" MyColor="Red"/>

您的模板似乎缺少模板绑定：

<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}"...>
    <Grid Background="{TemplateBinding Background}" Margin="1">
        ...
        <Ellipse x:Name="ellipse" Width="10" Height="10" HorizontalAlignment="Left"
                 Fill="{TemplateBinding MyColor}" />
    </Grid>
</Border>

顺便说一句，MyColor 应该是真正的Brush，而不仅仅是Color。