TextBlock Glow Effect Inside Button

Question

I have a button with it's control template set to a TextBlock. I want the text to "Glow" when the mouse is over it or it has gained focus by moving to it via the keyboard. I can't seem to get this working as I presume I'm setting the effect in the wrong place. Has anyone done this before that could share the xaml for it. Here is my style so far.

<!--Back Button-->
<Style x:Key="MoviesBackButton"
       TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <TextBlock Text="Back" Style="{DynamicResource MoviesButtonBackTextBlock}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Width"
            Value="40" />
    <Setter Property="Height"
            Value="25" />
    <Setter Property="VerticalAlignment"
            Value="Top" />
    <Setter Property="HorizontalAlignment"
            Value="Left" />
    <Setter Property="Margin"
            Value="10,5,0,0" />
</Style>
<Style x:Key="MoviesButtonBackTextBlock"
       TargetType="TextBlock">
    <Setter Property="Foreground"
            Value="{DynamicResource MoviesButtonBackTextBlockForeground}" />
    <Setter Property="FontFamily"
            Value="Segoe UI Light, Lucida Sans Unicode, Verdana" />
    <Setter Property="FontSize"
            Value="20" />
    <Setter Property="TextOptions.TextHintingMode"
            Value="Animated" />
</Style>
<LinearGradientBrush x:Key="MoviesButtonBackTextBlockForeground"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
    <GradientStop Color="LightGray"
                  Offset="0" />
    <GradientStop Color="Gray"
                  Offset="1" />
</LinearGradientBrush>

Answer 1

Here's one solution for mouse-over glow. You can add similar event triggers for Button.GotKeyboardFocus/LostKeyboardFocus.

If I was doing this for real, I would probably create a custom control and use visual states. Search for 'Visual State Manager' for more information.

  <Grid>
    <Grid.Resources>
      <Style x:Key="TextBoxGlow" TargetType="{x:Type Button}">
        <Style.Triggers>
          <EventTrigger RoutedEvent="Button.MouseEnter">
            <EventTrigger.Actions>
              <BeginStoryboard>
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="(Button.Content).(TextBlock.Effect).Opacity" From="0"
                                   To="1" Duration="0:0:0.5" />
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger.Actions>
          </EventTrigger>
          <EventTrigger RoutedEvent="Button.MouseLeave">
            <EventTrigger.Actions>
              <BeginStoryboard>
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="(Button.Content).(TextBlock.Effect).Opacity" From="1"
                                   To="0" Duration="0:0:0.5" />
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger.Actions>
          </EventTrigger>
        </Style.Triggers>
      </Style>

    </Grid.Resources>

    <StackPanel>
      <Button Style="{StaticResource TextBoxGlow}" Margin="5">
        <TextBlock Text="I'm glowing" FontSize="28" Padding="10">
          <TextBlock.Effect>
            <DropShadowEffect BlurRadius="8" Color="Crimson" ShadowDepth="0" Opacity="0" />
          </TextBlock.Effect>
        </TextBlock>
      </Button>
    </StackPanel>
  </Grid>