How to create glowing TextBox in WPF 4.0?

Question

I'm trying to create a text box, which would glow when focused.

All samples of how to do this I've seen so far were based on OuterGlowBitmapEffect , and it appears that it does not work in .net 4.

The recommendation in the second article is to use blur effect. I have no idea on how to use blur to get object's outer layer to glow without distorting the inner content of the object.

Ultimately, I'm hoping to create a text box, which would display glow up animation when focused, and the glow would slowly (1-2 seconds) fade after the control has lost focus.

Any ideas on what is the best way to do this in wpf 4.0?

Fredrik Hedblad · Accepted Answer · 2012-06-11T07:37:17.303

You can try to get a decent "Glow-Effect" with DropShadowEffect. Here is an example

Update. A TextBox that starts to "glow" when focused and the "glow" slowly fades out for two seconds when it loses focus

enter image description here

<TextBox Text="Test">
    <TextBox.Style>
        <Style TargetType="TextBox">
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect ShadowDepth="0"
                                      Color="Gold"
                                      Opacity="0"
                                      BlurRadius="8"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsFocused" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation To="1.0"
                                                 Storyboard.TargetProperty="(Effect).Opacity"
                                                 Duration="00:00:00"/>
                            </Storyboard>                                    
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation To="0.0"
                                                 Storyboard.TargetProperty="(Effect).Opacity"
                                                 Duration="00:00:02"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </TextBox.Style>
</TextBox>

That looks quite good! However how can I change the parameters so that looks .... stronger? On my dark background I don't see it enough! — Luca, Nov 25 '21 at 11:20

score 0 · Answer 2 · answered Jun 10 '12 at 18:42

Take a look at http://wpfthemes.codeplex.com/ for a lot of good wpf theme ideas. In particular, look at the theme for the textbox in Bureau Black. I think what you want is actually what they use for their 'mouseover' attribute, but it should be easy to change that to a focused property instead.

How to create glowing TextBox in WPF 4.0?

2 Answers2

Linked