Glow effect on WPF button content

Question

How in WPF to generate a reusable Button Style so that the Button's Content (whatever that is) gets glow effect when mouse over.

Desired effect like this (left = normal, right = mouse over)

I have defined a Style for Button but what kind of Triggers I need to achieve it?

<Style x:Key="GlowEffectButton" TargetType="Button">
    <Setter Property="Template">
         <Setter.Value>
              <ControlTemplate TargetType="Button">
                  //... ??
              </ControlTemplate>
         </Setter.Value>
    </Setter>

I might use an Image or a Path as a Button Content.

 <Button Style="{StaticResource GlowEffectButton}">
      <Button.Content>
            //IMAGE OR PATH as Content
      </Button.Content>
 </Button/>

Is there a way to set glow effect to a generalized Button Style? Can it be made if I limit the Button content to use XAML vector/Path only?

Answer 1

Something like this should fit your needs

Resources

 <Window.Resources>
        <SolidColorBrush Color="White" Opacity="0.8" x:Key="HalfTransBrush"></SolidColorBrush>
        <Style TargetType="{x:Type Path}">
            <Setter Property="StrokeThickness" Value="1"/>
            <Setter Property="Stroke" Value="White"/>
            <Setter Property="Fill" Value="Gainsboro"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}, Path=IsMouseOver, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Value="True">
                    <Setter Property="Fill" Value="{StaticResource HalfTransBrush}" />
                    <Setter Property="Effect">
                        <Setter.Value>
                            <DropShadowEffect BlurRadius="10" Color="White" ShadowDepth="0"></DropShadowEffect>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Background" Value="Black"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" 
                            BorderThickness="1"
                            Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

Usage

 <Button Width="50" Height="50">
                <Path>
                    <Path.Data>
                        <PathGeometry>
                            <PathGeometry.Figures>
                                <PathFigure StartPoint="0,0" IsClosed="True">
                                    <LineSegment Point="1,1"/>
                                    <LineSegment Point="30,20"/>
                                    <LineSegment Point="40,25"/>
                                    <LineSegment Point="30,40"/>
                                    <LineSegment Point="10,10"/>
                                </PathFigure>
                            </PathGeometry.Figures>
                        </PathGeometry>
                    </Path.Data>
                </Path>
            </Button>

Result

Note

You can modify the colors as you need and tweak opacity and so on. That is very simple example, targeting for a path. The Button's Template is maybe not of great use for you since you might have your own custom style

Cheers