title: Applying style to Path inside ContentPresenter (BasedOn not working!)
body: <p>I am unable to apply a MouseOver style to a Path inside a ContentPresenter.</p>
  
  <p>I have a Button style containing a ContentPresenter:</p>
  
  <pre><code>&lt;Style x:Key="ContentButton" TargetType="{x:Type Button}"&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
                  &lt;ContentPresenter
                  x:Name="contentPresenter"
                  Content="{TemplateBinding Content}"&gt;
                      &lt;ContentPresenter.Resources&gt;
                      &lt;Style TargetType="{x:Type Path}"
                          BasedOn="{StaticResource ContentButtonPathStyle}"/&gt;
                      &lt;/ContentPresenter.Resources&gt;
                  &lt;/ContentPresenter&gt;
  </code></pre>
  
  <p>Here is a style so I can have a rollover effect on the Path:</p>
  
  <pre><code>&lt;Style x:Key="ContentButtonPathStyle" TargetType="{x:Type Path}"&gt;
      &lt;Style.Triggers&gt;
          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
              &lt;Setter Property="Fill" Value="#FF00FF10"/&gt;
              &lt;Setter Property="Stroke" Value="Red"/&gt;
              &lt;Setter Property="StrokeThickness" Value="6"/&gt;
          &lt;/Trigger&gt;
      &lt;/Style.Triggers&gt;
      &lt;Setter Property="Stroke" Value="Red"/&gt;
      &lt;Setter Property="Fill"&gt;
          &lt;Setter.Value&gt;
              &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt;
                  &lt;GradientStop Color="#FFB4B3E7" Offset="0"/&gt;
                  &lt;GradientStop Color="#FF0800FF" Offset="1"/&gt;
              &lt;/LinearGradientBrush&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>I also have a resource file for icons with a Viewbox that contains a path:</p>
  
  <pre><code>&lt;Viewbox x:Key="MyIcon"&gt;
      &lt;Grid&gt;
          &lt;Path Data="M78,296 L37.5,306.5 45.5,354.5 123.5,343.5 z" /&gt;
      &lt;/Grid&gt;
  &lt;/Viewbox&gt;
  </code></pre>
  
  <p>And finally, I create a button and assign the Viewbox resource to the Content:</p>
  
  <pre><code>&lt;Button Style="{DynamicResource ContentButton}"&gt;
      &lt;ContentPresenter Content="{DynamicResource MyIcon}"/&gt;
  &lt;/Button&gt;
  </code></pre>
  
  <p>The use of "BasedOn" to style the contents of the ContentPresenter is a technique that I found here:</p>
  
  <p><a href="http://social.msdn.microsoft.com/forums/en-US/wpf/thread/412b1747-60e9-4b9a-8f8f-bd56f3aff875/" rel="noreferrer">http://social.msdn.microsoft.com/forums/en-US/wpf/thread/412b1747-60e9-4b9a-8f8f-bd56f3aff875/</a></p>
  
  <p>However, it doesn't work for me... I've spent many hours trying to figure this out!</p>
  
  <p>Any ideas?</p>
  
  <p>Thanks!</p>
  
  <hr>
  
  <p>OK based upon Mackho's excellent answer, here is my final XAML.</p>
  
  <p>I also added a DataTriggeer for IsPressed, which works great!</p>
  
  <p>I hope this helps someone...</p>
  
  <p>First, the style:</p>
  
  <pre><code>&lt;Style x:Key="ContentButtonPathStyle" TargetType="{x:Type Path}"&gt;
          &lt;Style.Triggers&gt;
              &lt;DataTrigger Binding="{Binding RelativeSource=
                  {RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsMouseOver}" Value="True"&gt;
                  &lt;Setter Property="Fill" Value="Yellow"/&gt;
                  &lt;Setter Property="Stroke" Value="Blue"/&gt;
              &lt;/DataTrigger&gt;
              &lt;DataTrigger Binding="{Binding RelativeSource=
                  {RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsPressed}" Value="True"&gt;
                  &lt;Setter Property="Fill" Value="Red"/&gt;
                  &lt;Setter Property="Stroke" Value="Black"/&gt;
              &lt;/DataTrigger&gt;
          &lt;/Style.Triggers&gt;
          &lt;Setter Property="Fill" Value="Green"/&gt;
          &lt;Setter Property="Stroke" Value="Red"/&gt;
      &lt;/Style&gt;
  </code></pre>
  
  <p>Next, the icon itself:</p>
  
  <pre><code>&lt;Viewbox Stretch="Fill" x:Shared="False" x:Key="MyIcon"&gt;
          &lt;Path StrokeThickness="6" Data="M160.26077,0.5 L196.5,36.739223 232.73923,0.5 251.12399,18.884777 214.88478,55.124001 251.12399,91.363222 232.73923,109.748 196.5,73.508779 160.26077,109.748 141.87601,91.363222 178.11522,55.124001 141.87601,18.884777 z" Stretch="Fill"/&gt;
      &lt;/Viewbox&gt;
  </code></pre>
  
  <p>Then, the template:</p>
  
  <pre><code>&lt;Style x:Key="ContentButton" TargetType="{x:Type Button}"&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
                      &lt;ControlTemplate.Resources&gt;
                          &lt;Style TargetType="{x:Type Path}" BasedOn="{StaticResource ContentButtonPathStyle}"/&gt;
                      &lt;/ControlTemplate.Resources&gt;
                      &lt;Grid  Background="Transparent"&gt;&lt;ContentPresenter /&gt;&lt;/Grid&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  </code></pre>
  
  <p>And finally, let's place a few buttons that use the template and style:</p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Button Style="{DynamicResource ContentButton}" HorizontalAlignment="Left" Width="128" Height="128" VerticalAlignment="Top" Margin="85.5,87,0,0"&gt;
          &lt;ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/&gt;
      &lt;/Button&gt;
      &lt;Button Style="{DynamicResource ContentButton}" Height="64" VerticalAlignment="Top" Margin="0,87,204.5,0" HorizontalAlignment="Right" Width="64"&gt;
          &lt;ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/&gt;
      &lt;/Button&gt;
      &lt;Button Style="{DynamicResource ContentButton}" Height="96" VerticalAlignment="Bottom" Margin="234,0,0,66.5" HorizontalAlignment="Left" Width="96"&gt;
          &lt;ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/&gt;
      &lt;/Button&gt;
      &lt;Button Style="{DynamicResource ContentButton}" Height="32" VerticalAlignment="Bottom" Margin="0,0,138.5,130.5" HorizontalAlignment="Right" Width="32"&gt;
          &lt;ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/&gt;
      &lt;/Button&gt;
  &lt;/Grid&gt;
  </code></pre>