Question

Why does this trigger work (Changing the foreground of the button to “Red” when the mouse is over)

<Grid>
 <Grid.Resources>
  <Style TargetType="{x:Type Button}">
   <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
     <Setter Property="Foreground" Value="Red"/>
    </Trigger>
   </Style.Triggers>
  </Style>
 </Grid.Resources>
 <Button Content="Hello"/>
</Grid>

but not this trigger, when the foreground of the button is set to a color (in this case “Blue”)?

<Grid>
 <Grid.Resources>
  <Style TargetType="{x:Type Button}">
   <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
     <Setter Property="Foreground" Value="Red"/>
    </Trigger>
   </Style.Triggers>
  </Style>
 </Grid.Resources>
 <Button Foreground="Blue" Content="Hello"/>
</Grid>

Answer 1

The local value of the button overrides the Style. Try:

<Grid>

    <Grid.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Foreground" Value="Blue"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>

    <Button Content="Hello"/>

</Grid>