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

Question

У меня есть элемент управления кнопки, шаблон которого стилизован во внешнем ресурсе Theme.xaml.Ниже определения контрольной таблицы:

    <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
     <Grid x:Name="Grid">
       <Border x:Name="Background" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="2,2,2,2" CornerRadius="2,2,2,2">
       <Border x:Name="Hover" Background="{StaticResource HoverBrush}" CornerRadius="1,1,1,1" Height="Auto" Width="Auto" Opacity="0"/>
       </Border>
       <StackPanel Orientation="Horizontal" Margin="2,2,2,2">
          <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True" />
       </StackPanel>

...

Теперь я добавил элемент, который является эллипсом, который должен быть заполнен красным или зеленым цветом (как семафор) в зависимости от пользовательского свойства, определенного в моем usercontrol:

<UserControl.Resources>
    <ResourceDictionary Source="Themes/theme.xaml"/>
</UserControl.Resources>

<Grid>
    <Button Click="Button_Click"></Button>

    <Ellipse x:Name="ellipse1" Width="20" Height="20"  Margin="5,40,45,5"></Ellipse>

</Grid>

и в следующем коде у меня есть:

private SolidColorBrush ButtonValue_;
public SolidColorBrush ButtonValue {
    get { return ButtonValue_; }
    set {
        ButtonValue_ = value;
    }
}

Я пытаюсь поместить в CONTROLTEMPLATE этот элемент эллипса, но у меня есть некоторые проблемы относительно того, как связать заполнение свойство эллипса с пользовательским свойством ButtonValue в controlTemplate.

Любые намеки ??Заранее спасибо

Answer 1

Вы можете пойти в нескольких направлениях:

1. Реализовать пользовательский элемент управления , который является вашим собственным классом, производным от существующего элемента управления (кнопка в вашем случае).Добавьте свойство зависимостей (например, ButtonValue).Примечание: свойство зависимости не является стандартным свойством .NET - их гораздо больше.Проверьте следующий пример: http://msdn.microsoft.com/en-us/library/cc295235(v=expression.30).aspx (пользовательская кнопка) или здесь: http://wpftutorial.net/HowToCreateACustomControl.html (более простой пример, но без свойства.

2. Естьконтекст данных для элемента управления. Обычно контекст данных является отдельным классом (он же «Модель представления»), но если вы не следуете парадигме mvvm, то все в порядке, контекст данных сам. Какой бы контекст данных вы не использовали, он должен быть производным от INotifyPropertyChanged и должен содержать событие PropertyChanged.

3. (рекомендуется!) Создать шаблон элемента управления для CheckBox . Когда вы задумаетесь об этом, логически ваш элемент управления на самом деле является кнопкой с бинарным состоянием. Красный / зеленый в вашем случае, Checked / Unchecked для CheckBox. Итак, логически, вы ищете флажок, но вы просто хотите представить егопо-разному.

Итак, в вашем шаблоне управления нарисуйте эллипс и добавьте триггер для свойства IsChecked:

<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type CheckBox}">
    <Grid>
        ... everything else in the control ...
        <Ellipse x:Name="ellipse1" Width="20" Height="20"  Margin="5,40,45,5" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter TargetName="ellipse1" Property="Fill" Value="Red" />
        </Trigger>
        <Trigger Property="IsChecked" Value="False">
            <Setter TargetName="ellipse1" Property="Fill" Value="Green" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Это хороший пример различиямежду поведение и представление WPF.Хотя ваш элемент управления может выглядеть как кнопка, он ведет себя как CheckBox, в том смысле, что он имеет два состояния.

EDIT: Используйте ToggleButton - это базовый класс CheckBox (иRadioButton), и он обладает именно той функциональностью, которая вам нужна, включая свойство IsChecked.

Answer 2

У вас есть несколько вариантов:

1. Самым простым является переназначение неиспользуемой кисти или цвета (с конвертером). Существующее свойство кнопки:

 <Window.Resources>
      <ControlTemplate x:Key="repurposedProperty" TargetType="Button">
        <Border Background="{TemplateBinding BorderBrush}">
          <ContentPresenter/>
        </Border>
       </ControlTemplate>
    </Window.Resources>

...

<Button Template="{StaticResource repurposedProperty}">Button</Button>

2.Другой вариант - определить вложенное свойство и использовать его в ControlTemplate. Для любой кнопки, к которой вы применяете шаблон, вы должны установить прикрепленное свойство:

public static readonly DependencyProperty AttachedBackgroundProperty =
            DependencyProperty.RegisterAttached("AttachedBackground", typeof (Brush), typeof (MainWindow), 
            new PropertyMetadata(default(Brush)));

        public static void SetAttachedBackground(UIElement element, Brush value)
        {
            element.SetValue(AttachedBackgroundProperty, value);
        }

        public static Brush GetAttachedBackground(UIElement element)
        {
            return (Brush) element.GetValue(AttachedBackgroundProperty);
        }

...

<</p>

Window.Resources>
        <ControlTemplate x:Key="attachedProperty" TargetType="Button">
            <Border Background="{TemplateBinding WpfApplication1:MainWindow.AttachedBackground}">
                <ContentPresenter/>
            </Border>
        </ControlTemplate>
    </Window.Resources>

...

<Button Template="{StaticResource attachedProperty}">
            <WpfApplication1:MainWindow.AttachedBackground>
                <SolidColorBrush Color="Pink"></SolidColorBrush>
            </WpfApplication1:MainWindow.AttachedBackground>
  Button</Button>

PS: вы можете использовать привязку для установки значения присоединенного свойства.