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

Question

Let's say a want to create a custom button that has a small ellipse on the left hand side. I want the color of this ellipse to be data bindable.

So I fire up Blend and put a button on the surface and Edit a Copy of the Template . I now have my custom template, and I put a small little Ellipse inside it:

...

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

...

I right click this button and select Make into UserControl named MyButton . In the code behind for this button I add a custom dependency property for the Brush`:

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

I can then use my custom button:

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

But then I'm stuck. How do I bind my Ellipse color (x:Name="ellipse" above) to my MyColor property?

EDIT: So I bind the Fill property in the user control using Fill={TemplateBinding MyColor} , but then I get Property MyColor was not found in type Button . Ok, so I need to target my template to the custom MyButton type, but how can I do that? I can simply change Button to MyButton, because then I get 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

Okay, first of all, your MyButton control should have a DependencyProperty, say, MyColor -- do you have it? In your template, you should bind to that property using TemplateBinding . In the XAML using your control you use it just as you are doing: <local:MyButton Width="130" MyColor="Red"/>

It seems that your template is missing the template binding:

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

By the way, MyColor should be really a Brush , not just a Color .

Answer 2

The problem here is that UserControl is not the right basis for your control. You ought to be creating a Templated control.

In Visual Studio add new "Silverlight Templated Control" to your project called MyButton .

Open MyButton.cs and change its base class to Button . Drop into the code your MyColor dependency property.

Open Themes/Generic.xaml and find the default style that has been placed there for this new MyButton control. Replace the Template in that style with your template. Now the Fill="{TemplateBinding MyColor}" in your template will work.