How to make an animation start on a WPF event?

Question

Programming

Good day everyone.
Strongly do not kick, but there is such a question:
There is a TextBox, under it there are two TextBlocks, when you click the mouse (the start of input) in the TextBox, an animation should be launched that will raise the TextBlock above the TextBox, like a hint. The problem is that I don't know what to start the animation with. Logically, you need to tie it to TextBox.MouseLeftButtonUp, or the beginning of the input. There is an idea to make a custom RoutedEvent ... In short, I'm confused :( For now, to see how it all looks like, I tied the launch of triggers on Window.Loaded. Tell me where to dig ???

<Window.Resources>
        <PathGeometry x:Key="pathUsernameRU">
            <PathFigure StartPoint="0,45">
                <PolyLineSegment Points="0,10"></PolyLineSegment>
            </PathFigure>
        </PathGeometry>
        <PathGeometry x:Key="pathUsernameEN">
            <PathFigure StartPoint="0,45">
                <PolyLineSegment Points="0,70"></PolyLineSegment>
            </PathFigure>
        </PathGeometry>
    </Window.Resources>
    <Grid Width="300" Height="100">
        <Canvas>
            <TextBox Canvas.Top="35" Height="30" Width="300" BorderThickness="0"></TextBox>
            <Rectangle Canvas.Top="60" Fill="Black" Width="300" Height="2"></Rectangle>
            <TextBlock Text="Имя Пользователя" Canvas.Top="45" Foreground="#7BBFD3" Opacity="0"></TextBlock>
            <TextBlock Text="Username" Canvas.Top="45" Foreground="#7BBFD3" Opacity="0">
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                         From="0"
                                                         To="1"
                                                         Duration="0:0:0.2">
                                        </DoubleAnimation>
                                        <DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Top)"
                                                                  PathGeometry="{StaticResource pathUsernameEN}"
                                                                  Duration="0:0:0.2"
                                                                  Source="Y">
                                        </DoubleAnimationUsingPath>
                                    </Storyboard>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </TextBlock.Triggers>
            </TextBlock>
            <TextBlock Text="Имя пользователя" Canvas.Top="45" Foreground="#7BBFD3" Opacity="0">
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                         From="0"
                                                         To="1"
                                                         Duration="0:0:0.2">
                                        </DoubleAnimation>
                                        <DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Top)"
                                                                  PathGeometry="{StaticResource pathUsernameRU}"
                                                                  Duration="0:0:0.2"
                                                                  Source="Y">
                                        </DoubleAnimationUsingPath>
                                    </Storyboard>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </TextBlock.Triggers>
            </TextBlock>
        </Canvas>
    </Grid>

Answer 1

The easiest way is to move the animation to a resource. Unfortunately, MouseLeftButtonUp is handled by TexBox itself, so you won't be able to use it. You can use PreviewMouseLeftButtonDown.

<Window.Resources>
        <PathGeometry x:Key="pathUsernameRU">
            <PathFigure StartPoint="0,45">
                <PolyLineSegment Points="0,10"></PolyLineSegment>
            </PathFigure>
        </PathGeometry>
        <PathGeometry x:Key="pathUsernameEN">
            <PathFigure StartPoint="0,45">
                <PolyLineSegment Points="0,70"></PolyLineSegment>
            </PathFigure>
        </PathGeometry>
        <Storyboard x:Key="Storyboard">
        	<DoubleAnimation Storyboard.TargetName="textBlock1" Storyboard.TargetProperty="Opacity" 
        From="0" To="1"  Duration="0:0:0.2"></DoubleAnimation>
      <DoubleAnimationUsingPath Storyboard.TargetName="textBlock1" Storyboard.TargetProperty="(Canvas.Top)" 
        PathGeometry="{StaticResource pathUsernameEN}" Duration="0:0:0.2" Source="Y"/>
        	<DoubleAnimation Storyboard.TargetName="textBlock" Storyboard.TargetProperty="Opacity" From="0" To="1" 
        Duration="0:0:0.2" />
            <DoubleAnimationUsingPath Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(Canvas.Top)" 
        PathGeometry="{StaticResource pathUsernameRU}" Duration="0:0:0.2" Source="Y"/>
        </Storyboard>
    </Window.Resources>
    <Grid Width="300" Height="100">
        <Canvas>
            <TextBox x:Name="textBox" Canvas.Top="35" Height="30" Width="300" BorderThickness="0">
        <TextBox.Triggers>
          <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
              <BeginStoryboard Storyboard="{StaticResource Storyboard}"/>	
          </EventTrigger>
        </TextBox.Triggers>
      </TextBox>
            <Rectangle Canvas.Top="60" Fill="Black" Width="300" Height="2"></Rectangle>
            <TextBlock x:Name="textBlock" Text="Username" Canvas.Top="45" Foreground="#7BBFD3" Opacity="0"/>
            <TextBlock x:Name="textBlock1" Text="Имя пользователя" Canvas.Top="45" Foreground="#7BBFD3" Opacity="0"/>

        </Canvas>
    </Grid>

After that, a fun effect appears when, when pressed, a hint pops up each time. You can get rid of this by changing the animation a bit and removing From

<Storyboard x:Key="Storyboard">
        	<DoubleAnimation Storyboard.TargetName="textBlock1" Storyboard.TargetProperty="Opacity" 
         				To="1"  Duration="0:0:0.2"/>
        	<DoubleAnimation Storyboard.TargetName="textBlock" Storyboard.TargetProperty="Opacity"  
                To="1" Duration="0:0:0.2" />
        	<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" 
                Storyboard.TargetName="textBlock" Duration="0:0:0.2" To="70"/>
        	<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" 
                Storyboard.TargetName="textBlock1" Duration="0:0:0.2" To="20"/>
</Storyboard>

But most often ToolTip is used for tooltips.