title: WPF XAML Animation property path not working
body: <p>I'm trying to animate the content of a metro styled button.
  My problem is that the content of the button does not change color.
  The foreground color does not change.</p>
  
  <p>Here's my button's style:</p>
  
  <pre><code>    &lt;Style x:Key="MetroButtonStyle"
         TargetType="Button"&gt;
      &lt;Setter Property="MinWidth"
              Value="40"/&gt;
      &lt;Setter Property="Width"
              Value="100"/&gt;
      &lt;Setter Property="MinHeight"
              Value="88"/&gt;
      &lt;Setter Property="HorizontalAlignment"
              Value="Center"/&gt;
      &lt;Setter Property="Foreground"
              Value="White"/&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="Button"&gt;
                  &lt;Border x:Name="AppButton"
                          Width="{TemplateBinding Width}"
                          Height="{TemplateBinding Height}"&gt;
                      &lt;VisualStateManager.VisualStateGroups&gt;
                          &lt;VisualStateGroup x:Name="CommonStates"&gt;
                              &lt;VisualState x:Name="Normal"/&gt;
                              &lt;VisualState x:Name="MouseOver"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimation Duration="0"
                                                       To="1"
                                                       Storyboard.TargetProperty="(UIElement.Opacity)"
                                                       Storyboard.TargetName="MouseOverEllipse"/&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="Pressed"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimation Duration="0"
                                                       To="1"
                                                       Storyboard.TargetProperty="(UIElement.Opacity)"
                                                       Storyboard.TargetName="PressedEllipse"/&gt;
                                      &lt;ColorAnimation Duration="0"
                                                      To="Black"
                                                      Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
                                                      Storyboard.TargetName="EllipseInnerContent"/&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="Disabled"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimation Duration="0"
                                                      To="#7F8D8D8D"
                                                      Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
                                                      Storyboard.TargetName="EllipseInnerContent"/&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                      &lt;/VisualStateManager.VisualStateGroups&gt;
                      &lt;StackPanel Orientation="Vertical"
                                  HorizontalAlignment="Center"&gt;
                          &lt;Grid Margin="0,14,0,5"
                                HorizontalAlignment="Center"
                                MinWidth="40"&gt;
                              &lt;Ellipse x:Name="PressedEllipse"
                                       Fill="{TemplateBinding Foreground}"
                                       Opacity="0"
                                       Width="40"
                                       Height="40"/&gt;
                              &lt;Ellipse x:Name="MouseOverEllipse"
                                       Fill="#7F8D8D8D"
                                       Opacity="0"
                                       Width="40"
                                       Height="40"/&gt;
                              &lt;Ellipse Fill="Transparent"
                                       Stroke="{TemplateBinding Foreground}"
                                       StrokeThickness="2"/&gt;
                              &lt;ContentPresenter x:Name="EllipseInnerContent"
                                                Content="{TemplateBinding Content}"
                                                HorizontalAlignment="Center"
                                                VerticalAlignment="Center"/&gt;
                          &lt;/Grid&gt;
                          &lt;TextBlock x:Name="LabelText"
                                     TextWrapping="Wrap"
                                     HorizontalAlignment="Center"
                                     FontFamily="Segoe UI"
                                     FontSize="12"
                                     Text="{TemplateBinding Tag}"
                                     Foreground="{TemplateBinding Foreground}"/&gt;
                      &lt;/StackPanel&gt;
                  &lt;/Border&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>Here's is how i use it.
  This does not works:</p>
  
  <pre><code>                        &lt;Button Style="{StaticResource MetroButtonStyle}"
                                  Tag="Blah"&gt;
                              &lt;TextBlock Text="XXX"/&gt;
                          &lt;/Button&gt;
  </code></pre>
  
  <p>This works:</p>
  
  <pre><code>                        &lt;Button Style="{StaticResource MetroButtonStyle}"
                                  Tag="Blah"
                                  Content="XXX"/&gt;
  </code></pre>