title: Animating SolidColorBrush in Background
body: <p>I am trying to create a simple button style, that will change the opacity of the background from 0.0 to 1.0 on mouse over (and vice versa). I am creating a template for said button and I am binding all the properties in the template. It all works properly except the <code>SolidColorBrush</code> in background, that I can not bind to the template binding. I've seen some mentions of <code>TemplateBinding</code> not being the right one due to contexts, but I am not able to find another solution. I suspect, there might be a problem of <code>Background</code> being a <code>Brush</code> and I need just a <code>Color</code> component of that brush, but I am not able to obtain it.</p>
  
  <p>The obvious override is to create two template styles with two different colors (which works), but I would like to avoid such hard-coding and copy-paste. What I would like to have is an option to specify <code>Background</code> property on Button, that would be used in <code>SolidColorBrush</code> and then the opacity would do the rest.</p>
  
  <pre><code>&lt;Style TargetType="{x:Type Button}" x:Key="WindowButtonStyle"&gt;
      &lt;Setter Property="Width" Value="46" /&gt;
      &lt;Setter Property="Height" Value="32" /&gt;
      &lt;Setter Property="BorderThickness" Value="0" /&gt;
      &lt;Setter Property="VerticalAlignment" Value="Center" /&gt;
  
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
                  &lt;Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"&gt;
                      &lt;Border.Background&gt;
                          &lt;SolidColorBrush x:Name="ButtonBackgroundBrush" Color="???" Opacity="0.0" /&gt;
                      &lt;/Border.Background&gt;
                      &lt;ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" /&gt;
                  &lt;/Border&gt;
                  &lt;ControlTemplate.Resources&gt;
                      &lt;Storyboard x:Key="MouseOverAnimation"&gt;
                          &lt;DoubleAnimation Storyboard.TargetName="ButtonBackgroundBrush" Storyboard.TargetProperty="Opacity" To="1.0" Duration="0:0:0.15" /&gt;
                      &lt;/Storyboard&gt;
                      &lt;Storyboard x:Key="MouseOutAnimation"&gt;
                          &lt;DoubleAnimation Storyboard.TargetName="ButtonBackgroundBrush" Storyboard.TargetProperty="Opacity" To="0.0" Duration="0:0:0.15" /&gt;
                      &lt;/Storyboard&gt;
                  &lt;/ControlTemplate.Resources&gt;
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                          &lt;Trigger.EnterActions&gt;
                              &lt;BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" /&gt;
                          &lt;/Trigger.EnterActions&gt;
                          &lt;Trigger.ExitActions&gt;
                              &lt;BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" /&gt;
                          &lt;/Trigger.ExitActions&gt;
                      &lt;/Trigger&gt;
                  &lt;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>Then, the button is used like this:</p>
  
  <pre><code>&lt;Button x:Name="MinimizeButton" Style="{StaticResource WindowButtonStyle}" Click="MinimizeButton_Click" Background="Green"&gt;
      &lt;Image Source="../Resources/WindowButtons/Images/win-minimize.png" Width="12" Height="12"&gt;&lt;/Image&gt;
  &lt;/Button&gt;
  </code></pre>
  
  <p><em>Added <code>Background="Green"</code> property setting to test it, but did not worked.</em></p>