焦点对准时，TextBox会发光，但始终会变暗 [英] TextBox glowing when focused but always dark

问题描述

我已将其作为模型此可以正常工作的解决方案:

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

推荐答案

如果您想要父控件的背景，可以这样:

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>

编辑:在上面，我将文本框的背景设置为引用作为文本框父级的堆栈面板的背景.看来，当您使用dropshadoweffect时，如果将baground设置为透明，则它会在文本框中闪烁.因此，如果您希望文本框与其父级(此处为stackpanel)具有相同的背景，则将其引用为<Setter Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=StackPanel}, Path=Background}" />

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.

这篇关于焦点对准时，TextBox会发光，但始终会变暗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！