title: How to bind WPF Effect Color to Foreground or Background of ControlTemplate
body: <p>I am seeing some odd behaviour when it comes to Binding to the Color property of an Effect within a ControlTemplate. When setting the value directly, I can define the color as a string (eg. "Red") or as a  Hex value (eg. #FFFF0000).</p>
  
  <p>However, when using binding, it ONLY works if the color is defined as a String, which is an issue in a ControlTemplate style, as I would like to use the colors of the TemplateParent properties, which get bound to as Hex values.</p>
  
  <p>For example. Take a look at the following XAML (sorry I know it is long but I wanted to show all cases):</p>
  
  <pre><code>&lt;Window x:Class="EffectTest.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="MainWindow" Height="350" Width="525"&gt;
  
      &lt;Window.Resources&gt;
  
          &lt;!-- 
          STYLE 1 
          This works, as the Color is hard coded, but note that the hard 
          coded value is identicle to the value in Style 2 (which doesn't work).
          --&gt;
          &lt;Style x:Key="Style1" TargetType="{x:Type Button}"&gt;
              &lt;Style.Setters&gt;
                  &lt;Setter Property="Template"&gt;
                      &lt;Setter.Value&gt;
                          &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
                              &lt;Border Width="{TemplateBinding Width}"
                                      Height="{TemplateBinding Height}"
                                      Background="{TemplateBinding Foreground}"&gt;
                                  &lt;Border.Effect&gt;
                                      &lt;DropShadowEffect Color="#FFFF0000"/&gt;
                                  &lt;/Border.Effect&gt;
                                  &lt;TextBlock Foreground="White" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"/&gt;
                              &lt;/Border&gt;
                          &lt;/ControlTemplate&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
              &lt;/Style.Setters&gt;
          &lt;/Style&gt;
  
          &lt;!--
          STYLE 2
          This fails (the dropshadow appears black) even through the value being bound to is the same as Style 1.
          --&gt;
          &lt;Style x:Key="Style2" TargetType="{x:Type Button}"&gt;
              &lt;Style.Setters&gt;
                  &lt;Setter Property="Template"&gt;
                      &lt;Setter.Value&gt;
                          &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
                              &lt;Border Width="{TemplateBinding Width}"
                                      Height="{TemplateBinding Height}"
                                      Background="{TemplateBinding Foreground}"&gt;
                                  &lt;Border.Effect&gt;
                                      &lt;!--NOTE: TemplateBinding does not work at all... &lt;DropShadowEffect Color="{TemplateBinding Background}"/&gt;--&gt;
                                      &lt;DropShadowEffect Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"/&gt;
                                  &lt;/Border.Effect&gt;
                                  &lt;TextBlock Foreground="White" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"/&gt;
                              &lt;/Border&gt;
                          &lt;/ControlTemplate&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
              &lt;/Style.Setters&gt;
          &lt;/Style&gt;
  
          &lt;!--
          STYLE 3
          This works, but note that I am binding to "Name" for the Color, which just happens to be a valid color "Red".
          --&gt;
          &lt;Style x:Key="Style3" TargetType="{x:Type Button}"&gt;
              &lt;Style.Setters&gt;
                  &lt;Setter Property="Template"&gt;
                      &lt;Setter.Value&gt;
                          &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
                              &lt;Border Width="{TemplateBinding Width}"
                                      Height="{TemplateBinding Height}"
                                      Background="{TemplateBinding Foreground}"&gt;
                                  &lt;Border.Effect&gt;
                                      &lt;DropShadowEffect Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Name}"/&gt;
                                  &lt;/Border.Effect&gt;
                                  &lt;TextBlock Foreground="White" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Name}"/&gt;
                              &lt;/Border&gt;
                          &lt;/ControlTemplate&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
              &lt;/Style.Setters&gt;
          &lt;/Style&gt;
      &lt;/Window.Resources&gt;
  
      &lt;StackPanel Width="150"&gt;
          &lt;Button Style="{StaticResource Style1}" Foreground="LightBlue" Background="Red"&gt;&lt;/Button&gt;
          &lt;Separator Visibility="Hidden" Height="5"/&gt;
          &lt;Button Style="{StaticResource Style2}" Foreground="LightBlue" Background="Red"&gt;&lt;/Button&gt;
          &lt;Separator Visibility="Hidden" Height="5"/&gt;
          &lt;Button Style="{StaticResource Style3}" Foreground="LightBlue" Name="Red"&gt;&lt;/Button&gt;
      &lt;/StackPanel&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>Results in:</p>
  
  <p><img src="https://i.stack.imgur.com/yTf8Y.png" alt="Results"></p>
  
  <p>Why is this? Is there a way around it? I would like to be able to use the Background and Foreground properties of Button inside the control template's effect.</p>