Question

I’d like to apply a glow effect to a TextBlock on mouseover. I figured the quickest and simplest way to do this would be to use a DropShadowEffect and change the settings so it’s directly behind the text, which works a treat.

However, the TextBlock already has a DropShadowEffect on it, so when I mouseover the ‘glow’ effect replaces the drop shadow.

I tried this solution of wrapping the TextBlock in a Grid and applying the glow to the grid, but that appears to cascade and override the drop shadow on the TextBlock.

Is there any way to effectively apply two drop shadows to the same element, or is there an alternative way to implement glow on a TextBlock that’s about as simple as this method?

Answer 1

I ended up doing this by adding a secondary ContentPresenter with Visibility="Collapsed" and attaching a drop shadow to that, with the following settings:

<DropShadowEffect Direction="0" BlurRadius="10" 
                  ShadowDepth="1" Opacity="0.6" Color="White" />

I then made this visible in the MouseOver state to create the glow effect.