RoutedEvent TextBox.LostFocus not working in my WPF application

Question

I am working with the WPF animations using Storyboards. What I want is to fade out all the content of the page as soon as my textbox gets focus, and to fade in everything back as soon as the focus is removed from the textbox. To do that, I have the following XAML with no code behind.

<Page.Triggers>
  <EventTrigger RoutedEvent="TextBox.GotFocus">
     <BeginStoryboard>
        <Storyboard>
           <DoubleAnimation
              Storyboard.TargetName="Grid1"
              Storyboard.TargetProperty="Opacity"
              From="1" To="0.1" Duration="0:0:0.2"
              AutoReverse="False" >
           </DoubleAnimation>
        </Storyboard>
     </BeginStoryboard>
  </EventTrigger>
  <EventTrigger RoutedEvent="TextBox.LostFocus">
     <BeginStoryboard>
        <Storyboard>
           <DoubleAnimation
              Storyboard.TargetName="Grid1"
              Storyboard.TargetProperty="Opacity"
              From="0.1" To="1" Duration="0:0:0.2"
              AutoReverse="False">
           </DoubleAnimation>
        </Storyboard>
     </BeginStoryboard>
  </EventTrigger>

To move focus out of textbox, I have the following button:

<Button
        Name="SearchButton" 
        Height="30" Width="30"
        Grid.Column="1"
        Focusable="True"
        IsHitTestVisible="True"
        Style="{StaticResource SearchButton}"
        Padding="3,3,3,3"
        Margin="3,3,3,3" Click="Button_Click"/>

When I run the app, clicking on the textbox makes the fade out work fine. But when I click on the button, the fade in does not kick in.

Can anyone please give me some insights?

Answer 1

You should place your triggers in the TextBox directly, not on the Page level:

  <TextBox>
    <TextBox.Triggers>
      <EventTrigger RoutedEvent="TextBox.GotFocus">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
               Storyboard.TargetName="Grid1"
               Storyboard.TargetProperty="Opacity"
               From="1" To="0.1" Duration="0:0:0.2"
               FillBehavior="HoldEnd">
            </DoubleAnimation>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
      <EventTrigger RoutedEvent="TextBox.LostFocus">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
               Storyboard.TargetName="Grid1"
               Storyboard.TargetProperty="Opacity"
               From="0.1" To="1" Duration="0:0:0.2"
               FillBehavior="Stop">
            </DoubleAnimation>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </TextBox.Triggers>
  </TextBox>

Otherwise, the storyboards will be triggered for each and every GotFocus and LostFocus routed event of each UIElement on the Page because of these events' bubbling strategy.