TextBox glowing when focused but always dark

Question

I have taken as a model this solution which works properly:

<Style x:Key="stlFocusGlowingTextBox" TargetType="{x:Type TextBox}">
    <Setter Property="Background" Value="Transparent" /><--------HERE
        <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect ShadowDepth="0" Color="Yellow" Opacity="0" BlurRadius="20"/>
                </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>

The only problem is that the background is not transparent. This is why I added the line marked with <---- but the problem remains as you can see the textbox above has the style applied and glows but gets dark. Instead it should look like the one below only with glow applied.

Thank you in advance for any help Patrick

For problems such as this, I highly recommend using snoop to debug it: http://snoopwpf.codeplex.com/. Snoop allows you to search through your visual tree and modify properties such as `Background` at runtime. — GEEF, Oct 19 '16 at 13:12
@Rom I can't it's way too long but I can tell you that when I apply it it just is: — Patrick, Oct 19 '16 at 13:15
@Rom is correct, when i tested the setter on mine it works as expected. What you are seeing is the background color of a parent element behind the textbox. Work your way up your tree to find out which one it is. — Bearcat9425, Oct 19 '16 at 13:27

score 0 · Answer 1 · 2016-10-20T10:38:37.517

If you want the background of a parent control you can do like this:

<Window x:Class="GlowingTextBox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GlowingTextBox"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel Background="WhiteSmoke"> <!-- The parent with the background color you want for your text box -->
    <TextBox Width="200" VerticalAlignment="Center" HorizontalAlignment="Center" Name="MyText">
      <TextBox.Style>
        <Style TargetType="{x:Type TextBox}">
          <Setter Property="Margin" Value="20" />
          <!-- Bind the bacground to the stackpanel -->
          <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=StackPanel}, Path=Background}" />
          <Setter Property="Effect">
            <Setter.Value>
              <DropShadowEffect ShadowDepth="0" Color="Yellow" Opacity="0" BlurRadius="20"/>
            </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>
    <TextBox />
  </StackPanel>
</Window>

EDIT: In the above I've set the background of the textbox to reference the background of the stackpanel that is parent to the textbox. It seems that when you use dropshadoweffect it shines through the textbox if it has baground set to transparent. So if you want the textbox to have the same background as its parent (here stackpanel) you references it as <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=StackPanel}, Path=Background}" />

If you want the textbox to have its own background you do this:

<Window x:Class="GlowingTextBox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GlowingTextBox"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel Background="WhiteSmoke">
    <TextBox Width="200" VerticalAlignment="Center" HorizontalAlignment="Center" Name="MyText">
      <TextBox.Style>
        <Style TargetType="{x:Type TextBox}">
          <Setter Property="Margin" Value="20" />
          <Setter Property="Background" Value="White" />
          <Setter Property="Effect">
            <Setter.Value>
              <DropShadowEffect ShadowDepth="0" Color="Yellow" Opacity="0" BlurRadius="20"/>
            </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>
    <TextBox />
  </StackPanel>
</Window>

EDIT: Here the background of the textbox is set to white in the style to let it be indifferent of underlying colors.

I might be dumb but... what's different with what I am using now? You just apply the style locally but you are exactly doing what I do... — Patrick, Oct 20 '16 at 10:10
@Patrick: not exactly the same. Please see my EDITs above. You can easily try the above xamls to se if they solves your problem. — , Oct 20 '16 at 10:40

TextBox glowing when focused but always dark

1 Answers1

Linked