How to bind Fill property to a custom property into a controltemplate

Question

I have a button control which its template is stilyzed in an external resource Theme.xaml. Below the controltemplate definition:

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

...

Now I added an item which is an ellipse that must be filled with red or green color (as a semaphore) depending on a custom property defined into my 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>

and in the behind code I have:

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

I'm trying to put into the CONTROLTEMPLATE this ellipse item, but i have some problems regarding how to BIND the Fill property of the ellipse with the ButtonValue custom property into the controlTemplate.

Any hints?? Thanks in advance

Answer 1

You can go to several directions:

1. Implement a custom control, that is your own class derived from an existing control (Button in your case). Add a dependency property (e.g. ButtonValue). Note - dependency property aren't standard .NET property - they have much more. Check out the following sample: http://msdn.microsoft.com/en-us/library/cc295235(v=expression.30).aspx (A custom button), or here: http://wpftutorial.net/HowToCreateACustomControl.html (A simpler sample, but without a property.

2. Have a data context for the control. Typically the data context is a separate class (a.k.a. the "View Model"), but if you aren't following the mvvm paradigm, it is OK the data context is self. Whatever data context you are using, it must derived from INotifyPropertyChanged, and it must file PropertyChanged event.

3. (Recommended!) Create a Control Template for CheckBox. When you come to think about it, logically your control is really a button with a binary state. Red/Green in your case, Checked/Unchecked for a CheckBox. So logically, you are looking for a checkbox, but you just want to present it differently.

So in your control template, draw the ellipse, and add a trigger for the IsChecked property:

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

This is a nice example for the difference between behavior and presentation of WPF. While your control may look like a button, it behaves like a CheckBox, in the sense that it has two states.

EDIT: Use ToggleButton - this is the base class of CheckBox (and RadioButton), and it has exactly the functionality that you need, including the IsChecked property.

Answer 2

You have a couple of options:

1.The easiest one is to re-purpose an unused Brush or Color(with a converter) Button existing property:

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

...

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

2.Other option is to define an attached property and use it in the ControlTemplate. On any Button that you apply the template to you have to set the attached property:

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

...

<

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: you can use a binding to set the value of the attached property.