title: Change Fill color of Path used as Button Template on MouseOver
body: <p>I have a button that has it's <code>Template</code> setup to display a <code>Path</code> wrapped in a <code>VisualBrush</code>. The <code>Path</code> has its <code>Fill</code> assigned, but I want to change the <code>Fill</code> color when the button is moused over.</p>
  
  <h3>Visual Brush</h3>
  
  <pre><code>&lt;VisualBrush x:Key="EditIconBrush" Stretch="Uniform"&gt;
      &lt;VisualBrush.Visual&gt;
          &lt;Canvas Width="24" Height="24"&gt;
              &lt;Path Fill="White" Data="M20.71,4.04C21.1,3.65 21.1,3 20.71,2.63L18.37,0.29C18,-0.1 17.35,-0.1 16.96,0.29L15,2.25L18.75,6M17.75,7L14,3.25L4,13.25V17H7.75L17.75,7Z" /&gt;
          &lt;/Canvas&gt;
      &lt;/VisualBrush.Visual&gt;
  &lt;/VisualBrush&gt;
  </code></pre>
  
  <h3>Button Template</h3>
  
  <pre><code>&lt;ControlTemplate x:Key="ButtonIconTemplate" 
                   TargetType="Button"&gt;
      &lt;Grid&gt;
          &lt;Rectangle Fill="Transparent" /&gt;
          &lt;ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              Content="{TemplateBinding Content}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /&gt;
      &lt;/Grid&gt;
  &lt;/ControlTemplate&gt;
  
  &lt;Button DockPanel.Dock="Right" Margin="0 0 10 0" 
          Command="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=DataContext.AddFieldCommand}"
          Template="{StaticResource ButtonIconTemplate}"&gt;                                        
      &lt;Rectangle Width="20" Height="20" Fill="{DynamicResource EditIconBrush}" /&gt;
  &lt;/Button&gt;
  </code></pre>
  
  <p>Do I need to have two different versions of my Path, one in each color? Or can this be achieved in a Style? I'd like to increase the size of the Path when moused over and change its color from grey to white, then decrease the size and change the color from white to grey when the mouse leaves.</p>
  
  <p>I tried to bind the <code>Path</code>'s <code>Fill</code> property to the <code>Button</code>'s <code>Foreground</code> property, using <code>RelativePath</code> as <a href="https://stackoverflow.com/a/14562868/1815321">recommend in another post</a>. I basically wanted to achieve the same concept that the original poster in that thread wanted. The difference being that my Path is in a resource dictionary and not part of my <code>Button</code> itself.</p>
  
  <h3>Binding to Foreground attempt</h3>
  
  <pre><code>&lt;Button DockPanel.Dock="Right" Margin="0 0 10 0" 
          Foreground="White"
          Command="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=DataContext.AddFieldCommand}"
          Template="{DynamicResource ButtonIconTemplate}"&gt;                                        
      &lt;Rectangle Width="20" Height="20" Fill="{DynamicResource EditIconBrush}" /&gt;
  &lt;/Button&gt;
  
  &lt;VisualBrush x:Key="EditIconBrush" Stretch="Uniform"&gt;
      &lt;VisualBrush.Visual&gt;
          &lt;Canvas Width="24" Height="24"&gt;
              &lt;Path Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" 
                    Data="M20.71,4.04C21.1,3.65 21.1,3 20.71,2.63L18.37,0.29C18,-0.1 17.35,-0.1 16.96,0.29L15,2.25L18.75,6M17.75,7L14,3.25L4,13.25V17H7.75L17.75,7Z" /&gt;
          &lt;/Canvas&gt;
      &lt;/VisualBrush.Visual&gt;
  &lt;/VisualBrush&gt;
  </code></pre>
  
  <p>I'm not sure how to resolve this issue. Any help would be appreciated.</p>