title: Setting Border background with a template binding
body: <p>Value="{TemplateBinding HeaderColor}"I've created my own control, and I'm wondering if I can bind a Border.Background to a template property. Currently i'm setting it with a StaticResource like the following:</p>
  
  <pre><code>&lt;Color x:Key="ControlMouseOverColor"&gt;green&lt;/Color&gt;
  
  &lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="headerLayout"&gt;
      &lt;EasingColorKeyFrame KeyTime="0:0:6" Value="{StaticResource ControlMouseOverColor}" /&gt;
  &lt;/ColorAnimationUsingKeyFrames&gt;
  </code></pre>
  
  <p>I'd like it be a property on my control, and be able to set it as a template binding</p>
  
  <pre><code>&lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="headerLayout"&gt;
      &lt;EasingColorKeyFrame KeyTime="0:0:6" Value="{TemplateBinding HeaderColor}" /&gt;
  &lt;/ColorAnimationUsingKeyFrames&gt;
  </code></pre>
  
  <p>MainPage.xaml</p>
  
  <pre><code>&lt;ctrl:Selection Grid.Column="0" HeaderColor="Red" HeaderText="Header Text" /&gt;
  </code></pre>
  
  <p>my class:</p>
  
  <pre><code>public static readonly DependencyProperty HeaderColorProperty =
          DependencyProperty.Register("HeaderColor", typeof(System.Windows.Media.Color), typeof(Selection), new PropertyMetadata(System.Windows.Media.Colors.Red));
  
  public  System.Windows.Media.Color HeaderColor {
      get { return (System.Windows.Media.Color)GetValue(HeaderColorProperty); }
      set { SetValue(HeaderColorProperty, value); }
  }
  </code></pre>
  
  <p>This 2nd option does not work, should I be able to do this? I don't get an error, it just does not change to the color I set.</p>
  
  <p>Comment left by AngelWPF asked for more code, pasting below, I'm in the beginning stages of learning to create a control, wanted to note that, because there is a lot I have not got to yet, one piece at a time :)</p>
  
  <p>generic.xaml</p>
  
  <pre><code>&lt;ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:controls="clr-namespace:SelectionControl.Library"
  xmlns:ctrl="clr-namespace:SelectionControl.Library;assembly=SelectionControl"&gt;
  
  &lt;LinearGradientBrush x:Key="HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0"&gt;
      &lt;GradientStop Color="Black" Offset="0" /&gt;
      &lt;GradientStop Color="Gray" Offset="1" /&gt;
  &lt;/LinearGradientBrush&gt;
  
  &lt;Color x:Key="ControlMouseEnterColor"&gt;aliceblue&lt;/Color&gt;
  &lt;Color x:Key="ControlMouseLeaveColor"&gt;Gray&lt;/Color&gt;
  &lt;Color x:Key="ControlLeftMouseUpColor"&gt;Red&lt;/Color&gt;
  
  &lt;Style TargetType="ctrl:Selection"&gt;
      &lt;Setter Property="Width" Value="Auto" /&gt;
      &lt;Setter Property="Height" Value="Auto" /&gt;
      &lt;Setter Property="FontSize" Value="12" /&gt;
      &lt;Setter Property="FontWeight" Value="Bold" /&gt;
      &lt;Setter Property="Foreground" Value="AliceBlue" /&gt;
      &lt;Setter Property="Margin" Value="2,2,2,2" /&gt;
  
      &lt;Setter Property="Background" Value="{StaticResource ResourceKey=HeaderBackground}" /&gt;
  
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="ctrl:Selection"&gt;
                  &lt;Grid x:Name="RootElement" Margin="{TemplateBinding Margin}"&gt;
                      &lt;!-- Visual States --&gt;
                       &lt;VisualStateManager.VisualStateGroups&gt;
                            &lt;VisualStateGroup x:Name="CommonStates"&gt;
                              &lt;VisualState x:Name="MouseEnter"&gt;
                                &lt;Storyboard&gt;
                                      &lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="headerLayout"&gt;
                                          &lt;EasingColorKeyFrame KeyTime="0:0:.5" Value="{TemplateBinding HeaderColor}" /&gt;
                                      &lt;/ColorAnimationUsingKeyFrames&gt;
                                &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="MouseLeave"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="headerLayout"&gt;
                                          &lt;EasingColorKeyFrame KeyTime="0:0:1" Value="{StaticResource ControlMouseLeaveColor}" /&gt;
                                      &lt;/ColorAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="MouseLeftUp"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="headerLayout"&gt;
                                          &lt;EasingColorKeyFrame KeyTime="0:0:1" Value="{StaticResource ControlLeftMouseUpColor}" /&gt;
                                      &lt;/ColorAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                          &lt;/VisualStateManager.VisualStateGroups&gt;
                      &lt;!-- End Visual States--&gt;
  
                      &lt;Grid.RowDefinitions&gt;
                          &lt;RowDefinition Height="Auto"/&gt;
                          &lt;RowDefinition Height="*"/&gt;
                      &lt;/Grid.RowDefinitions&gt;
                      &lt;!-- Header --&gt;
                      &lt;Border x:Name="headerLayout" Background="{TemplateBinding Background}" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="2,2,2,2" BorderBrush="Black" BorderThickness="1"&gt;
                          &lt;StackPanel&gt;
                              &lt;ToggleButton &gt;&lt;/ToggleButton&gt;
                              &lt;TextBlock Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding HeaderText}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center" /&gt;
                          &lt;/StackPanel&gt;
                      &lt;/Border&gt;
                      &lt;!-- Body Content --&gt;
                      &lt;ContentPresenter Grid.Row="1" Content="{TemplateBinding Content}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /&gt;
                  &lt;/Grid&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  &lt;/ResourceDictionary&gt;
  </code></pre>
  
  <p>Selection.cs</p>
  
  <pre><code>using System.Windows;
  using System.Windows.Controls;
  using System.Windows.Input;
  
  namespace SelectionControl.Library {
      [TemplateVisualState(Name = Selection.MouseEnterStateName, GroupName = Selection.CommonStatesGroupName)]
      [TemplateVisualState(Name = Selection.MouseLeaveStateName, GroupName = Selection.CommonStatesGroupName)]
      [TemplateVisualState(Name = Selection.MouseLeftUpStateName, GroupName = Selection.CommonStatesGroupName)]
  
  public class Selection : ContentControl {
      public const string CommonStatesGroupName = "CommonStates";
      public const string MouseEnterStateName = "MouseEnter";
      public const string MouseLeaveStateName = "MouseLeave";
      public const string MouseLeftUpStateName = "MouseLeftUp";
  
      public Selection() {
          this.DefaultStyleKey = typeof(Selection);
  
          this.MouseEnter += new MouseEventHandler(OnMouseEnter);
          this.MouseLeave += new MouseEventHandler(OnMouseLeave);
          this.MouseLeftButtonUp += new MouseButtonEventHandler(OnMouseLeftButtonUp);
      }
  
      void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e) {
          this.GoToState(Selection.MouseLeftUpStateName, true);
      }
  
      void OnMouseLeave(object sender, MouseEventArgs e) {
          this.GoToState(Selection.MouseLeaveStateName, true);
      }
  
      void OnMouseEnter(object sender, MouseEventArgs e) {
          this.GoToState(Selection.MouseEnterStateName, true);
      }
      private void GoToState(string stateName, bool useTransitions) {
          VisualStateManager.GoToState(this, stateName, useTransitions);
      }
  
      public static readonly DependencyProperty HeaderTextProperty =
          DependencyProperty.Register("HeaderText", typeof(string), typeof(Selection), new PropertyMetadata(""));
  
      public string HeaderText {
          get { return (string)GetValue(HeaderTextProperty); }
          set { SetValue(HeaderTextProperty, value); }
      }
  
      public static readonly DependencyProperty HeaderColorProperty =
          DependencyProperty.Register("HeaderColor", typeof(System.Windows.Media.Color), typeof(Selection), new PropertyMetadata(System.Windows.Media.Colors.Red));
  
      public  System.Windows.Media.Color HeaderColor {
          get { return (System.Windows.Media.Color)GetValue(HeaderColorProperty); }
          set { SetValue(HeaderColorProperty, value); }
      }
  }}
  </code></pre>