Как я могу использовать пользовательское свойство в пользовательском шаблоне?

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>

...

Я щелкаю правой кнопкой мыши по этой кнопке и выбираю Make into UserControl с именем MyButton. В коде этой кнопки я добавляю пользовательский 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;
}

Затем я могу использовать свою пользовательскую кнопку:

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

Но тогда я застрял. Как связать мой цвет эллипса (x: Name = "ellipse" выше) с моим MyColor свойством?

EDIT: поэтому я связываю свойство Fill в пользовательском элементе управления, используя Fill={TemplateBinding MyColor}, но затем получаю Property MyColor was not found in type Button. Итак, мне нужно настроить свой шаблон на пользовательский тип MyButton, но как я могу это сделать? Я могу просто изменить кнопку на 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 Templated Control» в ваш проект под названием 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.