How can I use a Custom Property within a Custom Template?

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

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>

---

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.

---

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.