title: WPF Button Style Background hidding Foreground
body: <p>I'm trying to understand the basics of styling controls with templates but even though there are a lot of samples I'm still stuck with some basics.</p>
  
  <p>I wish to style a button with a custom background, therefore I set a border with a background property changing on VisualState "MouseOver". The problem is, since I set the color on the border, I can't find find how to set my text foreground property to white so that the text is visible.</p>
  
  <p>Here's my xaml:</p>
  
  <blockquote>
  <pre><code>   &lt;Style TargetType="{x:Type Button}"&gt;
          &lt;Setter Property="Foreground" Value="White"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="Button"&gt;
                      &lt;Border Name="RootElement"&gt;
                          &lt;Border.Background&gt;
                              &lt;LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"&gt;
                                  &lt;GradientStop Offset="0" Color="Black" /&gt;
                                  &lt;GradientStop Offset="1" Color="SteelBlue" /&gt;
                              &lt;/LinearGradientBrush&gt;
                          &lt;/Border.Background&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;ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"&gt;
                                              &lt;EasingColorKeyFrame KeyTime="0" Value="LightSteelBlue" /&gt;
                                          &lt;/ColorAnimationUsingKeyFrames&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualState&gt;
                              &lt;/VisualStateGroup&gt;
                          &lt;/VisualStateManager.VisualStateGroups&gt;
                      &lt;/Border&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  </code></pre>
  </blockquote>
  
  <p>The setter on Foreground property seems to be overriden by the border background property.</p>
  
  <p>I think I have to add a textblock to the template, but I'm sure how to link the actual Text of the button to the textBlock, this is what I tried without succes:</p>
  
  <blockquote>
  <pre><code>    &lt;Style TargetType="{x:Type Button}"&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="Button"&gt;
                      &lt;Border Name="RootElement"&gt;
                          &lt;Border.Background&gt;
                              &lt;LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"&gt;
                                  &lt;GradientStop Offset="0" Color="Black" /&gt;
                                  &lt;GradientStop Offset="1" Color="SteelBlue" /&gt;
                              &lt;/LinearGradientBrush&gt;
                          &lt;/Border.Background&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;ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"&gt;
                                              &lt;EasingColorKeyFrame KeyTime="0" Value="LightSteelBlue" /&gt;
                                          &lt;/ColorAnimationUsingKeyFrames&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualState&gt;
                              &lt;/VisualStateGroup&gt;
                          &lt;/VisualStateManager.VisualStateGroups&gt;
                          &lt;TextBlock Name="ButtonText" Text="{TemplateBinding Content}"&gt;
                              &lt;TextBlock.Foreground&gt;
                                  &lt;SolidColorBrush Color="White"/&gt;
                              &lt;/TextBlock.Foreground&gt;
                          &lt;/TextBlock&gt;
                      &lt;/Border&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  </code></pre>
  </blockquote>