How to create glowing TextBox in WPF 4.0?

问题:

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?

回答1:

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

<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>

回答2:

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.