How to add BitmapEffect to the text of a styled button

Question

I'd like to make the text within a button glow when it becomes KeyboardFocused.

I am unable to do this. Here is my xaml:

 <Style x:Key="BorderlessSymbolButtonStyle" TargetType="{x:Type Button}" >
    <Setter Property="FocusVisualStyle" Value="{DynamicResource MetroButtonFocusVisual}"/>
    <Setter Property="BitmapEffect">
        <Setter.Value>
            <OuterGlowBitmapEffect GlowColor="White" Opacity="0" GlowSize="3" Noise=".1"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <Grid x:Name="Grid">
                    <Border x:Name="Border" Background="{TemplateBinding Background}" 
                            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"/>

                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      x:Name="Content"
                                      Margin="{TemplateBinding Padding}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                      RecognizesAccessKey="True"
                                      BitmapEffect="{TemplateBinding BitmapEffect}" >

                    </ContentPresenter>
                </Grid>

                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsPressed" Value="true"/>
                            <Condition Property="IsEnabled" Value="true"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Foreground" Value="{DynamicResource GlenairMediumBlue}"/>
                    </MultiTrigger>
                    <Trigger Property="IsKeyboardFocused" Value="true">
                        <!--<Setter Property="BorderBrush" Value="{DynamicResource DefaultedBorderBrush}" TargetName="Border"/>-->
                        <!--<Setter Property="Effect" TargetName="Border" Value="{DynamicResource BorderDropShadow}"/>-->
                        <Setter Property="BitmapEffect"  >
                            <Setter.Value>
                                <OuterGlowBitmapEffect GlowColor="White" Opacity=".4" GlowSize="3" Noise=".1"/>
                            </Setter.Value>
                        </Setter>

                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="Gray"/>
                    </Trigger>
                    <!--<Trigger Property="IsEnabled" Value="true">
                        <Setter Property="Foreground" Value="White"/>
                    </Trigger>-->
                    <!--<Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" Value="{DynamicResource MouseOverBrush}" TargetName="Border"/>
                    </Trigger>-->
                    <!--<Trigger Property="IsPressed" Value="true">
                        <Setter Property="Foreground" Value="{DynamicResource GlenairLighterOpaqueBlueSolidColorBrush}" />

                    </Trigger>-->
                    <!--<Trigger Property="IsEnabled" Value="true"/>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
                        <Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border"/>
                        <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
                    </Trigger>-->
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Thanks very much! Was unable to find the solution to my issue on google/SO.

Answer 1

I've not used your exact template because I wasn't able to just copy/paste it into Visual Studio without changing resource names ect. When posting code to fix try and make it completely isolated, makes fixing problems much easier for us :D

The template I've provided below applies a drop shadow effect to the content of a button when the keyboard focus is set, I used Effect instead of BitMapEffect because it's much faster and also BitMapEffect is now obsolete. You might need to tweak the effect parameters to make it glow better.

 <Window x:Class="GlowingButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Background="WhiteSmoke"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">

                        <Border BorderBrush="Blue" CornerRadius="5" BorderThickness="1">
                            <ContentPresenter x:Name="test" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsKeyboardFocused" Value="True">
                                <Trigger.Setters>
                                    <Setter TargetName="test" Property="Effect">
                                        <Setter.Value>
                                            <DropShadowEffect Color="Blue" BlurRadius="10" ShadowDepth="0"/>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger.Setters>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Margin="100" Content="test" Foreground="Black" FontSize="20"/>
    </Grid>
</Window>