Setting the foreground of a textblock as button's content using IsMouseOver

Question

I want that the foreground of the textblock changes when mouse is over the button/textblock. I have tried this but this does not work:

<DataTemplate>
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding Header}"/>
        <Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
                Margin="5,-3,0, 0" 
                Visibility="{Binding IsCloseButtonVisible}"
                Command="{Binding CloseSelectedTabCommand}">
            <Button.Content>
                <TextBlock Text="x" Foreground="LightGray">
                    <TextBlock.Style>
                        <Style TargetType="TextBlock">
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Foreground" Value="Red"/>
                                </Trigger>
                             </Style.Triggers>
                            </Style>
                        </TextBlock.Style>
                </TextBlock>
            </Button.Content>
        </Button>
    </StackPanel>
</DataTemplate>

Answer 1

You need to set the foreground in the style and not in the TextBlock for it to work.

<TextBlock Text="HelloWorld ">
    <TextBlock.Style>
        <Style TargetType="TextBlock">
            <Setter Property="Foreground" Value="LightGray"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>